CSS basics

In the previous post we had an informal introduction to CSS, now we are giving some more details.

Instead of putting the CSS in the HTML itself, we put it in a dedicated file. So we don't use anymore a style tag, but a link one, like this:

<link type="text/css" rel="stylesheet" href="ch08.css" />

In the href attribute we have a link to the actual file containing the style for the page.

We call "selector" the element to which we are applying a style in the current block, specified before the beginning of the block.

For instance if we write:

h1 {
    color: gray;
}

In this context h1 is the selector, and we apply the color style to it.

We could specify more than a selector at time. So, if we want both h1 and h2 having color gray, we write:

h1, h2 {
    color: gray;
}

We could have more sections for the same selector. For instance, if we want both h1 and h2 with the same color text (as above) but only h1 having a line below, we can add this section:

h1 {
    border-bottom: 1px solid black;
}

A comment in CSS is written using the C-style convention, from slash-star to star-slash:

p {
/*    background-color: red; */
    color: blue;
    border: 1px solid gray;
}

The "cascading" property of CSS is such that the style we specify for a more extern tag is applied to a contained tag, too, if no override is specified in the contained tag.

So, the style specified for body should be applied to all the document:

body {
    font-family: sans-serif;
    color: red;
}

But, given the previously written style for h1 and h2, in that case the text color would still be gray. And, given this:

em {
    font-family: serif;
}

The emphasis is written using a serif font, and not a sans-serif, as specified by the body.

A fun book for HTML beginners: Head First HTML. If you are interested in CSS, go to chapter eight.