Types of CSS
Types of CSS
There are three ways of inserting a style sheet in any Html documents, they are given below;
- Inline style sheet
- Internal style sheet
- External style sheet
Inline Styles Sheet
Inline CSS is use with any elements of HTML where it is used on page. Here we use inline css for paragraph, the example shows how to change the color and the left margin of a paragraph:
Example of inline css for<p< tag
Example
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. Internal styles sheet is defined in the head section of an HTML page, by using the <style> tag, like below:
Example
<html>
<head>
<style>
hr {
color:red;
}
p {
margin-left:20px;
}
</style>
</head>
<body>
<p>This is paragraph</p>
<hr>
<p>This is paragraph</p>
</body>
</html>
Example
This is h2 heading
This is paragraph
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, we can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section:
Example
<html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> </html>
An external style sheet can be written in any text editor like notepad, edit plus etc. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
Example
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Note: Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is: margin-left:20px