Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of content on a web page. When you use CSS to format a page, you separate content from presentation. The content of your page--the HTML code--resides in the HTML file itself, while the CSS rules that define 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). With CSS you have flexibility and control over the exact appearance of your page, from precise positioning of layout to specific fonts and styles.
CSS lets you control many properties that cannot be controlled with HTML alone. For example, you can specify different font sizes and units (pixels, points, and so on) for selected text. By using CSS to set font sizes in pixels, you can also ensure a more consistent treatment of your page layout and appearance in multiple browsers.
A CSS formatting rule consists of two parts--the selector and the declaration. The selector is a term (such as P
, H1
,
a class name, or an id) that identifies the formatted element, and the declaration defines what the style elements are. In the following example, H1
is the selector, and everything that falls between the braces ({}
) is the declaration:
H1 {font-size: 16 pixels;
font-family: Helvetica;
font-weight: bold;
}
The declaration consists of two parts, the property (such as font-family
), and the value (such as Helvetica
). The preceding example creates a style for H1
tags: The text for all H1
tags linked to this style is 16 pixels in size, and uses Helvetica font and bold.
The term cascading refers to your ability to apply multiple styles to the same element or web page. For example, you can create one CSS rule to apply color and another rule to apply margins, and apply them both to the same text on a page. The defined styles "cascade" to the elements on your web page, ultimately creating the design you want.
A major advantage of CSS is that it can be updated easily; when you update a CSS rule in one place, the formatting of all of the documents that use the defined style are automatically updated to the new style.
You can define the following types of rules in Dreamweaver:
color
property of the rule to red, and apply the style to a portion of already-styled paragraph text.p
or h1
. When you create or change a CSS rule for the h1
tag, all text formatted with the h1
tag is immediately updated.td h2
applies whenever an h2
header appears inside a table cell.) Advanced styles can also redefine the formatting for tags that contain a specific id
attribute (for example, the styles defined by #myStyle
apply to all tags that contain the attribute-value pair id="myStyle"
).For more information, see About text formatting in Dreamweaver in Using Dreamweaver.