Accessibility

Table of Contents

  1. Introduction
  2. Locate your files and review your task
  3. Learn about CSS
  4. Create a new style sheet
  5. Attach a style sheet
  6. Explore the CSS Styles panel
  7. Create a new CSS rule
  8. Apply a class style to text
  9. Format the navigation bar text
  10. (Optional) Center the contents of the page

Creating your first website – Part 4: Formatting your page with CSS

Learn about CSS

Cascading style sheets (CSS) is a collection of formatting rules that control the appearance of content on a web page. Using CSS 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.

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), as shown in the following graphic:

CSS Styles

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.

You can define the following types of styles in Dreamweaver:

  • Class styles let you apply style properties to any element or elements on the page.
  • HTML tag styles redefine the formatting for a particular tag, such as h1. When you create or change a CSS style for the h1 tag, all text formatted with the h1 tag is immediately updated.
  • Advanced styles redefine the formatting for a particular combination of elements, or for other selector forms as allowed by CSS (for example, the selector 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").

CSS rules can reside in the following locations:

  • External style sheets are collections of CSS rules stored in a separate, external .css file (not an HTML file). The .css file is linked to one or more pages in a website by using a link in the head section of a document
  • Internal (or embedded) style sheets are collections of CSS rules that are included in a style tag in the head portion of an HTML document. The following example defines the font size for all text in the document formatted with the paragraph tag:
<head>
<style>     
    p{
    font-size: 9px;
    }  
</style> 
</head> 
  • Inline styles are defined within specific instances of tags throughout an HTML document. For example, <p style="font-size: 9px"> defines the font size for only the paragraph formatted with the tag that contains the inline style. (Using Inline styles is not recommended.)

Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS style guidelines. Dreamweaver also renders most applied styles directly in Design view. (Previewing the document in a browser window, however, gives you the most accurate "live" rendering of the page.) Some CSS styles are rendered differently in Microsoft Internet Explorer, Netscape, Opera, Apple Safari, or other browsers, and some are not currently supported by any browser.

TIP: To display the O'Reilly CSS reference guide included with Dreamweaver, select Help > Reference and select O'Reilly CSS Reference from the pop-up menu in the Reference panel.

For more information about CSS and how to use them in Dreamweaver, see Creating pages with CSS in Dreamweaver Help.

Page 3 of 10
Previous Page
Next Page