Incorporating Style Sheets Into Your Document
There are three ways to associate style rules with your document. One way is to create a separate file containing the style rules and applying these rules to your document with a link tag. The link tag was introduced with HTML 3 to describe relationships between a document and other entities.
| <link rel="stylesheet" href="style.css" type="text/css" /> |
The rel attribute to the link tag denotes the type of relationship. rel="stylesheet" indicates that the link is to a style sheet. The href attribute can be any URL pointing to a style sheet. Note that the style sheet must
be served with a mime type of text/css. The type attribute gives the style sheet language. Currently, the dominant style sheet language is CSS, for Cascading Style Sheet. Competing style sheet specifications that will also see significant use are the eXtensible Style Language (XSL) and the Document Style Semantics and Specification Language (DSSSL), but they will not be discussed here. The type="text/css" specifies that the style sheet is a CSS style sheet.
Style rules can also be defined in the header of the HTML document with the style tag. Frequently these style rules are surrounded by an HTML comment. This prevents the style rules from being displayed as text by older browsers that do not understand CSS styles.
| <html>
<head>
<title>Introduction to Cascading Style Sheets</title>
<style type="text/css">
<!--A:link { color: #900 }
A:visited, A:active {color:#009}-->
</style>
</head>
<body> .
.
.
</body> </html>
|
The third method for defining style rules is to use the style
attribute to an HTML tag.
An example would be:
| This HTML markup |
renders like this |
|
<p style="background: #ffffdd">
This paragraph is rendered in a special style.
</p>
|
This paragraph is rendered in a special style.
|
|