|
CSS Introduction
Cascading Style Sheets (or CSS styles) are collections of formatting definitions that affect the appearance of web page elements. You can use CSS styles to format text, images, headings, tables, and so forth. With a single style you can pre-designate the color and alignment properties of an element for an entire document. For example, you could apply a style that turns all text to blue and right-aligned.
Workflow benefits
Using CSS Styles will save time. For example, let's say that you assigned a style to all paragraph text to make it italic. Later, you decide that italicized text isn't legible in the body. Simply remove the italics setting from the CSS style, and, presto, you've reformatted all of the text.
Kinds of CSS Styles
When you create a style in Dreamweaver, you choose from the following three options:
Custom Style (class)
Creates a style that can be applied as a CLASS attribute to web page elements, including ranges or blocks of text. There are many situations where you would choose custom for your style. For example, if you want to make some of the text on your web page yellow and bold—but not all the text—then you would want to create a custom style. The name that you give this custom style appears in the CSS Styles panel.
HTML Tag
Redefines the default formatting of specific HTML tags. If you want all your text in an h1 (Heading1) tag to be purple, you can specifically modify the h1 tag. Subsequently, all text surrounded by the h1 tag will be purple.
Note: This kind of style will not appear in the CSS Styles panel (although it will appear in the Edit Styles dialog box in case you want to designate a different color).
CSS Selector
Allows you to use a customized declaration for your style. For example, you could define a style which affects a tag within another. This third kind of CSS style is meant mainly for advanced users, who know how to write a style declaration. For more information, see Eric A. Meyer's Cascading Style Sheets: The Definitive Guide (O'Reilly & Associates, 2000).
Note: To eliminate the underline in linked text, use this kind of style.
Document-level and external Style Sheets
A CSS style can be document-level (located within the HTML) or it can be external (located in a separate document known as the external style sheet).
Updating styles on an external style sheet
Using an external style sheet makes it possible to automatically update all the style-affected elements in your web site by changing only the style sheet. This can be a significant time-saver for making formatting changes in a web site with many pages.
|
