In this article, you will learn the Types of CSS (Cascading style sheet) with simple examples and the differences between these CSS types in detail.
Letโs start it.
Table of Contents
What are the different types of CSS?
There are three types of CSS:
3 Types of CSS with Examples
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 be 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" />
The complete HTML page will look like this:
<!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 the 3ย types of CSSย styles
The below table shows you the difference between inline or embedded and external CSS. Internal CSS is also known as embedded CSS.
| Inline CSS | Internal CSS | External 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 3 types of CSS (ie. inline CSS, Internal CSS, and external CSS), and the difference between inline internal and external CSS.
FAQs
What are the 3 types of CSS?
There are three types of CSS inline, internal, and external CSS.
What are the 3 ways to style in CSS?
There are 3 distinct methods for styling in CSS,ย Local style, Page-Level style, and External Style. Each level of styling is given a different hierarchical priority and is used for different reasons.
Related Articles:
- CSS Priority
- CSS โ Color Names and Color Codes
- CSS โ Most common CSS properties Part-1
- CSS โ Most common CSS properties Part-2
