CSS for Dummies!

As I told you before, a selector is the part of the page that we're going to modify. Your Opera Blog handles three kinds of selectors: id, type and class.

The id selector (#name) is the one that modifies a certain section of the blog, such as the header, the sidebar or the posts.

#top {
background:#335fa3 url(/community/graphics/themes/top-blue.gif); 
border-bottom:1px solid #ddd;
color:#fff;
}

If you take a look at the source of you blog, you'll find something similar to this

<div id="top">

That means that everything between both "divs" will be modified by the #top selector.

The type selector is used to modify a specific HTML tag, within the id selector. To use it you just have to type the tag you want to modify in front of the id selector.

#top h1 {
padding-top:22px;
}

In the example, we are modifying the h1 tag within the #top selector.

Finally, a class selector applies to many elements at once, or a sub-set of specific HTML elements, like the color of the username link (it will only modify such item)

a.username:link,  a.username:visited,  {
color:#176b9b;
}

As you can see, you can apply style to several selectors at once just by separating them with a comma.

TASK!
Identify the selectors in the CSS of the last post and write down which type they are. On the next post we're going to start having fun!