How to Use Classes in CSS to Style an Element
access_time
hourglass_empty
person_outline

How to Use Classes in CSS to Style an Element

Are you looking for a way to stylize HTML elements without hassle? Chances are, you will have to use CSS classes. In this article, you will find out what exactly are classes in CSS and how to use them effectively.

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:

classes in css result

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!

The Author

Author

Tautvydas V. / @tautvydas

Tautvydas started his career as a technical support agent and now walks the path of full-stack development. He strives to produce top-notch features, improvements, and outstanding user experience with every line of code. In his free time, Tautvydas likes to travel and play old school video games.

Related tutorials

Author

Hector Reply

June 17, 2019

Responsive instead of Responsible.

    Author

    Domantas G.

    Replied on September 26, 2019

    Hey Hector, We have no idea how we missed this! Thanks, fixed!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Become a part of Hostinger now!

More in Website
How to Add an Image or Logo to Your Website

Close