Operation Manual

116
Last updated 3/28/2012
Chapter 6: Creating pages with 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.
More Help topics
“Working with div tags” on page 150
“Laying out pages with CSS” on page 144
Understanding CSS tutorial
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.