Adding and Formatting Text - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 144

Examining Code for Internal CSS Styles
As you created and applied CSS styles to format the text in the home page, Dreamweaver
added the appropriate HTML code within the head of each page. The head of a Web page
is the portion of the HTML between the head tags. The actual code included within the
head differs, based on whether you created an internal style sheet or an external style sheet.
When you create styles that apply only to the document in which you are working, the
code for those styles is placed in the head of that page. If you attach an external style sheet
to a Web page, a link tag to the style sheet is placed in the head of the HTML code for that
page. The link tag allows the Web page to access the content of the external style sheet.
You will examine the HTML and CSS code in the head of the home page as well as
the additional tags that appear throughout the page.
Viewing Code for Internal Style Sheets
When styles are defi ned in the current document only, the code is stored in an internal
style sheet, which is also called an embedded style sheet because the styles are embed-
ded (or placed) in the head of the Web page. The embedded styles can be used through-
out the current Web page but not in any other page. The code usually takes the format:
<styleƒtype=”text/css”>
<!--
nameƒ{
ƒƒƒattribute-name:ƒattributeƒvalue;
ƒƒƒattribute2-name:ƒattribute2ƒvalue;
}
-->
</style>
where name is the selector name, the HTML tag name, or the tag and pseudoclass name.
The style defi nitions (or rules) all appear inside the style tags, which are in the format:
<styleƒtype=”text/css”> styleƒdefi nitions </style>
where type=“text/css” indicates the format of the styles that will follow. At this time,
“text/css” is the only style type; however, the current HTML guidelines recommend that
you include the style type to prevent problems if other style types are introduced in
the future.
Nested within the style tag is the comment tag, which is in the following format:
<!-- ƒstyleƒdefi nitionsƒ -->
Comment tags hide the style defi nitions from older browsers that do not support CSS
styles. Browsers tend to ignore tags that they do not understand. Browsers that do not
understand CSS style tags will ignore the tags, but the content of the style tag (the style
defi nitions) will be displayed in the Web page as text. To avoid this problem and prevent
older browsers from displaying the style defi nitions in the Web page, comment tags are
placed around the defi nitions.
Remember, every CSS style (or rule) consists of two parts: the selector and the declara-
tion. The selector is the style name and the declaration defi nes the attributes included in
the style. The format for the style defi nition is:
nameƒ{
ƒƒƒattribute-name:ƒattributeƒvalue;
ƒƒƒattribute2-name:ƒattribute2ƒvalue;
}
In Dreamweaver, the selector and opening bracket are located on the fi rst line of code
for the style and are displayed in pink. You can tell by the selector whether the style is a
custom class or ID style, a redefi ned tag, or a compound style tag. The class style name
is preceded by a period (for example, .sub2). The ID style name is preceded by #. The