CSS Classes and IDs

Next up, it's time to discuss classes and IDs. Both of these are attributes that we apply to HTML elements. (Remember, an attribute is a name/value pair defined in the starting tag of an element).

Classes and IDs are used to target specific elements using CSS. This way, we can adjust the design of a specific element rather than all elements of a type. Let's look at the differences between the two and take a look at some examples.

What are ID?

An ID is a unique identifier for an element. For HTML to validate properly, there can only be one element with a specific ID on a page. This is to allow us to target specific, individual elements with CSS. Take a look at the sample code below:

<p id="first-paragraph">This is the first paragraph.</p>
<p id="second-paragraph">This is the second paragraph.</p>
<p id="third-paragraph">This is the third paragraph.</p>

Each of the <p> tags above have a unique element attribute. Let's target them with CSS to style each in a unique way.

#first-paragraph {
  font-size: 24px;
}

#second-paragraph {
  color: red;
}

#third-paragraph: {
  background-color: blue;
}

IDs in CSS are targeted with a hash (#) followed by the ID name. In our example, the HTML/CSS Combo would result in the first paragraph having a font size of 24 pixels, the second having a color of red, and the third having a blue background.

When it comes to choosing your ID class names, there are a lot of opinions about the best way to do this. For our purposes, it's very simple:

We use only lowercase letters in our names, and we separate words with a hyphen (-). ID and class names must begin with a letter, not a number.

What are Classes?

Classes are the "plural" version of the base CSS selectable attributes. When writing code, there is a general rule of thumb simply called: Don't Repeat Yourself. This means that we should never write the same piece of code more than necessary.

With that in mind, let's look at an example. Say you have multiple paragraphs of content, defined with the <p> tag. Now, let's imagine that you want specific paragraphs to be red, others to be blue, and the remainder to be black. You could add a style attribute to each paragraph element to define the color of each...but that's inefficient and requires a lot more code.

Instead, we'll accomplish this with classes.

Let's give our paragraphs some simple classes to represent the colors of the text. We'll just use "red-text" and "blue-text". Take a look at the code below:

<p class="red-text">This text will be red.</p>
<p class="blue-text">This text will be blue.</p>
<p class="red-text">This text will be red.</p>
<p>This text will be black.</p>
<p>This text will be black.</p>
<p class="blue-text">This text will be blue.</p>

You'll notice that we haven't defined classes for our "black text" paragraphs. We'll get to this in a second; Let's look at the CSS now.

p {
  color: black;
}

.red-text {
  color: red;
}

.blue-text {
  color: blue;
}

In CSS, we target classes with a period (.) followed by the class name. You'll notice that we've started our code by telling the CSS to make all "p" elements black. Following that, we have selectors for each class and property:value pairs to define the colors that those paragraphs should be.

Bonus Info

Because classes are unique, we are able to apply multiple classes to a single element. This is done by putting a space between class names inside the attribute:

<p class="red-text blue-background">Lorem Ipsum...</p>

We could have two classes targeted in the CSS for the above HTML - one for the "red-text" class and another for the "blue-background" class that apply multiple styles to the same element.

 

Next week, we'll discuss CSS Specificity, what makes the styles "cascading", and how to properly organize large blocks of CSS without confusing yourself of whoever else might read your code.

Previous Lesson Next Lesson

Sign Up For Our Newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *

homebubblebriefcasepilcrow linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram