Types of CSS (Cascading Style Sheet)

In this article, you will learn the types of CSS, differences among these types, and priority in detail with some simple examples.

Let’s start it.

Types of CSS with Examples

There are three types of CSS:

types of css: inline, internal, external

Inline CSS

Inline CSS is generally used to style a specific HTML element only. We can write inline CSS simply by adding the style attribute to each HTML element.

For Example:

  <h1 style="background-color:yellow;"> This is a heading </h1>
  <p style="color:red"> This is some pragraph </p>

This CSS type is not really recommended, as each HTML tag needs to be styled individually. Managing a website may be difficult if we use only inline CSS.

Advantages

  • You can easily and quickly write inline CSS to an HTML page. 
  • It is useful for testing or previewing the changes, and performing quick fixes to your website.
  • You don’t need to create or link a separate document as required in the external CSS.

Disadvantages

  • Generally, Inline CSS needs to write in each HTML tag individually. So managing a website may difficult if we use only inline CSS.
  • Adding CSS property to every HTML tag is time-consuming.
  • Styling multiple elements can affect your page’s size and download time.

Example

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color:red">Simple Box Design </h1>
    <div style="height:200px;width:300px;background-color:yellow"> </div>
  </body>
</html>

Internal CSS

Internal CSS is also known as embedded CSS. It is generally used to style a single page. We can write internal CSS inside a <style> tag within the HTML pages.

For Example:

  <style>
  h1{
    background-color : yellow;
    color : red;
  }
  </style>
  <h1> This is a heading </h1>

This CSS type is an effective method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS style on every page of your website.

Advantages

  • You can use ID and class selectors to write the internal CSS.
  • Since you’ll only add the code within the same HTML file, you don’t need to create or upload multiple files.

Disadvantages

  • Since you’ll only add the code within the same HTML file, styling multiple pages will become time-consuming.
  • Adding the code to the HTML document can increase the page’s size and loading time.

Example

<!DOCTYPE html>
<html>
  <head>
     	<style>
	/* Using tag name as a selector here */
	h1{
	   background-color:orange;
	}

	/* Using class as a selector here */
	.box{
	   height:200px;
	   width:300px;
	   background-color:yellow;
	}

	/* Using ID as a selector here */
	#circle{
	   height:200px;
	   width:200px;
	   background-color:red;
	   border-radius:50%;
	}
	</style>
  </head>
  <body>
    <h1>Simple example of internal CSS</h1>
    <div class="box"></div>
    <div id="circle"></div>
  </body>
</html>

External CSS

With an external CSS, you can change the look of an entire website by changing just one file. We can write external CSS in a separate .css file. Each HTML page must include a reference to the external CSS file inside the <link> tag, inside the <head> tag.

For Example:

creating a my-style.css file with any text editor( eg:- Notepad++)

/* Using tag name as a selector here */
h1{
   background-color:orange;
}

/* Using class as a selector here */
.box{
   height:200px;
   width:300px;
   background-color:yellow;
}

/* Using ID as a selector here */
#circle{
   height:200px;
   width:200px;
   background-color:red;
   border-radius:50%;
}

Now include my-style.css external file in your HTML page using <link> tag:

<link rel="stylesheet" type="text/css" href="my-style.css" />

Complete HTML page will looks like:

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" type="text/css" href="my-style.css" />
  </head>
  <body>
    <h1>Simple example of external CSS</h1>
    <div class="box"></div>
    <div id="circle"></div>
  </body>
</html>

Advantages

  • Since the CSS code is in a separate file, your HTML files will have a cleaner structure and are smaller in size.
  • You can use the same .css file for multiple pages when you want the same look for each page.

Disadvantages

  • Your pages may not be rendered correctly until the external CSS is loaded.
  • Uploading multiple external CSS files can increase the download time of a website.

Difference between Inline, Internal, and External CSS

The below table shows you the differences between all these three types of CSS:

Inline CSSInternal CSSExternal CSS
Inline CSS is used to style a specific HTML element.Internal CSS is used to style a specific HTML page.External CSS is used to change the look of an entire website by changing just one file.
You can write inline CSS using the style attribute.You can write Internal CSS using the <style> tag.You can write External CSS in a .css file.
It doesn’t allow you to use any selectors.It allows you to use selectors.
eg:- id, class, tag name, etc.
It also allows you to use selectors.
It takes time to use as each element need to add.It is also time-consuming but in comparison to Inline CSS is less.It saves time as you can use the same file on multiple pages for the same look.

Conclusion

In this article, you have learned the types of CSS, differences among all three types of CSS.

Related Articles:

Share with friends

Leave a Comment

Your email address will not be published. Required fields are marked *