Cascading Style Sheets

CSS is a very organized approach to formatting web pages.  When you look at the source code for many websites, what you often see is a confusing mixture of content and formatting instructions.  CSS separates the two, so that your content is in one place, and all the codes for things like coloring, sizing and positioning are somewhere else.  That somewhere else is either a special place in the HTML code for the page, or in a separate style sheet that is referenced by the page.  This modular approach makes it easier to edit content without being distracted by styling, or vice-versa.

In the box on the right, the code above the line defines a style for all the page titles on this site, and the code below the line applies it to the title of this particular page.  (By the way, I've enclosed all the tags in my example boxes, such as the p tag here, in square brackets rather than angle brackets so your browser won't mistake them for real tags in the code for this page.)

The "cascade" in Cascading Style Sheets is the hierarchy of formatting rules you can create.  You might decide that you want the text on your site to be mostly blue, but on a particular page you want green, and in a sidebar you want red.  You can assign a style to any area of content, large or small.  The rules are applied from the top down, so that the more general rules apply unless they are contradicted by a more specific rule. Notice that the style definitions in the box specify the size, color and weight  of a font, but don't say what font.  That's because the font for the website is already specified higher up in the cascade.  Here we only need to describe the properties that are going to be different than usual in page titles.

I have found CSS: The Missing Manual, by David Sawyer McFarland, to be a great introduction to cascading style sheets.  He explains things thoroughly and provides numerous examples, showing both pictures and coding for the web pages.

Getting started

The hardest part of creating a website may not be learning specific techniques like how to put a graphic on a page or design a navigation bar.  For many novices it may be how to proceed in an orderly fashion, so you don't have to perform the same task over and over or throw away things you've already done.  A little planning before you start putting content onto a page can save you a lot of time in the long run.

Perhaps the most valuable tool for streamlining your work is a dynamic web template.  Most sites include content that appears on every page; for this site, it's the logo, main menu and footer.  Putting that content on a dynamic template allows you to edit it without changing each page individually.  So my first step in creating this site was to create a page with only these common elements.  I saved the page as a dynamic web template (file type .dwt) and created every new page from the template (an option provided by Expression Web 2 each time you create a page).  You can create your home page, the one named "default" or "index", from your template too.  If you already have a page of that name, just replace it with the new one.

The body of every page in this site has three divisions: the masthead, the workspace, and the footer.  Only the workspace is normally editable; the other two divisions can only be edited by revising the template.  When I create a new page, I usually mark off further divisions within the workspace for different kinds of content.  This is done with div tags, just as you would mark off paragraphs with p tags.  Divisions are very convenient tags to associate with styles.  You can apply a style, for example, to format all the text within a division, no matter how many paragraphs it might contain. 

Design tips

My Site Design page contains more specific information about how I used styles for positioning, colors, text, graphics and navigation menus.