Getting Down with ...

by ...

Lesson n:

Cascading Style Sheets (CSS) is a style language developed by the World Wide Web Consortium in the mid 1990s for use primarily with web pages.

The purpose of CSS is to seperate the presentation of a document (i.e. its look and format) from the document's structure, expressed in HTML.

CSS is a seperate language from HTML, with its own syntax and semantics. Modern web browsers can read CSS and apply it to web pages as they render them.

A First Look At CSS

Here is a screen shot of a small web page styled with CSS:

CSS Properties with CSS

and here is a screen shot of the same web page unstyled:

CSS Properties without CSS

Adding Style to a Web Page

Here is a CSS starter page, which we can use whenever we need a new, empty, page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
/* This is a CSS comment. Your style goes below here. */

</style>
</head>
<body>

</body>
</html>

The only differences between this and the minimal_page.html we saw in the lesson 1 of Getting Down with HTML is the addition of the <style></style> element between the title and the closing head tag, and the inclusion of a CSS comment inside the style element.

You will put your CSS between the opening and closing style tags.

Exercises:

  1. Download css_properties.html on to your computer (in firefox you can mouse over the link, right click, and select Save Link As... to download the file).
  2. While keeping the page open in a web browser, open it with your favorite text editor. You now have two views of the same web page on your desktop: the source view in a text editor, and a rendered view in a web browser.
  3. Add the following nine lines between the opening and closing style tags:
    body {
        margin: 60px;
    }
    h1 {
        color: #007;
        background-color: #FFF;
        text-align: center;
        font-style: italic;
    }
    
    Reload the page in your browser. You should now see the main heading, Common CSS Properties centered with a blue color and an italic font style. The body has a 60 pixel margin around all sides too.
  4. Now add the following two styles immediately after the h1 style you added in the previous exercise:
    h2 {
        margin-left: -20px;
        color: #049;
    }
    p {
        text-align: justify;
        font-size: large;
    }
    
    h2s have now been moved 20 pixels to the left, and paragraphs are justified and in a larger font.
  5. Now let's style the table. Add the following immediately after the p style from the previous exercise:
    table {
        margin-left: auto;
        margin-right: auto;
        border-collapse: collapse;
        font-size: large;
        line-height: 24px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    Reload the page in your browser. You should now see the table centered, and a new font in the table text.
  6. Adding the next style will change the appearance of the table headings:
    th {
        border-top: 1px solid #777;
        border-bottom: 1px solid #777;
        background-color: #AFEEEE;
        color: #007;    
        text-align: left;   
    }
    
  7. And the next one makes the table data look nicer:
    td {
        border-bottom: 1px solid #BBB;
        background-color: #EEE;
        color: #000;
    }
    
  8. Now we add padding around both the table headings and table data so they don't look so crowded:
    td, th {
        padding: 0.2em 0.5em 0.2em 0.5em;
    } 
    
  9. Finally, we finish our table by adding a left border to heading and data that have another heading or data element to the left of them:
    td+td, th+th {
        border-left: 1px solid #BBB;
    }
    
  10. Add the following to style the links:
    a:link, a:visited {
        color: #007;
        font-weight: bold;
        text-decoration: none;
    }
    
  11. Download footer.css and put it in the same directory with css_properties.html. Add the following to the beginning of the style element, immediately below the open style tag (<style>):
    @import url(footer.css);
    

After completing these exercises, your document should look something like this.