A browser reads a cascading style sheet, and then it formats the HTML document as per the declaration specified in the style sheet. There are three ways to insert a style sheet into a web page-
• External style sheet
• Internal style sheet
• Inline style
• External Style Sheet-
External style sheet is an external file with .css file extension. When we make changes in this file, then we can modify the appearance of an entire website. Every page of website has to include a reference of the external style sheet within the <link> element. The <link> element is specified in the <head> section. As-
Example-
<head>
<link rel="stylesheet" type="text/css" href="style_exp.css">
</head>
We can opt any text editor to create an external style sheet. This type of file is not required any html tags. The CSS file must be saved with a .css extension.
Example of "style_exp.css":
body{
background-color: lightgreen;
}
h1{
color: green;
margin-left: 30px;
}
In the above code, we have mentioned that there should not be any space left blank between the property value and the unit (e.g. margin-left: 20px; is correct, while margin-left: 20 px; is incorrect)
Internal Style Sheet-
If a web developer has a single page than the internal style sheet may be opted. It is defined within the <style> element, of the <head> section of an HTML page-
Example-
<head>
<style>
body{
background-color: red;
}
h1{
color: green;
margin-left: 40px;
}
</style>
</head>
Inline Styles-
An inline style may be opted to apply a exclusive style for a single element. To use inline styles, we added the style attribute to the relevant element. The style attribute can contain any CSS property. Following example shows the change of the color and the left margin of a <h1> element:
Example-
<h1 style="color: red; margin-left:30px;">It’s heading</h1>
However the inline style has many drawbacks (where we are mixing content with presentation). This method should not be opted frequently.
Managing Multiple Style Sheets-
If any properties have been defined for the same selector/element in many style sheets, the value from the last read style sheet will be opted.
Example-
Suppose that an external style sheet has the style below for the <h1> element-
h1{
color: navy;
}
Further, suppose that an internal style sheet also has the following style also for the <h1> element-
h1{
color: orange;
}
Here the internal style is defined after the external style sheet, the <h1> elements will be "orange" it means that the value from the last read style sheet will be opted.
Example-
<head>
<link rel="stylesheet" type="text/css" href=”style_exp.css">
<style>
h1{
color: orange;
}
</style>
</head>
Its opposite when the internal style is defined before the external style sheet, the <h1> elements will be "navy".
Example-
<head>
<style>
h1{
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="style_exp.css">
</head>
Cascading Order-
In HTML elements we can opt more than one style in a sheet. They can be opted by “Cascading” a new style sheet called “Virtual Style Sheet”. The rule is followed to provide the highest priority.
• Inline style
• External/Internal style sheets
• Browser default
In this the inline style which is inside the HTML elements has the top precedence; it means that this will override the style mentioned inside the tag<head> which is internal style sheet, or in an external style sheet, or a browser default style value.