Adobe Dreamweaver CC 2014 v.13 - Manual (Page 166)

Understanding Cascading Style Sheets
To the top
To the top
About Cascading Style Sheets
About CSS rules
About cascading styles
About text formatting and CSS
About Shorthand CSS properties
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 presentation 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, h1 tags, p tags,
and div tags all produce block-level elements on a web 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.
About CSS rules
A CSS formatting rule consists of two parts—the selector and the declaration (or in most cases, a block of declarations). The selector is a term
(such as p, h1,a class name, or an id) that identifies the formatted element, and the declaration block defines what the style properties are. In the
following example, h1 is the selector, and everything that falls between the braces ({}) is the declaration block:
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
An individual declaration consists of two parts, the property (such as font-family) and value (such as Helvetica). In the previous CSS rule, a
particular style has been created for h1 tags: the text for all h1 tags linked to this style will be 16 pixels in size, Helvetica font, and bold.
The style (which comes from a rule, or a collection of rules) resides in a place separate from the actual text it’s formatting—usually in an external
style sheet, or in the head portion of an HTML document. Thus, one rule for h1 tags can apply to many tags at once (and in the case of external
style sheets, the rule can apply to many tags at once on many different pages). In this way, CSS provides extremely easy update capability. When
you update a CSS rule in one place, the formatting of all the elements that use the defined style are automatically updated to the new style.
159