CSS Usage
Overview
There are three ways of inserting style information:
- In the header of a given HTML page (Internal Style)
- Within a given tag (Inline Style)
- In an separate file which is then linked to the HTML page by a reference in the page header (External Style)
[Top]
External Style Sheets
External style sheets are the best method when you want the style to be applied to many pages. With an external style sheet, you can change the look of an entire web site by changing one external style sheet file. Each HTML document that you want to apply these styles to must contain a link to the style sheet using the <link> tag inside the <head></head> section:
<head>
...
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
The browser will read the style definitions from the file mystyle.css, and format the HTML document accordingly.
An external style sheet can be written in any text editor and saved with a .css extension.
[Top]
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the <head></head> section by using the <style> tag, like this:
<head>
...
<style type="text/css">
body {background-image: url(images/back40.gif);}
hr {background: #ffffff;color: 0000ff;}
p {margin-left: 20px;}
</style>
</head>
The browser will now read the style definitions, and format the document according to it. If the document also contains a link to an external style sheet, the internal style declarations will over-ride any similar declarations within the external sheet.
This can be helful when you wish to re-adjust the style of a single page - for example, alter the padding on the body tag.
[Top]
Inline Style
An inline style loses many of the advantages of style sheets by mixing content with presentation.
Therefore, you should use this method sparingly, such as when a style is to be applied to a single occurrence of an element.
To use inline styles, you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the font-style and the left margin of a paragraph:
<p style="font-style: italic; margin-left: 20px;">
This is a paragraph
</p>
Inline style will overide both internal and external style declarations.
[Top]
Multiple Style Sheets
If some properties have been set for the same selector in different style sheets, the final value will be inherited according to the rules of Cascading Style
For example, an external style sheet has these properties for the h3 selector:
h3 {text-align: left; font-style: italic; font-size: 200%;}
And an internal style sheet has these properties for the h3 selector:
h3 {text-align: right; font-size: 100%;}
And an inline style declaration reads:
<h3 style="font-size: 80%;">...</h3>
The final values will be:
- text-align: right (from the internal style sheet over-riding the external sheet)
- font-style: italic (from the external sheet)
- font-size: 80% (from the inline style over-riding both the external and internal declarations for font-size)
[Top]
