CSS Intermediate - Class and ID Selectors

Complete CSS Tutorial

First Step - Beginner CSS	Second Step - Intermediate CSS	Third & Final Step - Advanced CSS
1. Applying CSS	1. Class and ID Selectors	1. Display
2. Selectors, Properties, and Values	2. Grouping and Nesting	2. Page Layout
3. Colors	3. Pseudo Classes	3. At-Rules
4. Text	4. Shorthand Properties	4. Pseudo Elements
5. Margins and Padding	5. Background-images	5. Specificity
6. Borders
7. Putting It All Together

For the CSS Beginner Tutorial we looked solely at HTML selectors - those that represent an HTML tag.

You can also define your own selectors in the form of Class and ID selectors.

The benefit of this is that you can have the same HTML element, but present it differently depending on its class or ID.

CSS Tutorial by BH24

In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#).
So the CSS might look something like:

#top {
 background-color: #ccc;
 padding: 1em
}

.intro {
 color: red;
 font-weight: bold;
}

The HTML refers to the CSS by using the attributes id and class. It could look something like this:

<div id="top">

<h1>Chocolate curry</h1>

<p class="intro">This is my recipe for making curry purely with chocolate</p>

<p class="intro">Mmm mm mmmmm</p>

</div>

Teach Yourself  by BH24 HTML Editor Tool!

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { whatever } will only be applied to paragraph elements that have the class 'jam'.