CSS | Classes and IDs and Span Tags

Classes

We can use Classes and IDs as a way to have multiple types of formatting for the same tags, so we might want a red paragraph and a blue paragraph. Classes can achieve this.

<p class="Red">This is my Red paragraph</p>
<p class="Blue">This is my blue paragraph</p>

Here is the CSS

p {
color: black;
}
p.Red {
color: red;
}
p.Blue {
color: blue;
}

If we want to make a class global (make it apply to ALL tags) we can simply remove the tag before the dot like this:

.Blue {
color: blue;
}

Now everything the class=”blue” will now be formatted with the style we dictate here.

IDs

IDs are very similar to classes, except they are expressed in CSS with a # symbol. Also, IDs are unique and can only be used for one element.

#ID1 {
color: Green;
}

Span Tags

We can use span tags to format small snippets of single words inline with CSS like this.

.spantag {
font-weight: bold;
}

<span class="spantag">This will be bold</span>