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 https-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 https-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 https-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; }Features of CSS
Pages Load Faster
If we use CSS, we do not need to add attributes to each tag to style HTML elements. If we want to give the same style to any HTML elements, we can easily style it together in a CSS file, thus reducing our HTML code significantly, which makes our web page load faster.
CSS Saves lots of time
The great feature of CSS is that by using CSS we can save a lot of time. Because we can use the same CSS file on multiple HTML pages.
Easy Maintenance
As we have read above we can code for multiple webpages using the same style sheet, so if we need to change the design of all our web pages, we have to update the code in the same file This will automatically update the design of our entire website.
Animations and Transitions
Using Animations and Transitions in CSS, we can make our website even more attractive.
We hope you liked this article (What is CSS). You must keep your thoughts about this in the comment below and share this article with your friends.