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")}
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>