• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 13. Using Style Sheets

Lesson 13. Using Style Sheets

Cascading Style Sheets (CSS) enable you to define how text is displayed on your Web pages. The term “cascading” refers to the ordered sequence of styles. A style is a group of formatting attributes, identified by a single name. Styles in HTML documents give you a great deal of control over text formatting. The advantage of using styles is that when you make a change to an attribute of the style, all of the text controlled by that style will be reformatted automatically. You can make adjustments on a wide variety of settings from standard HTML attributes such as font, size, color, and alignment to unique attributes such as the space between characters (tracking), the space between lines (leading), and additional size and font options.

In this project, you will use CSS to apply a variety of format options to text using the three types of styles provided in Dreamweaver: HTML tag styles, custom styles, and CSS selector styles.

Using style sheets, you can, for example, create a paragraph with a half-inch margin, 20 points between the lines, and the text displayed in a 12-point blue Verdana font. This would not be possible without the use of CSS, which is mainly supported by 4.0 or later browsers. Most earlier browsers ignore CSS, although Internet Explorer 3.0 recognizes some style attributes.

You can use an internal style—one that is stored inside the document—when you need to format a single page, or you can use an external style sheet—one that is stored outside of the document and linked to the current page—when you need to control several documents at once in order to keep the same style of text formatting on multiple pages. It is ideal to keep the treatment of text consistent throughout your site because drastic changes in appearance may give viewers the impression they have landed on another site.

To see examples of the finished pages for this lesson, open keepers.html and life.html from the Lesson_13_CSS/Completed folder.


In this lesson, you will:

  • Create an external style sheet

  • Add styles to an existing style sheet

  • Edit a style

  • Create a custom style

  • Link to an external style sheet

  • Create an internal style

  • Convert internal styles to external styles

  • Convert CSS to HTML


This lesson should take about two hours to complete.


Starting Files:



Completed Project:






Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint