In this seventh part of our CSS guide, we look into what divs, classes, and IDs are and how they can be useful.
In the previous part of our guide, we discussed how we can style tables using CSS. That, of course, is a very useful guide because it does set us up nicely for the last few parts of our guide.
One thing you’ve probably noticed is that CSS rules affect the entire page. If you have some CSS rules modifying how the P tag behaves, for instance, every P tag changes. While it is useful to be able to modify stuff, having an all or nothing scenario can be somewhat limiting. This is where things like an ID or a class comes into play. You can actually select which parts of the page you want to modify and leave the rest alone!
Adding a Class
Let’s dial things back to the very beginning and look at simple paragraph (p) tags. First, let’s create four paragraphs in an HTML file like so:
Additionally, here’s the CSS where we added some simple formatting already:
The end result of this:
So, nothing too fancy going on here that is out of the ordinary at this stage.
Now, lets modify just one paragraph and turn the font green! I’m going to give myself a minor challenge and modify the second paragraph only. So, first, I need to add a class to the paragraph I want to change in the HTML. I only need to modify the opening tag. So, I just add a space next to the p and type in class=”green” like so:
OK, so I’ve added a class to the HTML. You’ll note that I gave the class name “green” here. The really cool thing about classes is that you can use pretty much any name you want (I would avoid spaces in those names, though). Ideally, though, you’ll want to have it make sense, at minimum, to you. As you code more and more complex sites, it’ll make your own life easier if you name it something logical that you can immediately go back to if you really want.
So, with the class inserted into the HTML, that’s, well, only the first step. We’ll still need to create the CSS rule. So, let’s open up our CSS file. To add a CSS class in our HTML, you’ll want to start the rule off with a period. After the period, you’ll want to add in the name of that class. From there, you can proceed to add the CSS rules of your choosing. In my case, I’ve added .green { color: #005500; } like so:
Now, with the P tag closing at the end of that paragraph. It should change that font to green. Let’s take a look at our web page:
Well, what do you know? It worked!
You can add these classes to just about any HTML tag in this manner. If you want the second and fourth paragraph to turn green, just add the class to the second and fourth opening p tag. Both, in this case, will cause the font to turn green. This will definitely allow you to maximize your styling flexibility!
The Div tag
The only problem with this style of adding classes is that the class may get a little lost in the HTML. If you want to separate your class into it’s own HTML element, there is an extremely easy way to do this: through the <div> tag. Think of a div tag as a sort of HTML T-cell. You can turn it into anything you like and affect anything you like.
This can be really useful if you want to really drill down to specifics of what you want to modify. To demonstrate this, let’s turn the second paragraph red. The added challenge this time around? Let’s only modify the first three sentences instead of the entire paragraph!
With the way we were adding classes before, this wouldn’t really be possible because the p tag closes at the end of the paragraph. However, if we use a div tag, we can end it anywhere in the paragraph. So, let’s add our div tag and give it the class red. We’ll open it at the beginning of the paragraph with <div class=”red”>. Next, we’re going to close it at the end of the third sentence with </div> like so:
Next, we’re going to add our CSS (note I’ve copied and pasted the line height and font size because it otherwise breaks the formatting somewhat):
The end result:
OK, so it broke the formatting for the rest of the paragraph. Theoretically, we can add a second div tag to restore the other bits of formatting, but the point is to offer a visualization of a div tag in action.
That’s a basic demonstration of how a div tag can be used!
IDs
Ids operate very similarly to classes. The difference is that, generally speaking, you should only use it once. Also note that if you get into more complex web coding, you can run the risk of having your IDs conflict with other parts of your code. I personally do not use IDs in my code because classes are more than sufficient to handle it, but if you are curious to see how IDs are handled in CSS, then read on.
Using a Div tag, let’s modify the last paragraph and turn it blue using an ID. much like a class, we are going to simply type in <div id=”blue”> at the beginning of the last paragraph and close the tag at the end like so:
Next, I’m going to add my ID to the CSS. To do this, I’m going to add #blue. It’s just like a class, only you use a pound sign instead of a period. Again, I’ve copied the other formatting code to make sure the font size and height remain the same:
Now, the end result:
Voila! A properly working ID in CSS. Again, I would recommend just sticking with classes for now, but that is how you can add an ID into your code. Also, you can modify a tag in a similar manner as classes as well in case you are interested.
Congratulations! You now know how to handle Classes, IDs, and Div tags in CSS!