| C S S | PAGE (2 of 4) |
|
CSS styles are a mechanism for assigning formatting to individual HTML tags. By creating a CSS style for a tag a Web author is freed from the drudgery of separate formatting work for each part of a document. CSS styles are similar to style sheet features found in many word processors. By specifying and altering CSS style sheets an author is able to easily make global formatting changes to a document.
| CSS Style Table | |
| Properties | Values |
|---|---|
| border-color | blue |
| font-family | helvetica |
| font-style | normal |
| font-size | 14pt |
| font-weight | bold |
| margin-left | 0.5in |
| margin-right | 0.5in |
| text-align | left |
| background-color | white |
| background-image | url(back.gif) |
To specify a CSS style in a document one must create a series of name:value pairs separated by a colon. The name of the pair lists a CSS style attribute or property. The value gives the specific formatting value to be applied to the attribute. The syntax is: "CSS property : value". The following incomplete table at the right gives some of the more common CSS properties and sample values. For a more complete CSS reference table visit c|net builder.com.
There are two types of CSS styles: inline and document-level. Inline styles are simply the CSS equivalent of specifying formatting for individual HTML tags. In DHTML, each HTML tag can have an optional STYLE attribute for specifying inline style types. The STYLE attribute is set equal to a string that contains the inline styles for the tag. The CSS style name:value pairs are separated by semi-colons to allow multiple styles to be applied to a single tag. For example, the following DHTML specifies an inline style for a paragraph:
<P STYLE="font-family:Arial, Helvetica, sans-serif; font-style:italic; color: blue">
This is a blue, italic, Arial paragraph.
|
Inline tags allows an author to over-ride document-level styles. HTML tags without inline styles will be formatted according to any document-level styles specified for the tag type. This allows authors to temporarily suspend the global formatting when, for example, a quoted paragraph is needed. (The multiple font-family values gives the browser alternative fonts to use if one cannot be found. It is best to end a font list with a generic, "sans-serif" to ensure that a compatible font will be found.)
Document-level styles are specified within a pair of <STYLE> ... </STYLE> DHTML tags that must be placed between the <HEAD> ... </HEAD> section tags of a document. The global document formatting for a desired tag is indicated by listing the HTML tag, (without the < > brackets), following by a set of braces, { }, containing the CSS style name:value pairs to be applied to all tagged text in the document, (the colon separator is required). The following example specifies global styles for heading one tags and document paragraphs:
<HEAD>
<STYLE>
<!-- comment for old browsers not supporting CSS
H1 {color: blue; font-family:"Helvetica"; font-style:italic; font-size:18pt;}
P {color: black; font-family:"times"; font-style:normal; font-size:12pt;}
-->
</STYLE>
</H1>
All text in the document surrounded with H1 or P tags would be formatted according to these rules. The author needs only change the styles to change all of the corresponding document text.
|
|
| <HEAD> <STYLE> .QuotePara { margin-left: 100pt; margin-right: 100pt: color: blue } </STYLE> |
Quite often a writer needs to be able to define their own combination of formatting and layout to apply at particular locations in their document. For example: a quoted paragraph, special lists, alternating table rows/columns, etc. Most word processors allow a user to do this by providing the capability for a user to define their own "named styles". The CSS specification also provides this functionality. To define a class style for an indented paragraph with blue text, one would first specify in the STYLE section a list of standard style definitions and properties. The list must be preceded by a period immediately followed by a space and the desired name of the class style, (.QuotePara) and surrounded by curly braces {}. See the example at the right.
In order to apply the class style to a particular paragraph, the HTML CLASS attribute is used with any HTML tag. For example to apply it to this particular paragraph, the P tag was specified: <P CLASS="QuotePara"> at the beginning of the paragraph.
|
|
| <HEAD> <STYLE> #QPara { margin-left: 100pt; margin-right: 100pt: color: blue } </STYLE> |
ID styles operate essentially in the same manner as class styles. They are specified using a pound sign character instead of a period. The previous .QuotePara class would be specified as an ID style as shown at the right. It is applied to a HTML tag using the ID attribute instead of the class attribute. In this paragraph it was specified as: <P ID=QPara>
One can specify styles for an entire Web site. By simply editing the global styles all pages in the site that uses the styles are altered. How to specify Web site styles is covered in the next section, "Web Style Sheets".
| © CS Dept Va Tech, 1997-2000. |
All rights reserved.
|