The University of Arizona

Videos created using Camtasia illustrating various topics dealing with creating style sheet rules. Filmed using Dreawmeaver 8, these videos would relate also to people using Dreamweaver CS3 and Dreamweaver MX 2004. The length of the video is in minutes and seconds.

  • What Are Style Sheets for the Web?, length 5:58
    An overview of why style sheet rules were created by the World Wide Web Consortium, that sets web standards, and reasons you should use style sheet rules in your documents. It also shows examples from the CSS Zen Garden website, to illustrate separating content from formatting.
  • Four Broad Types of Style Sheet Rules, length 2:50
    Briefly discusses the four types of style sheet selectors or rules (tag selectors, class selectors, ID selectors and descendant selectors).
  • Text Properties using the Properties Panel, length 7:22
    Illustrates how a style rule is created when text traits are applied to selected text, and how to repeat effects elsewhere on the page and delete effects.
  • Positioning Graphics with the Float Property, length 5:03
    A special style sheet rule is the float property that lets you put text next to an image. This demonstrates floating a graphic to the left of a page.
  • Examples of Editing Style Sheet Rules, length 16:51
    Illustrates simple changes to existing style sheet rules, like changing the default names given rules (or selectors) by the Properties panel, and adding new rules using the Dreamweaver style editor.
  • Moving Internal Rules to an External Style Sheet, length 9:37
    It is better for consistency on a site to use an external style sheet that is referenced by all the documents on your site. This video shows how to take an internal style sheet, export it, and link to the external style sheet.
  • Constraining Display with a Body Width Rule, length 8:36
    If you don't limit the width of a page's display with tables and pixels, you can use the width property for the body tag to limit the display. However, other coding has to be added if you want the display to be centered horizontally but have the text at the left margin of the contained area.
  • Creating a 2-Column Layout using CSS, length 16:48
    In this video four ID selectors are created and applied to existing text, to have a header, a two column layout, and a footer.
  • Creating a 3-Column Layout using CSS, length 9:59
    The two column layout is modified with a third column on the right. This video also discusses why it is important to have a clear: both property to close out a part of a page, especially after a header or before a footer.
  • Example of Descendant Selectors, length 9:09
    Perhaps the most common example of a descendant selector is different types of links in different parts of the page. This video shows creating links for a navigation area that are different from the links in the main content area.
  • Using Bulleted Lists for Links, length 9:32
    It is useful to have a list of links as a bulleted list, but to turn off the "normal" appearance of the bullets, you need to create additional descendant selectors, so other bulleted lists are not affected on the page.
  • A Simple Print Style Sheet Example, length 16:28
    This video illustrates creating a print style sheet from a screen style sheet.
  • Creating a Screen and Print Style Sheet in Dreawmeaver, length: 17:21
    Another example of adapting a screen style sheet for print. In this example the Search and Replace feature in Dreamweaver is shown to help replace code in a style sheet.
  • Using ID Selectors on a Blank Page, length 10:32
    Shows inserting ID selectors on a blank page, if you don't have content already. Sometimes the placement has to be adjusted.
  • Validating Your CSS Rules, length 6:59
    The World Wide Web Consortium that sets standards for the web has a site that lets you test your style sheet, to look for errors.
Some older materials dealing with CSS. These videos were filmed using Dreamweaver MX 2004, but the basic principles would be the same with more current releases.