Hello friends, today we will learn What is CSS, What is the full form of CSS, What is the type of CSS style. Answers to all such questions about CSS and much other useful information, Hope this information will work for you.
What is CSS in HTML
CSS is a language that allows us to give an attractive appearance to an HTML document. As we have known in our previous article (What is HTML) and what does it work for, where we shape a webpage with HTML, with CSS we give that page an attractive look.
We need a text editor (such as Notepad, Sublime, Visual Code Studio, etc.) to write CSS and the changes made in the webpage are visible on the web browser.
The full name of CSS is cascading style sheet, and it was developed by W3C in 1996. Which is used to beautify documents written in a markup language, including layout, colors, and fonts, etc. CSS can also be used with any type of XML documents, including XML, SVG, and XUL.
Types of CSS
Inline Styles Sheet
In the example below, we can see that, in the body tag, the style attribute is defined. Next, the property and value are defined in the style attribute. This is called an inline style sheet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Demo</title>
</head>
<body style="background-color: green;">
<h1>This is Inline CSS Demo</h1>
</body>
</html>
Property:background-color:
Value: green
Internal Style Sheet
In the example below, we can see that the <style> tag is defined in the head section in the internal style sheet. Then using selectors, we define the styles. In this, HTML and CSS code are defined in a single document This is called the Internal style sheet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal Style Sheet</title>
<style>h1 { color:red; }</style>
</head>
<body>
<h1>This is Internal Style Sheet</h1>
</body>
</html>
As we read above what is an Inline Style Sheet and Internal Style Sheet, now we will know about the External Style Sheet, so let us start.
External Style Sheet
In the External Style Sheet as the name itself suggests, an external file will be used it. In the context of the External Style Sheet, the CSS code is written in another file and along with that, we have to link it to the head tag of the HTML file.
As we know in our previous article (What is HTML), any HTML file is saved with a .html extension, similarly, we have to save CSS file with .css extension it is called External Style Sheet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal Style Sheet</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>This is Internal Style Sheet</h1>
</body>
</html>
href=”” Inside brackets, we have to give the path (location) of our CSS file (in the example above, CSS is the name of a folder and style.css is the name of the file).
External style.css demo
body { background-color: green; }
h1 { color:red; }
Top comments (0)