Personal tools
  •  

DWMX Cascading Style Sheets

Document Actions
  • Content View
  • Bookmarks
  • CourseFeed

Cascading Style Sheets allow for many layout and formatting options that cannot be achieved with plain HTML. Similar to styles in a word processing program, they can be added to text and other elements of a web page to achieve a desired look. The style definitions can be used directly on a web page, or even better, they can be defined in a separate file (e.g."style.css") and linked to from each web page that needs those styles applied. Consequently, using a linked style sheet makes updating the look and feel of a page quite easy, since all you need to do is modify one file (the linked .CSS file) and all the files that link to it automatically apply the new style.

This tutorial is fairly technical, so prior knowledge of CSS is very helpful. The following two activities will explain in more detail what cascading style sheets are, how they work, and how to use them in Dreamweaver.

Supplemental Readings:

If you need more information than these activity/tutorials cover, refer to the Dreamweaver manual (the book or in the Help menu within Dreamweaver) or search the Internet for "Dreamweaver Tutorial." Below are 2 excellent resources to help get you started:
  1. http://www.w3schools.com/css/ (entire chapter)
  2. http://www.macromedia.com/support/dreamweaver/layout/css (9 Pages - CSS, what and how)

 

Activity One: In this activity you will learn to apply different style sheets/CSS files (called basic.css , and movie_review.css respectively) to format the presentation of the HTML document called CSS_movie_review_b4.html

Create a style sheet for your entire site.

  1. download the entire source files (only 3kb zip file) here .
  2. unzip all the files into your computer's local drive
  3. Open the html files CSS_movie_review_b4.html & CSS_movie_review_after.html and notice the difference in formatting.
  4. while keeping the CSS_movie_review_ after .html file open, locate the CSS Styles tab (Design panel), select the CSS file, and delete it. ( note: you only removed the link to the CSS, did not actually delete the CSS file )
  5. notice that the page loses all its 'cosmetic surgery'. Just plain black and white text left.
  6. now link the same page to the other CSS file called basic.css . Notice that the page changes formatting once again.
  7. play around with the CSS files to modify the CSS properties.

back to top

 

Activity Two: In this activity you will create (from scratch!) a style sheet file (called dwstyle.css) that your HTML documents will use to format the presentation of the document in the browser

Create a style sheet for your entire site.

  1. Open your index.htm page.
  2. On the CSS Styles tab (Design panel), click the New CSS Style icon at the bottom of the palette (the one with the plus sign).
  3. Set the "Type:" to "Make Custom Style (class)"
  4. In the text box type the word "mainbodytext" (or any other descriptive name you choose).
  5. If this is your first style sheet, make sure that "Define in:" is set to "New Style Sheet File."
  6. Click OK. Save it in your dreamweaver folder as dwstyle.css .
  7. In the dialog box that follows, choose a font type, such as Verdana, Arial, Helvetica, sans-serif , a font size, such as 10 Point , and a color. Click OK.
  8. To apply a style class to a particular part of your page:
    1. In your index.htm file click in a sentence or paragraph that is not a heading. (Or select a tag from the Quick Tag Selector at the bottom of the document window)
    2. Now click on the "mainbodytext" style that is listed in the CSS styles palette.
    3. The style should now be applied to the portion of text you had selected. Take a look at the source code to see how the style was applied. You can apply a style to any HTML tag, including p, td, ol, ul, etc.
  9. Continue to experiment with applying the style to different selections until you have a feel for how a style is applied.
  10. Upload dwstyle.css and index.htm to the server and view them in the web browser.
  11. When you are comfortable with it, create new styles (in the same dwstyle.css file) for a Heading, a Subheading, and one other style of your choosing.
  12. Apply the four styles to your other pages by opening each page and clicking the "Attach Style Sheet" button at the bottom of the CSS Styles tab, and apply the individual styles to the appropriate portions of each page.
  13. Upload your dwstyle.css and other modified files to the server and view your site in your browser.

back to top

Copyright 2008, by the Contributing Authors. Cite/attribute Resource . admin. (2008, May 20). DWMX Cascading Style Sheets. Retrieved January 07, 2011, from Free Online Course Materials — USU OpenCourseWare Web site: http://ocw.usu.edu/instructional-technology-learning-sciences/producing-distance-education-resources/resource128.html. This work is licensed under a Creative Commons License Creative Commons License
Online Degree Program
Utah State University offers an online masters degree program (MS & MEd) in Instructional Technology and Learning Sciences. Click below to find out more.