Getting Down with ...: 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:

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).
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.
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.
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.
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.

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;   
}

And the next one makes the table data look nicer:

td {
    border-bottom: 1px solid #BBB;
    background-color: #EEE;
    color: #000;
}

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;
} 
```
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;
}
```

Add the following to style the links:

a:link, a:visited {
    color: #007;
    font-weight: bold;
    text-decoration: none;
}

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.

Lesson n:

A First Look At CSS

Adding Style to a Web Page

Exercises: