In this tutorial you will learn about the CSS Inclusion and its application with practical example.
There are four different ways CSS can be applied in any web page –
- Inline CSS
- Embedded CSS
- External CSS
- Imported CSS
Inline CSS
In Inline CSS method all the styling applied to the HTML Element are defined inside the HTML Tag.
Example:
|
1 |
<p style="color:#ff9900">Inline CSS.</p> |
Embedded CSS
In this method styles are embedded inside the HTML document using the ‘style’ element (usually within the <head> tag).
Example:
|
1 2 3 4 5 6 7 8 9 10 11 |
<head> <style type="text/css"> p {color:#ff9900;} </style> </head> <body> <p> Embedded styling example. </p> </body> |
External CSS
In this method all CSS that you want to use throughout your website are declared in a external style sheet which is a separate file that file typically has extension of ‘css’ . You can then include this external style sheet in any or all of your HTML pages.
Example:
|
1 |
<link rel="stylesheet" href="[external-style-sheet.css]" type="text/css"> |
Imported CSS
External Stylesheets can also be imported into an HTML document using @Import rule.
Example:
|
1 2 3 4 5 6 |
<STYLE TYPE="text/css"> <!-- @import "external_style_sheet.css"; @import url(https://www.mysite.com/external_style_sheet.css); --> </STYLE> |
