Module 8: CSS and Semantics for Sustainabilty

Purpose of This Module

In this module, you will create a .css file for your dev website. The goal is to better understand how to use structural and semantic elements in your design to create a style sheet and markup that is easy to maintain. To do this, you'll need to understand how to create container objects, label them, and style them.

Tools & Resources Needed for this Module

text editor, access to the internet, and lots of patience

Get Started

Start by reviewing this article from the W3C on the CSS Box Model. Don't try to memorize it all. But familiarize yourself with the options you have, as a designer, to set styles for boxes that act as containers for content on a web page.

Review your wireframes for your portfolio. Note where your page layouts include "boxes" that act as content containers. Make a list of these.

Write a Human-Readable Set of Style Rules for Your Container Objects

Using your list of container boxes, give each one a label. You'll likely have two categories of labels. One will be "structural," referring to the repeated page elements across your whole site. For example: body, header, footer. The other category will be "semantic," referring to the nature of the content contained in the box. These will be specific, in most cases, to the type of site and to the users of the site. On our 410 launch pad, for instance, I have two semantic boxes at the top of the page that contain the "Today in Class" and "Recent Course Materials" items.

Create Your Style Sheet

Have a look at the styles that are controlling this page. Here's the file. Notice that in addition to syle rules, there are comments to let humans see what is going on.

Make your own style sheet that sets styles for your dev area. Include some semantic containers that help you group what you are displaying. It might be useful, as you do this, to sketch out a wireframe with some boxes and imagine how they will appear on the page. Your style sheet should have:

  1. A header
  2. Navigation area
  3. A footer
  4. A main content area or body
  5. Semantic containers in the body
  6. Styles for other frequently used elements or structures (e.g. links, image thumbnails, etc.
Post it!

When you are done, save your page to your Dev space and post links to "Module 5" that points to the pages you made today.