Secion Three: Introduction to CSS

In a CSS, we use what's called selectors to give elements, divisions, and classes (though we won't work with classes until our next CSS session) in our XHTML document. That's the tech speak for we're going to tell things what they should look like and where they should be. Or, refering back to my introduction, last session focused on creating content, this session focuses on creating form to apply to that content. The power of CSS is that we can make one form file to apply to an infinite number of content pages. Make sure you save your CSS file in the same folder as your XHTML files. Today we will:

  1. Insert some divisions into our XHTML document
  2. Learn to attach a CSS page to an XHTML page
  3. Begin to control the design of our document by designing typography, alignment, palette, etc. for our page

What is CSS?

CSS stands for Cascading Style Sheet; to be honest, it takes more work to describe the "cascading" dynamic of these pages than its worth--so rather than attempting such a description up front, I will demonstrate how the cascade works throughout today's demonstration.Looking at our XHTML document, these are the elements and divisions we are already using:

We will control several aspects of the appearance of each element (and some additional elements) through our CSS.

Adding a division to our CSS

Our first concern today will be adding a container division to our XHTML document. This container division will "tag" all the content on our page; thus it will open immediately after the body tag and close immediately before the body tag closes.

  1. Open your XHTML file in Dreamweaver. Go to the very beginning of the body tag and insert the highlighted code:

    <body>
    <div id="container">
    <h1>Marc C. Santos / Curriculum Vitae</h1>

  2. Now go to the end of your XHTML document, right before the close body tag, and type the following code:

    </div>
    </body>

    Now all the information in our body is collected in a single division called "container." If you are using Dreamweaver, and look your page in the WYSIWYG editor (the design tab), you'll see a dotted line around the contents of your web page. If you look on a web browser, then you won't see a single change (well, we haven't attached the style sheet yet--but even if it was attached you wouldn't see a change... yet...).

Creating a Cascading Style Sheet

Here I will once again include instructions for those using Dreamweaver.

If you are not using Dreamweaver,
then simply open a new text file, type /*Professional Web Cascading Style Sheet*/ and save the file as "professional_style01.css." Seriously, its that easy.
If you are using Dreamweaver,
go to "File > New" In the dialkeep the first column on "Basic Page" and select CSS in the second column. Now push the create button. Poof. Save the page as professional_style01.css. You'll quickly notice that there is no "design view" for CSS--you're looking at an almost blank page of code (save for the gray text at the very top). That's because CSS doesn't look like anything on a screen, rather it tells other things what to look like on a screen... "Unforntunately no one can be told what the Matrix is..." Thinking back to my introduction, CSS is purely <head> information--left alone it does not "look" like anything other than code.

Attaching our CSS to our XHTML

I know this is a lot of work, and that this is supposed to be the fun stuff, but we have a little bit more "boring" before we can start playing; specifically we need to attach (or create a link between) our CSS file and our XHTML file.

If you are using Dreamweaver,
then this will be extremely easy. I think Dreamweaver's ability to attach a style sheet justifies its price tag (as a student at a research university, I was able to purchase the Macromedia Suite for 100$). In Dreamweaver, make sure you have selected your XHTML document. Also, make sure your "CSS" Window is visible (either by pressing F4, selecting "Window > CSS Styles," or pressing "Shift + F11." Now we need to attach the style sheet. Switch back to your XHTML document. Look on the margin of your screen and you should see ">CSS," click on this to expand the menu. At the bottom of the box, you should see a two chain links, push this to open a standard dialogue box. Press the browse button, choose your file, select "media > screen," and attach the file. Once it is attached, you can close the XHTML file—for the next 30 minutes, we’ll be working with only CSS (finally).
If you are not using Dreamweaver,
Then let me suggest you go out and acquire it for two reasons: first, it is very easy to attach CSS sheets. Second, it color codes XHMTL and CSS code for you--making it much (read: exponentially) easier with which to work. O.k., a third reason, Dreamweaver provides very helpful selector and design tools (such as a color wheel) while coding CSS. Its a beautiful CSS machine. But, if Dreamweaver is outside of your price range, then you can still work with CSS. To attach a style sheet, type the following line into the head of your XHTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Marc C. Santos / Curriculum Vitae</title>
<link href="style01.css" rel="stylesheet" type="text/css" />
</head>

Now save the document, we should be ready to write our first CSS attribute and test it in our browser. You should be able to close your XHTML file now, we shouldn't be needing it for awhile.

CSS: The basics

We’re finally ready to get designing. Before we being, make sure your screen is set up as it was last session--you're going to want to easily switch back and forth bewtween your CSS file and your XHTML file in a web browser. Once you've got that set up, we're ready to write our first line of CSS.

