Cascading Style Sheets (CSS); Learning More
By Will Bontrager2003-10-05
Using An Embedded Style Sheet
|
|
To use an embedded style sheet, create a test page and insert these seven lines into the HEAD area:
<STYLE TYPE="text/css">
<!--
BODY, TD, P, LI, BLOCKQUOTE {
font-family: sans-serif;
}
-->
</STYLE>
There is no need to upload the test page to your server. It can be tested right from your hard drive.
That's all there is to it. The text on your test page is "magically" converted to a sans-serif font according to the style you've defined.
Note: If you have FONT tags specified in the source code of your test page, those will need to be removed so the CSS style can do its job.
You can specify exact font names instead of the generic sans-serif, serif, or monospace. If the font name is available on the user's computer then it will be used. Arial and Helvetica are common sans-serif fonts for PC and Mac desktop computers. To control the exact font name to be used, with backups in case the one you specify isn't available on the user's computer, list the font names in order of preference, separated with a comma.
You've undoubtedly noticed that the method of defining a style is exactly the same whether you're using the embedded style sheet presented in this article or the external style sheet presented in "Cascading Style Sheets (CSS) -- Getting Started"
If you used the CSS definitions presented in that previous article and made them into an embedded style sheet, this would be the result:
<STYLE TYPE="text/css">
<!--
BODY, TD, P, LI, BLOCKQUOTE {
font-family: arial,helvetica,sans-serif;
font-size: 14px;
color: #000000;
}
H1 {
font-size: 36px;
font-weight: bold;
text-align: center;
color: red;
background: blue;
}
A:link {
color: yellow;
background: red;
font-weight: bold;
}
A:active {
text-decoration: underline;
}
A:visited {
color: red;
background: yellow;
font-style: italic;
text-decoration: line-through;
}
A:hover {
text-decoration: none;
color: purple;
background: pink;
font-size: 22px;
font-weight: bold;
}
-->
</STYLE>
The method of specifying styles is the same whether you embed the style sheet or use an external file.
Using an external style sheet, all the style definitions are contained in one file. Using an embedded style sheet, each page has it's own definitions. With the former, you can change the style of many web pages by changing only the one file containing the style definitions. With the latter, you can change the style of individual pages with no effect on others.
Tutorial Pages:
» Introduction
» Using An Embedded Style Sheet
» Defining And Using Custom Styles
Copyright 2004 Bontrager Connection, LLC
|
