Adobe Dreamweaver CC 2015 - Manual (Page 193)

186
Last updated 6/3/2015
Chapter 6: CSS
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 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.