Three Ways to Insert CSS
There
are three ways of inserting a style sheet:
- External style sheet
- Internal style sheet
- Inline style
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>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
·
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
p
{
Margin-left: 20px;
}
body
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 of an HTML page, by using the
<style> tag, like this:
<Head>
<style>
hr
<style>
hr
{
Color: sienna;
}
p
p
{
Margin-left: 20px;
}
body
body
{
Background-image:url("images/back40.gif");
}
</style>
</head>
</style>
</head>
Inline Styles
·
An
inline style loses many of the advantages of style sheets by mixing content
with presentation. Use this method sparingly!
·
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>
No comments:
Post a Comment