Paul Kurucz's Visual Tutorials

A Visual Tutorial for Creating Cascading Style Sheets in Macromedia Dreamweaver

What do cascading style sheets do? They "force" a web page to have a defined set of styles (font, font color, background color, etc.) as stated in the style sheet. They override the default settings of a web page. By creating a style sheet and attaching it to all the pages in your site, you create a uniform "look and feel" for your site. This immediately makes it easier for users to move from page to page through your web site and increases your site's image of being "professional" looking. One caveat: Any font changes, color changes etc. that are applied to a page manually can overrule a CSS.

Dreamweaver is a great software package for creating web sites. However, creating Cascading Style Sheets (CSS) in Dreamweaver is not the easiest thing to do. Here is a screenshot-by-screenshot walk-through of how to create a CSS in Dreamweaver that you can attach to all the pages in your web site to set a uniform look and feel.

Dreamweaver MX was used for this tutorial, but earlier version of Dreamweaver work pretty much the same. Note that some improvements have been made to CSS implementations in Dreamweaver MX 2004, which are not reflected in this tutorial.

Creating a Cascading Style Sheet:

Dreamweaver MX tutorial - CSS, cascading style sheets - first image



Dreamweaver MX tutorial - CSS, cascading style sheets - second screenshot

Dreamweaver MX tutorial - CSS, cascading style sheets - third annotated screenshot



DW MX visual screenshort tutorial - fourth screenshot

Dreamweaver MX tutorial - CSS - Cascading style sheets - #5

CSS - DW MX tutorial - screenshot number 6


Visual tutorial - CSS in Dreamweaver MX - 7



Eight screenshot - DW MX Cascading Style Sheets tutorial



Cascading Style sheet tutorial - Dreamweaver MX tutorial



10th screenshot, CSS tutorial, DW MX


Did you find this tutorial useful? Do you have any suggestions for improvement or other visual tutorials you would like? Please e-mail me: .

Tutorials | Home

This tutorial © 2003-2005 by Paul Kurucz. Created with Dreamweaver MX and Snag-it, a neat little screenshot capture and annotation software package.