Module 3: Intro to Cascading Style Sheets

Purpose of This Module

The purpose of this module is to introduce you to CSS by asking you to create a small CSS file to associate with the XHTML file that you created for module 2.

Tools & Resources Needed for this Module

Before you proceed, spend some time reading CSS Basics. Review the early chapters (they are short) and note the three parts that form the basis of CSS: selectors, properties, and values. Also, you will be applying your CSS to the page you made for module 2, so you will need that available as well.

Write & Apply Styles to an Existing .html file

Using the XHTML file that you prepared for module 2 as a template, prepare your page.

  1. Take a look at the available selectors in your page, which are likely body, heading 1, paragraph, and so on (see the CSS we start you with below).
  2. Think about the properties and values that you would like to add. Look at pages 113-115 of Stolley for a refresher.
  3. Start your CSS file. Using your text editor, create a file called "mod3.css" and save it in your web folder on your jump drive.
  4. Place this code in the HEAD of the your html page:
  5. 4. Build your CSS page. Start with this:

NOTE: The "a" above refers to links, "p" paragraph, "li" list items, and so on. Consider this a chance to experiment. You will not lose points for attempting something that doesn't work, and you won't be assessed on the aesthetics of your design (that is, I won't penalize you if I think your designs are ugly). Save, FTP, & View on the Web!

FTP to your MSU dev space the latest version of your webpage (from module 2) and the CSS you created for this module. When you are done, make a link to the work you completed for module 3.