Hands On Dreamweaver CSS Styles Styles for Appearance When by callmemelo


									Hands-On: Dreamweaver CS3 CSS Styles

Styles for Appearance: When you want to apply the same type of formatting to page
elements such as text, objects, and tables you can save a significant amount of time by
using Cascading Style Sheets. Styles are usually applied to such items as the font used
for your page text, these items might include the font face, the font size, the font weight,
and perhaps the font color. Included with these attributes might be the amount of line
spacing between lines of text, line-height, and perhaps the letter-spacing used between
the letters of the words. Any or all of these elements could be chosen by you to set the
look and feel of your Web site text.
CSS style sheets are saved as individual files with the .css extension and stored in the
directory structure of a Web site. This turns the styles into external sheets that can be
attached to every page in your Web site to keep the look consistent. The really special
part about all of this coding activity is the editing after the fact. Sure, it takes a few
minutes of your time to set it all up, but future edits will be applied automatically to all
the pages linked to your style sheet, and that is a major time saver.
There are several ways to work in Cascading Style Sheets, and the exercises that
follow give you an opportunity to try some out for your self. Ultimately, you will pick the
way you work with styles by ease factor. For instance, you could use the buttons on the
CSS Style panel to create, edit, and apply styles. To add a style, you use the New CSS
Style dialog box to name the style and specify whether to add it to a new or existing
style sheet. Once you add a new style to a style sheet, it appears in a list in the CSS
Styles panel. To apply a style, you select the text to which you want to apply the style,
and then choose a style from the Style list in the Property Inspector.
Style Sheet Language: If you open a style sheet file, you will see the code for the CSS
styles. A CSS style consists of two parts: the selector and the declaration. The
selector is the name or the tag to which the style declarations have been assigned. The
declaration consists of the property and the value.
If you were to inspect the coding for a paragraph style, you might find something that
looks like this in the style sheet; notice the properties and then values used:
P {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
        font-weight: normal;
        color: #000000;
        line-height: 1.75em;
One declaration property of the selector P (paragraph) is font-family, and its value would
be the font names. And as you can see from the above example, three choices were
given for the font names, one for Windows, one for Macintosh, and one generic type. In
this format, the visitor’s computer will choose the font it recognizes first. With the size I
chose a relative measurement of the width of the upper-case letter ‘M’. By using EMs, I
have allowed accessibility for those who need to increase the font-size of their browser
window. The color was listed in hexadecimal fashion. All of these features and more will
be discussed during this section of the course.

Professor Al Fichera                    Page 1                  dreamweaverCSSstyles.doc

To top