What is CSS | Types Of CSS

CSS stands for Cascading Style Sheet that developed by Hakon Wium Lie Bert Bos in the year 1996.

Cascading Style Sheet (CSS) is used to design basic HTML web pages. Using CSS you can make your website more beautiful and attractive. CSS describes how HTML elements should be displayed.

CSS is very easy to learn Language. CSS is Client-Side Scripting Language. You can run CSS code in your browser. Through CSS you can control font style, font colour, margin, spacing, animations, etc.

There is Total 3 types of CSS :-

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Let’s see the difference between 3 types of CSS:-


1. Inline CSS:-
Inline CSS is used for adding styles in a single HTML element/tag. Inline CSS is directly written in the specific HTML tag that you want to make stylish. You can add Inline CSS in specific HTML tag using the style attribute. 

Example :-

<!DOCTYPE html>
<html>
<head>
	<title>Inline CSS Example By IconTricks</title>
</head>
<body>
	<h1 style="font-style:italic; color:red;">IconTricks</h1>

	<p style="color: blue; font-size:20px;">This is a Example of Inline CSS</p>
</body>
</html>

Output :-

Inline CSS Example By IconTricks

IconTricks

This is a Example of Inline CSS


2. Internal CSS:-
Internal CSS is used for adding styles in multiple tags of a single page. Internal CSS is written in head section of the HTML document within <style> tag. 

Example :-

<!DOCTYPE html>
<html>
<head>
	<title>Enternal CSS Example By IconTricks</title>
	<style type="text/css">
			h1{
				font-style: italic;
				color: red;
			}
			p{
				color: blue;
				font-size: 20px;
			}
	</style>
</head>
<body>
	<h1>IconTricks</h1>

	<p>This is a Example of Internal CSS</p>
</body>
</html>

Output :-

Enternal CSS Example By IconTricks

IconTricks

This is a Example of Internal CSS


3. External CSS:-
External CSS is used for adding styles in all pages of a website. External CSS is written in a separate file with and saved with .css extension. You can link an external CSS file with HTML files using the link tag. 

Example :-

HTML File

<!DOCTYPE html>
<html>
<head>
	<title>External CSS Example By IconTricks</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
	<h1>IconTricks</h1>

	<p>This is a Example of Internal CSS</p>
</body>
</html>

CSS File

h1{
font-style: italic;
color: red;
}
p{
color: blue;
font-size: 20px;
}

Output :-

Inline CSS Example By IconTricks

IconTricks

This is a Example of Inline CSS

We Hope this is useful for you guys.

Thanks for reading 📖

So, bookmark our site and also share with your friends and family 👪

We provide you a wonderful course on CSS, you can get it by clicking on below Get Course button.

Leave a Reply

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