Hello friends, here is a tutorial of types of CSS. CSS stands for Cascading Style Sheet. CSS is used in web development for to style webpage. Using CSS, you can change font-size, font-family, text color, background color, etc.
There are 3 (three) types of Cascading Style Sheet. There are few advantages and disadvantages of these different types of style sheets.
Following are the list of different types of style sheets:
Inline style sheet is embedded to individual elements of HTML.
To give inline style sheet to particular HTML element then use 'style' attribute of any HTML element.
If you give same style to another HTML element, then style code is repeated. It is better to not write too much inline style sheet.
Inline style sheet is useful when you want to override a style sheet.
Example:
OUTPUT:
Internal style sheet is also known as embedded style sheet.
This internal style sheet is written inside <head> tag of HTML.
To write internal style sheet inside <head> tag, you have to use <style> tag of HTML.
Syntax:
Scope of this style sheet is within the page. If you want to use this style sheet in another page then you have to write again this internal style sheet in that page.
Example:
OUTPUT:
This type of style sheet is written in separate '.css' file and linked to the webpage.
This type of style sheet reduces redundant code of style sheet.
Because of separate external '.css' file, you can link it into any number of pages, in short reuse the style.
I highly recommended, to use external style sheet.
There is nothing new to external style sheet creation, just create separate '.css' file like below:
Example:
mystyle.css
After creating 'mystyle.css' file then create HTML file named 'mypage.html' and embed this external style sheet file using HTML <link> tag as illustrated below:
mypage.html
OUTPUT:
NOTE: These two files 'mystyle.css' and 'mypage.html' must be in same directory/folder.
 |
| Types of Cascading Style Sheet |
There are 3 (three) types of Cascading Style Sheet. There are few advantages and disadvantages of these different types of style sheets.
Following are the list of different types of style sheets:
- Inline Style Sheet
- Internal Style Sheet
- External Style Sheet
1. Inline Style Sheet
Inline style sheet is embedded to individual elements of HTML.
To give inline style sheet to particular HTML element then use 'style' attribute of any HTML element.
If you give same style to another HTML element, then style code is repeated. It is better to not write too much inline style sheet.
Inline style sheet is useful when you want to override a style sheet.
Example:
<div style="background-color:black;color:white;">
This is div tag
</div>
This is div tag
</div>
OUTPUT:
This is div tag
2. Internal Style Sheet
Internal style sheet is also known as embedded style sheet.
This internal style sheet is written inside <head> tag of HTML.
To write internal style sheet inside <head> tag, you have to use <style> tag of HTML.
Syntax:
<style type="text/css">
...
</style>
...
</style>
Scope of this style sheet is within the page. If you want to use this style sheet in another page then you have to write again this internal style sheet in that page.
Example:
<html>
<head>
<style type="text/css">
div
{
background-color:yellow;
color:red;
}
</style>
</head>
<body>
<div>
This is div tag
</div>
</body>
</html>
<head>
<style type="text/css">
div
{
background-color:yellow;
color:red;
}
</style>
</head>
<body>
<div>
This is div tag
</div>
</body>
</html>
OUTPUT:
This is div tag
3. External Style Sheet
This type of style sheet is written in separate '.css' file and linked to the webpage.
This type of style sheet reduces redundant code of style sheet.
Because of separate external '.css' file, you can link it into any number of pages, in short reuse the style.
I highly recommended, to use external style sheet.
There is nothing new to external style sheet creation, just create separate '.css' file like below:
Example:
mystyle.css
div
{
background-color:cyan;
color:blue;
}
{
background-color:cyan;
color:blue;
}
After creating 'mystyle.css' file then create HTML file named 'mypage.html' and embed this external style sheet file using HTML <link> tag as illustrated below:
mypage.html
<html>
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>This is div tag</div>
</body>
</html>
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>This is div tag</div>
</body>
</html>
OUTPUT:
This is div tag
NOTE: These two files 'mystyle.css' and 'mypage.html' must be in same directory/folder.