Creating a Font Family

  1. In your CSS file, type:

    body {
    font-family:

    If your are using Dreamweaver, then an incredibly handy a dialogue box should appear after you type the colon. That box will give you the option of "edit font list"; we'll use this to create a font-family. Select this option, and then arrow fonts over to the "chosen" area. If you are not using Dreamweaver, then you will have to input this list by hand.
  2. The order of the font list is important! This is our first instance of how a cascading style sheet actually cascades. When a web browser loads your page, it will select a font from your list in order, left to right. Meaning: that browser doesn't recognize the first font, then it will move to the next font in the list. It will continue moving until it recognizes a font. Remember that this is a cascading style sheet, so a web browser will move down your list, registering the first font it recognizes. There is no master list of recognizable fonts--but the standard (in no particular order) include: Times New Roman, Verdana, Helvetica, Georgia, Arial, serif, and sans-serif. Anyone familiar with typography will recognize these final two as the two base categories of type face, any font-family should end with one of these two. If you are using a standard font, then you don't need to put quotations around the name.
  3. I’m going to select these fonts in this order:

    "Gill Sans MT", "Gill Sans", Arial, sans-serif

    Once you have your font list, delete your colon, re-type the colon, highlight your new list, and press "tab." Now put a semi-colon at the end of your list and close your squiggly bracket, so that it looks like this:

    body {
    font-family: "Gill Sans MT", "gill sans", Arial, sans-serif;
    }

    Hit file, save, and refresh your browser. Poof! New fonts.

Font Size and Word Spacing

Here’s a few more selectors to play with.

  1. Go inside the curly bracket and type:

    body {
    font-family: "gill sans", Arial, sans-serif;
    font-size: 16px;
    word-spacing: 3px;
    }

    Font-size is measured a few different ways; for this tutorial I am going to stick to pixels. We want our resume to have an inviting feel to it, and for it to be easy to read. So, putting some additional space between words will free it up a bit.

Background Color

Now let’s give the document a background color.

  1. We're going to add some code to our body tag:

    body {
    font-family: "gill sans", Arial, sans-serif;
    font-size: 16px;
    word-spacing: 3px;
    background-color: #000033;
    }

    When you press the colon, if you are using Dreamweaver, then should get a color menu. Feel free to choose your own colors! But for the purposes of this tutorial, keep the body color dark. I generated the colors for this tutorial with the Slayer Office Palette Generator. I was attempting to create a conservative and corporate feel and thus chose deep blue and gray hues (which will be softened a bit when contrasted by a light purple / sky blue). Lots more information on color is available in my appendix.
  2. Save our file, hop over to the web browser, and refresh. Oh no! that’s too dark! Whatever shall we do? Here’s where that "container" division comes in handy.

Background for div#container

To fix our contrast issue, we need to supply the container division a different background color. Because web browsers read our style sheet from the top down, we need to code our properties for the container after the code for our body.

  1. Here's my new code:

    body {
    font-family:"Gill Sans MT", Arial, sans-serif;
    font-size:16px;
    word-spacing:3px;
    background-color:#000033;
    }

    div#container {
    background-color:#D2D6E2;
    }

  2. Now save and refresh the web browser. If things are working right, you should see something like this: Now you should begin to see the power that CSS provides us... Though we won't be today, we could continue to go through and give each of our divisions a different background color.

Setting the width for our div#container

Chances are I could write a 100 page tutorial just on setting the width of a CSS layout, and I have an extensive collection of materials in the appendix dedicated to page layout. The layout coded below is a proportional or relative, rather than absolute layout. This means that our layout will always adjust to the size of the browser window. This is by far and easier concept to show rather than tell; so let's just code this and then see how it works (and recognize that this is one way out of hundreds to layout a page).

  1. Add this new code:

    div#container {
    background-color:#D2D6E2;
    width:80%;
    }

    This attribute means that div#container’s width will always be 80% of its "parent" element (remember, cascading down). In this case, its parent element (the element "above" it in the XHTML and CSS) is the body, so div#container will be 80% of the body.
  2. To see this in action, save and then refresh. Now play around with the size of the browser window. Neat (at least I think so).
  3. But we don’t want our container to get too small or it will begin to "break." You can see that when the browser window gets too small things start to get messy. So let’s set a minimum width. To introduce you to different ways of doing this, I’ll set the minimum width in pixels rather than percentage.

    div#container {
    background-color:#D2D6E2;
    width:80%;
    min-width:440px;
    max-width:880px;
    }

    Notice I also set a max-width. I want to control the amount of color on the screen and maintain a balanced design, so I don’t want too much empty area. This will make more sense once we…

Position the div#container (Margins)

As with setting the width, there’s a bazillion ways we could do this. The following way should align our page so that the container division will always be horizontally-centered on the screen.

  1. Since I set the width with percentages, I’ll start there:

    div#container {
    background-color:#D2D6E2;
    width:80%;
    min-width:440px;
    max-width:880px;
    margin-left:10%;
    margin-right:10%;
    margin-top:25px;
    margin-bottom:25px;
    }

    Since screens have far more consistency top to bottom, I’m more comfortable using an absolute value, such as pixels, to control this (rather than a relative value, such as percentage).
  2. Save and refresh, try resizing the window. Notice how the margins change as the window size changes, but my vita always remains centered.

Position content in the div#container (Padding)

