Web Basic 101 – CSS: ID and Class

In this sixth course, we’ll plunge deeper into the CSS world, we will take a deeper look at the CSS selectors with ID and Class.

Previously, we’ve learn the basic of CSS and how to insert a style sheet inside a web page.

The selectors are the first part of a CSS command. So far, we’ve been using HTML tags as selector (EX: p, h1, etc.). Today we will see how to apply our CSS command to a class or to a specific ID.

For today’s course, we will look at two new HTML tags, the “div” and the “span” tags. Both tags are empty container that will allow us to regroup code and format it to our liking. In later course, the will be used to create column, header, footer and menu. The only difference between both tag is the “div” tag will group all element inside an inside a block, and the “span” tag will group element inline.

The ID!

In CSS, the “ID” is a way to identify a unique element in a web page. It is important that the assigned id only appears once in a web page. A practical use for ids would be to define footer, header or any part of code that are unique. To assign a id to a html tag, we simply use the attribute id like so:

  <div id="header"></div>

And in our CSS code, to set a style directly to the id, we will use the hash character (#) like the following example:

#header {
 color:blue;
}

Make way for the CLASS!

A CSS class is similar to an ID, but with one key difference: a class can be used multiple times on a single web page. This makes it ideal for styling repeated elements. For example, you can create a class to show an alert to users or to highlight a specific part of your text.

Here’s an example of how to define and use a class in both HTML and CSS:

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

And in HTML:

<p>Let’s have <span class=”alert”>fun</span> with my new alert <span class=”alert”>message</span></p>

The class will be defined by a dot (.) in the CSS document and with the class attribute in HTML.

Now to finish up, let’s mix our class and id together for some interesting result, since in CSS, you can place more than one consecutive selector.

<div id="wrapper">
 <p>This is a first paragraphe <span class="alert">in</span> my wrapper id.</p>
</div>
<p>This is a second paragraphe <span class="alert">outside</span> my wrapper id.</p>

With this HTML code, let’s add our CSS with a twist:

#wrapper{
 background-color :lighegrey;
}
#wrapper .alert{
 background-color :cyan; 
 color:red;
}
P {
 color:indigo;
}

The twist here is in the selector #wrapper .alert. This tells the browser to apply the style only to the .alert class inside the #wrapper ID. Other .alert classes outside of #wrapper won’t be affected.

That’s all for today! As always, feel free to watch the video lesson for extra value and a visual walkthrough of this tutorial.

Next article we will see how to create a HTML document with two columns.