Understanding Styles | Macromedia Dreamweaver 8: Training from the Source

At this point, you've used a number of CSS styles in this lesson's previous exercises. At the beginning of this lesson you began to format text with font face, size, and color attributes using the Property inspector while Dreamweaver creates the corresponding CSS styles. You've seen how each time you create a new combination of attributes in a page, Dreamweaver creates a new style, which is then listed in the Style menu on the Property inspector. By now, you have also worked with a variety of Page Properties including background color and colors for the different states of links in Lesson 3 and default font settings in the beginning of this lesson; all these attributes are controlled by CSS styles in Dreamweaver.

In this exercise, you'll learn more about what a style sheet is and how it works.

In the index.html document, click the Split button on the upper-left portion of the document toolbar.

You now see a split view in the Document window that shows both the Design view that you've been working with thus far in the lessons, and the corresponding code. You'll work more with this view in Lesson 16. By default, the Code view is shown in the top portion of the Document window, and the Design view is shown in the lower portion.

Note

You can adjust the size of these views by placing the cursor over the bar that separates these two views. The pointer will turn into a double arrow, and you can click and drag the bar as needed.

Scroll upward in the Code view until you see the following:

    <style type="text/css">    <!    a:link {      color: #FF3300;    }

This code marks the beginning of a style sheet that contains all the information for the styles used in this page. It is known as an internal style sheet because it is embedded into the document. All styles that have been created in previous lessons using the Property inspector and the Page Properties dialog box have been internal styles. Dreamweaver 8 automatically creates those styles whenever you define text formatting or page properties.

CSS styles and style sheet attachments are placed between the <head> and </head> tags of the document.

In CSS, a style sheet is a group of styles. A style (often referred to as a rule) is a set of properties that defines and controls the appearance of an element. In the code for index.html, the style sheet is everything contained between <style type="text/css"> (which defines the style sheet) and </style> (which ends the style sheet). The code a:link { color: #FF3300; } represents a single style (or rule). Further down in the style sheet you'll see the following code, which was created when you set the background color of the page:

    body{      background-color: #FFFFCC;    }

Rules are composed of selectors and declarations. A selector is the element that is being defined. A declaration is the combination of properties and their values. The properties are the attributes of the element that control the appearance, and the value is the quantity or format that is specified. The structure of a style is selector {property: value}, and property: value is the declaration.

For example, in the following style, the element being defined is the selector "body":

    body { background-color: #FFFFCC }

The declaration { background-color: #FFFFCC } is the combination of properties and values. The attribute of the background element that is being specified is the property of "background-color." The value that defines the color is #FFCCCC.