You must have heard about CSS. The full name of CSS is Cascading Style Sheet. This is called CSS in shortened form. If you work with HTML, you must know CSS. But do you know what is CSS? What is the function of CSS? If you do not know all this then do not worry. You will know soon.
But, before knowing all this, it is important to know one thing. The structure of a Web Document is prepared by HTML. The technique by which the framework is formatting is called ‘CSS’. Now let us know more about CSS.
CSS is a Style Sheet Language. CSS 3 is the latest version. CSS is used to decorate web pages. CSS defines the look and feel of a website. CSS is used in addition to HTML.
CSS is used for Layout, Background, Font and Text Style, Formatting of an HTML Document. CSS is written independently. CSS has its own code-word Style Rules which format a web page in different ways.
Advantages of CSS
Provide Responsive Design – You cannot optimize webpage from HTML for every device. However, with the Media Queries Rules of CSS, you can make Webpages responsive according to the device.
Easy to Maintenance – You can set CSS Rules for the entire website in just one stylesheet. Therefore, we do not face any problem in managing a file.
Increase Page Speed - There are dozens of Elements in an HTML Document, for which we have to set different Style Rules. And in some, their number reaches hundreds or even thousands. Therefore, the size of the page increases. However, with the help of CSS, style rules are set for all elements in only one stylesheet. Which removes the extra HTML. And the size of the page decreases. And this causes Page Fast Load.
CSS is a very Advance and Flexible Web Designing Language. Which gives Web Masters the freedom to work. One of the hallmarks of this is to style CSS. We can mainly add CSS in three ways.
1.Inline CSS
Inline CSS is written in HTML Element. We declare Inline CSS by Style Attribute. Which only affects that element. The element in which Style Rule Declare has been done. This has no effect on the other Elements of the document. See example below.
<p style="color: yellow;">This is paragraph.</p>2.Internal CSS
Internal CSS is written for a particular page. The effect of Internal CSS Style is only on Elements of that page. The page on which the Style Rules have been declared.
Inline Style Element is Specific, while Internal Style Document is Specific. Inline CSS Style is defined in the Header section of the document. HTML Style Element is used for this. The following is how to add inline CSS.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Demo</title>
<style type="text/css">
p {
color:orange;
}
</style>
</head>
<body>
<p>My Name is Experts Tool.</p>
</body>
</html>3.External CSS
We declare the External Style in a separate document. Which is called Style Document or Stylesheet. Then it is added to the website or webpage by Link Element.
You can save External Stylesheet by any name. CSS File has File Extension .css. Which has to be written next to the file name. External CSS File is created as follows.
body {
background: pink;
}
p {
color:yellow;
font-size: 14px;
}
h1 {
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}
Now your external stylesheet is ready. And the webpage with which you want to connect it. Add this by Link Element in the Header section of that webpage. And on that page, Declare Style Rules will be applied in this stylesheet. External CSS File is added as follows.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="cssfilename.css">
</head>
<body>
</body>
</html>