A "style" is the complete set of formatting instructions for any given element. Many webmasters have already been using styles in their web pages. The heading tags represent various styles: heading level 1 is 24pt, bold, and Times Roman by default. The heading level 4 tag is bold, Times and 12pt by default. Using cascading style sheet features, you can now change the default attributes of existing styles both temporarily or throughout a document and even across documents. You can even create new styles, based on existing styles.
Currently, there are four methods of applying style variations to your text:
1. Linking to a separate file of style definitions
To use a single style sheet to control multiple files, each file needs to be linked to the file. The file itself must be a text file with an extension of ".css". To link a given file back to that set of style information, the syntax would look like this:
<LINK REL=STYLESHEET HREF="mystyles.css" TYPE="text/css">
The caveat, however, is that the server must know and understand what a "css" file is and how to use it. The file type needs to be registered with the server.
2. Importing a style file
Another method for accessing an external style file involves using the "@import" method. The syntax for using the import method would be as follows:
<STYLE TYPE="text/css">
<!--
@import url(http://www.domain.com/stylefile.css);
H1 { color: blue }
-->
</STYLE>Note that in the above method, a semicolon is needed at the end of the import statement to separate it from any following style information. As with the link method, unless you have control over your server and can set the server to recognize the .css file type, this method is not recommended.
3. Embedding style information in an HTML document
The syntax for embedding a block of style information in a single document is as follows:
<HTML><HEAD>
<STYLE>
<!--H1 {...style information here...} etc.
-->
</STYLE>
</HEAD><BODY>
Note that <STYLE> is a container tag.
4. Using an "inline" style
You can use temporary "inline" styles so they span a given block of text (or graphics or tables or any html element.) The syntax, for example, to put a yellow highlight behind a couple of words would look like this:
<SPAN STYLE="background: yellow">Hello World!</SPAN>
Note that <SPAN> is a container tag.
The term "cascading" refers to the fact that one can use multiple, overlapping style definitions in a document. A style sheet file might be linked to every document on the site, controlling the styles. But within any one of those linked documents there could be a style header block, which then overrides what is coming from the linked style sheet. Within the same file, there may be a "spanned" style, which overrides the style information embedded in the header block as well as the style information from the linked style file.
The following are attributes that can be changed with any of the methods for defining style variations:
| Attribute Name | Values | Description |
|---|---|---|
| color | blue papayawhip etc. |
Sets font color |
| background | yellow black etc. |
Sets the background color. Syntax to use a background image
instead of a color looks like this:
background: url(image.gif) |
| font-family | Times Arial Verdana or "Verdana", "Arial", "Times" etc. |
Specifies the desired typeface. When multiple names are given the browser will use the first in the list that it finds on the enduser's system. |
| font-size | 12pt (point size 1in (size in inches) .5cm (size in centimeters) 200px (size in pixels) etc. |
Sets the size of the text characters |
| font-weight | bold normal light |
Specifies the desired font "thickness" |
| font-style | italic normal |
Turns on or off the italicized version of the given typeface |
| text-decoration | underline none |
Allows you to un-underline links, for example. Can be used to add underline to text as well. |
| line-height | 150% 75px 1.08in etc. |
Specifies the "leading" or amount of vertical space between characters |
| text-indent | .25in 3em (3 "em" spaces) 24pt 50px 3cm |
Specifies the first-line indent for a paragraph. Only affects the first line; the rest of the paragraph wil wrap to the left margin. |
| margin-left | .25in 3em (3 "em" spaces) 24pt 50px 3cm |
Sets the left margin for the given element. Can be set to a positive or negative number. |
| margin-top | .25in 3em (3 "em" spaces) 24pt 50px 3cm |
Sets the top margin for the given element. Can be set to a positive or negative number. |
| text-align | center left right |
Specifies the horizontal alignment of any given text element. |