Styling an Element by Using CSS Class Selectors

Are you interested in effortlessly styling HTML elements? Using CSS classes is likely the solution. In this article, we’ll explore what CSS classes are and how to utilize them effectively for styling your HTML elements.

What Is a CSS Class?

CSS syntax contains a selector, and a class is exactly that. It is needed to stylize HTML elements – including changing colors, fonts, or the size of a text.

If you want to use a class, use a full stop (.) followed by the class name in a style block. Next, use a bracket called a declaration block that contains the property to stylize the element, such as text color or text size.

Let’s take an example, here’s how it looks if you want to change the text color to green:

<style>

.green-text {

color: #008000;

}

</style>

CSS Classes will help you stylize HTML elements quickly. Moreover, you can avoid repeating the same code for each HTML element that uses the same styling. Hence, the amount of CSS code to use is reduced – which makes it more readable and easier to debug.

On another note, you can also use an ID selector to stylize HTML elements. However, it’s only able to change one HTML element, whereas a class selector can stylize more than one element.

How to Use a CSS Class to Style an Element?

Ready to use CSS classes? The examples below will help you get a real grasp of the concept. Let’s start by creating classes using style tags:

<style>

.green-text {

color: #008000;

}

</style>

<style>

.font-36{

font-size: 36px;

}

</style>

Let’s break it down and see what each part represents:

• <style> –  the style tag specifies the style information of an HTML element. You can put multiple style tags within an HTML document.
• .classname – it refers to the attributes that will be added to the element. For instance, the class name is green-text and font-36 since the element will have a green color, and 36 pixels sized fonts. Also, don’t forget to put a dot (.) before the class name as it won’t work otherwise.
• {property} – it contains attributes that will be added to the elements, such as a green color and 36 pixels font size.

After creating the classes, you can apply them to HTML elements:

<p class="green-text font-36">This is an example of a sentence with bigger font size</p>

<p class="green-text">This is an example of a sentence with regular font size</p>

As you can see, there are two sentences; The first one contains two classes – green-text and font-36, while the other one only has one class. Hence the result will look like this:

Both sentences are using the green-text class; that’s why they have green colored text. However, the first sentence also uses the font-36 class, which turns the text’s size to 36 pixels and makes it bigger than the other sentence.

Keep in mind that you can use both classes if you separate them with a single space. You should also put the class inside the relevant HTML tag to make it work. For example, if you want to style an H1 heading, then you have to use the <h1> tag:

<h1 class="green-text">An Example of a Heading 1 Text</h1>

3 Tips to Master Classes in CSS

There are other things that you need to look out for when creating classes in CSS, such as the attributes that you’ll put on the elements and the number of classes that you want to create. If you plan these out beforehand, it’ll help you organize the code more easily.

All in all, you should also pay attention to these three factors:

• Name your class properly –  the class name must provide information about attributes that are added to the element. So, it’ll be easier to understand. For instance, if you want to add a class that will change the font size to 36, then the best bet would be to name it font-36.
• Make sure that a class only does one thing – adding more than one attribute might make the class hard to reuse. For example, you can’t use a class containing two attributes – green text and font size 36 pixels if you solely want a green text without changing the font size.
• Group your classes based on their characteristics – when creating classes, sort them based on their utilization. For example, you can group classes that are related to the font size. This practice will help you in the long run.

Conclusion

Utilizing classes in CSS will help you stylize HTML elements easily. Now you can quickly add lots of attributes to the elements using different classes. At last, keep them organized and make sure that they’re reusable.

Do you have any questions regarding classes in CSS? Let us know in the comment section below!