Next issue: our text is too close to the edge of our container, we need to insert some whitespace into our design to improve readability. Whitespace in CSS is largely created through two properties, one of which we have already used: margin. We used margin in the previous section to control how far from the edge of the body the container would start. Now we are going to use padding to control how far from the edge of the container the elements in the container will start. I know this sounds complicated; I believe that learning the differences between margin and padding is one of the biggest challenges in CSS. I still get them all jumbled up! This is excruciating some times because browsers tend to interpret them quick differently (especially Internet Explorer--that's why I'm not dealing with IE until our final section!). But here’s the rule of thumb: margin outside, padding inside. Margin controls the relationship between an element and what is outside of that element (such as the distance between container and what is above it, the body); padding controls the relationship between an element and what is inside that element (such as the distance between the edge of the container and the content inside the container). Hopefully demonstration will make this more tangible.

  1. Here we go:

    div#container {
    background-color:#D2D6E2;
    width:80%;
    min-width:440px;
    max-width:880px;
    margin-left:10%;
    margin-right:10%;
    padding:20px;
    }

    Save and refresh. Poof! What just happened? Our web browser inserted 20 pixels of whitespace inside the container division.
  2. Because I did not specify a specific direction (such as "padding-left"), it applied the padding in all four directions. Because I style sheet cascades, I can control the padding for a specific direction if I put that information afterthe generic padding command. Again, allow me to show rather than tell:

    div#container {
    background-color:#D2D6E2;
    width:80%;
    min-width:440px;
    max-width:880px;
    margin-left:10%;
    margin-right:10%;
    padding:20px;
    padding-top:10px;
    }

    If the padding-top property came before the generic padding property, then the 10px would be over-rided by the 20px

Borders around a division

Now let’s give our container a bit of flair, and help distinguish it from our background color. We’re going to put a border around it. There’s three parts to choosing a border: color, type, size, all of which can be imported through one line of code.

  1. First, add:

    div#container {
    background-color:#D2D6E2;
    width:80%;
    min-width:440px;
    max-width:880px;
    margin-left:10%;
    margin-right:10%;
    padding:20px;
    border: #666666 solid 3px;
    }

    And, to get all fancy, let’s add:

    div#container {
    background-color:#D2D6E2;
    width:80%;
    min-width:440px;
    max-width:880px;
    margin-left:10%;
    margin-right:10%;
    padding:20px;
    border: #666666 solid 3px;
    border-left:12px double #666666;
    }

    We’ve only finished styling two selectors, and already we have created a pretty nice looking document. But we'r not done yet!.

Styling our headings (h1, h2, h3, h4, h5, h6)

So far we have been selecting properties for divisions--for the body and for our container. Now we’re going to select elements rather than a division.

  1. After the container CSS, type:

    div#container {
    background-color:#D2D6E2;
    width:80%;
    min-width:440px;
    max-width:880px;
    margin-left:10%;
    margin-right:10%;
    padding:20px;
    border: #666666 solid 3px;
    border-left:12px double #666666;
    } h1, h2, h3, h4 /*however many headings you used in your XHTML*/ {
    color:#000033;
    letter-spacing:1.5px;
    }

    The first line of code selects all the headers in our document, so we can easily make some global formatting changes. Slightly increasing the letter-spacing, as we did with our word-spacing, should free our document up and make it a bit more inviting to the eye. Save and refresh. Presto. Those used to desiging with tables should have an appreciation for how quickly that works!
  2. To get a better feel for the power of the cascade, let's give our headings a different font-family. Since I used sans-serif fonts for my body text, I am going to use a serif font for my headers:

    h1, h2, h3, h4 {
    color:#000033;
    letter-spacing:1.5px; font-family: "Bell MT," "Abadi MT Condensed Light", "Gill Sans", Arial, serif;
    }

    In developing this new font-family, I’ve "covered my butt." If a browser doesn’t have either of the serif fonts I selected (Bell MT and Abadi MT Condensed Light), then it will revert back to my body fonts, [Gill Sans and Arial]. This way, there shouldn’t be any surprises (those familiar with the basics of typography know that it is very hard to match two different kinds of sans-serif fonts... those who don't know the difference between a serif and a sans-serif font should do some reading).
  3. For further examples of what the cascade allows, let’s decide to make our subheadings a different color than our main heading:

    h1, h2, h3, h4 {
    color:#000033;
    letter-spacing:1.5px;
    font-family: "Bell MT", "Abadi MT Condensed Light", Arial, sans-serif;
    }

    h2, h3 {
    color:#666666;
    letter-spacing:2px;
    }

    Save and refresh. I know what you are thinking, this cannot possibly get any cooler. But wait. It can. And it will.

Final Thoughts

As with our XHTML, the final step is to validate your CSS. And, again, as with XHTML, the W3C provides a validator for CSS files. If you want to be able to display a valid CSS icon (like we did at the end of last session), you will have to validate using a URL rather than by file upload.

You have some serious homework before our next session: you'll need to have at least two more XHMTL validated content pages for your site. You should also attach the style sheet we made in this workshop to those pages. Next session we'll create a navigation division to link our pages together.