Understanding Cascading Style Sheets - Adobe 38040334 - Dreamweaver CS3 User Manual

120
Chapter 6: Creating pages with CSS
Adobe® Dreamweaver® CS3 includes many features that help you use Cascading Style Sheets (CSS) to create styles
and layouts for your web pages.

Understanding Cascading Style Sheets

About Cascading Style Sheets
Cascading Style Sheets (CSS) is a collection of formatting rules that control the appearance of content in a web page.
Using CSS styles to format a page separates content from presentation. The content of your page—the HTML code—
resides in the HTML file, and the CSS rules defining the presentation of the code reside in another file (an external
style sheet) or in another part of the HTML document (usually the head section). Separating content from presen-
tation makes it much easier to maintain the appearance of your site from a central location because you don't need
to update every property on every page whenever you want to make a change. Separating content from presentation
also results in simpler and cleaner HTML code, which provides shorter browser loading times, and simplifies
navigation for people with accessibility issues (for example, those using screen readers).
CSS gives you great flexibility and control over the exact appearance of your page. With CSS you can control many
text properties including specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and
background color; link color and link underlining; and much more. By using CSS to control your fonts, you can also
ensure a more consistent treatment of your page layout and appearance in multiple browsers.
In addition to text formatting, you can use CSS to control the format and positioning of block-level elements in a
web page. A block-level element is a standalone piece of content, usually separated by a new line in the HTML, and
visually formatted as a block. For example, tags, tags, and tags all produce block-level elements on a web
h1 p div
page. You can set margins and borders for block-level elements, position them in a specific location, add background
color to them, float text around them, and so on. Manipulating block-level elements is in essence the way you lay out
pages with CSS.
For a tutorial on understanding Cascading Style Sheets, see www.adobe.com/go/vid0152.
See also
"Working with div tags" on page 162
"Laying out pages with CSS" on page 145
About CSS rules
A CSS formatting rule consists of two parts—the selector and the declaration (or in most cases, a block of declara-
tions). The selector is a term (such as , ,a class name, or an id) that identifies the formatted element, and the decla-
p h1
ration block defines what the style properties are. In the following example, is the selector, and everything that
h1
falls between the braces ( ) is the declaration block:
{}
September 4, 2007