Learn this great Web site authoring tool with our Dreamweaver tutorials. Learn everything from creating a new Web site, to mouseovers, stylesheets, and more
Web design tips and tutorials for beginners: Home pageWeb design tips and tutorials for beginners: Design techniquesWeb design tips and tutorials for beginners: Dreamweaver tutorialsWeb design tips and tutorials for beginners: Fireworks tutorialsWeb design tips and tutorials for beginners: Photoshop Elements tutorialsWeb design tips and tutorials for beginners: AdSense tutorials

Home > Dreamweaver > Style sheets

Style sheets

Linking your Web pages to a style sheet is a great way to reduce maintenance on your Web site. By linking each page to the same style sheet, you can easily change formatting across your site. For example, think how much time you'll save if you decide to change your paragraph text from Arial to Verdana. Using a style sheet, you'll make the change one time- instead of changing it on every single page of your site!

Using style sheets in Dreamweaver

This tutorial will provide the basics of using style sheets in Dreamweaver. While there are a wealth of complete books that cover all the details of using CSS, this tutorial will get you started on the right track.

Attaching a style sheet

Start by creating a new page- or if you have a page you're building, open that instead. Now we're going to redefine a few html tags. When we do so, we'll also create a new style sheet (and attach it to our page).



  • Use the format option of the Properties toolbar to add H1, and H2 headers to your page. Also add some paragraph text as well. Don't change the font, font size or color from the defaults. Your text will look something like the sample on the right.
  • In the Design panel, select the CSS Styles table and click the Edit Styles button. Finally, click the New CSS Style button at the bottom of the Design panel.

    Defining new CSS styles is easy with Dreamweaver's Design panel
  • On the New CSS Style window select the options as shown below, then click OK.
    Redefining html tags is a quick and easy way to allow flexible formatting of your Web site using cascading style sheets
  • The next window will ask you for a name for your style sheet. Give it a name that will make sense to you later, then click OK.
  • In the CSS Style Definition window under the Type category, we're going to define our H1 as 16pt. Arial Black font with a color blue (see example below), H2 as 14 pt. Arial light blue, and paragraphs as 10 pt. Verdana in dark gray. (These are font groups we defined previously. For more on this, see our tutorial on defining alternate fonts.)

 

 

No CSS Styles:

Edited text with no styles defined

With CSS styles:

The same text after styles are defined using an external style sheet

 
 
The Dreamweaver style definition screen provides control over all formatting in your Web pages
  • The end result looks like the example at the right above.
  

 
 
      
 

Home | Design | Dreamweaver | Fireworks | Photoshop | AdSense
   
 

©2006 Wilk Web Works
All rights reserved.