types of CSS

CSS stands for Cascading Style Sheets which consists of various styles that defines how to display HTML elements. It is used to make the design of the Website dynamic and attractive. Styles are normally stored in Style Sheets. Since, every tags cannot design the Web site in very fascinating way we use CSS to solve that problem.

Advantages of using CSS

Web pages will load faster.
It helps to maintain design consistency across all the pages of the Web site.
CSS allows for customizing elements such as font, font size, font color and many other
CSS can help to make Web pages available for different media (desktop PC, mobile phones). i.e. device responsive
It makes web page compatible with almost all the browsers.

CSS styles can be in various forms which are illustrated below with an example.

Without using CSS

<HTML>
<HEAD><TITLE>inline CSS</TITLE></HEAD>
<BODY bgcolor = “red”>

</BODY>
</HTML>

Above HTML file will generate empty webpage with just red color background. Same thing can be done by using several types of CSS i.e inline, internal and external CSS.

Inline CSS

This types of CSS are written inside the HTML tag.

<HTML>
<HEAD><TITLE>Inline CSS</TITLE></HEAD>
<BODY style = “background-color: red;”>


</BODY>
</HTML>

In above HTML file we have added style inside BODY tag. Similarly, we can add any number of CSS inside HTML tag.

Internal CSS

This types of CSS are written inside <STYLE> tag, which is placed in -between HEAD tag of an HTML document.

<HTML>
<HEAD><TITLE>Internal CSS</TITLE>
<STYLE>
body{
background-color: red;
}
</STYLE>
</HEAD>
<BODY>


</BODY>
</HTML>

In above HTML file we have added STYLE tag inside HEAD. CSS is written directly selecting body tag.

Note: We can select id as well as class of any HTML tag. # is used to access id of the tag whereas, . is used to access class of the tag.

External CSS

In this type we have to prepare HTML file and CSS file separately. These two file are linked by following statement.

<link rel=“stylesheet” href=“name.css”>

Consider the following HTML document.

<HTML>
<HEAD><TITLE>External CSS</TITLE>
<link rel=“stylesheet” href=“mero.css”>
</HEAD>
<BODY>


</BODY>
</HTML>

Since we have linked “mero.css” in HTML file we have to create a separate CSS file named “mero.css”. We can directly right CSS without STYLE tag in CSS document.

body{
background-color: red;
}

In above HTML file we have a created separate HTML and CSS file which are linked together.

Readers Login