An overview of Cascading Style Sheets
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. |
