Attributes are instructions of how elements in the HTML should look. Attributes can be anything from font-size to background-color, but this section describes how to effectively apply certain attributes to different elements.

ID’s

ID tags in HTML (<div id=”header”>) are tags which should only be used once per web page. Generally, you want to use an ID to denote the page structure, so you might have id’s for a web page of “header”, “content”, “sidebar” and “footer”, because you’re not going to have two headers or two footers for any one webpage. To assign a style to an ID tag in CSS, use:

Class

Unlike ID tags, class tags can be used multiple times. This is great when you want different parts of the design to look the same.
To assign a style to a class tag in CSS use:

HTML elements

You can apply a style to a particular HTML tag with CSS without using an id or class. For example, if you wanted to change every list (ul) to change from a dot to a square, you could simply do:

Generally you don’t want to apply a style to an element like this. One exception though would be the body tag because it only appears once. In the next paragraph though, you will see where using the general HTML element is appropriate.

Combining All Three

If you’ve played around with CSS before, you’ve probably created HTML like this:

If you have a lot of li elements, you’ll know it can get very annoying to type out class=”x” every time. But there is a way to simplify this. Instead use the following CSS,

And your HTML can become this:

The CSS applies the attributes for define in “.y li” for the li elements embedded in class “y”. Thus you get a cascading effect where you can affect elements inside certain elements. You can use this cascading affect for any combination of ID’s, class and elements. For example, you might use: