CSS How To...
How to Insert a Style Sheet
When a browser reads a style
sheet, it will format the document according to it.
There are three ways of inserting a style sheet:
External Style Sheet
An external style sheet is ideal
when the style is applied to many pages. With an
external style sheet, you can change the look of an
entire Web site by changing one file. Each page must
link to the style sheet using the <link> tag. The
<link> tag goes inside the 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 document according to it.
An external style sheet can be
written in any text editor. 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:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
|
Do NOT leave
spaces between the property value and the
units! If you use "margin-left: 20 px"
instead of "margin-left: 20px" it will only
work properly in IE6 but it will not work in
Mozilla or Netscape. |
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 section by using
the <style> tag, like this:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
|
The browser will now read the
style definitions, and format the document according
to it.
Note:
A browser normally ignores unknown tags. This means
that an old browser that does not support styles,
will ignore the <style> tag, but the content of the
<style> tag will be displayed on the page. It is
possible to prevent an old browser from displaying
the content by hiding it in the HTML comment
element:
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
|
Inline Styles
An inline style loses many of the
advantages of style sheets by mixing content with
presentation. 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
shows how to change the color and the left margin of
a paragraph:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
|
Multiple Style Sheets
If some properties have been set
for the same selector in different style sheets, the
values will be inherited from the more specific
style sheet.
For example, an external style
sheet has these properties for the h3 selector:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
|
And an internal style sheet has
these properties for the h3 selector:
h3
{
text-align: right;
font-size: 20pt
}
|
If the page with the internal
style sheet also links to the external style sheet
the properties for h3 will be:
color: red;
text-align: right;
font-size: 20pt
|
The color is inherited from the
external style sheet and the text-alignment and the
font-size is replaced by the internal style sheet.
|