CSS Classes Explained: The Beginner’s Guide

CSS classes are the foundation of web design. Whether you’re styling a simple button or crafting an intricate webpage layout, mastering CSS classes is essential.

Probably one of the first things to learn about CSS are CSS classes. Simply put, you can’t style a page in CSS without understanding classes, how they work and how to work with them.

In this article, we’ll explain what are CSS classes, why they’re important, and how to use them. We’ll also include practical examples to help you get started.

You can also watch the video below:

What are CSS classes?

A CSS class is a reusable label used to target one or multiple elements in HTML that share the same properties.

CSS classes are used to style those elements in CSS. When we say ‘style’ or ‘format’, we mean to assign a color, size, font, position and layout, effects like shadows etc.

You can think of a CSS class as of a set of instructions that tells the browser how specific elements should look. If you’re familiar with Illustrator or InDesign, it is something like a character or paragraph style, but it can be applied to any element, not just text.

You can assign a class to an image, a box or a container, header, footer and any other element and style every single property of that element.

For instance, with a CSS class, you can:

✅ Add colors, fonts and effects to text
✅ Style containers, images, buttons and more (for example add rounded corners and outlines)
✅ Create different layouts and adjust spacing, alignment and position of elements

How to Define and Use a CSS Class?

Defining and applying CSS classes is simple. Here’s how:

Option 1: Define a class in HTML and CSS

If you are using HTML to build your webpage, you can assign a class to a specific element using a class attribute.

For example, let’s assign a class “header-main” to a container (or commonly referred to as “div”) with a line of text that says “Welcome to My Website” in HTML:

<div class="header-main">Welcome to My Website</div>

We will see later some naming rules for classes. For now, let’s focus on how to define this class “header-main” in CSS:

1. A class is called out with a dot in CSS (‘.’) followed by class name
2. Curvy brackets open and close the code for styling that particular class
3. Inside these curvy brackets, you then define the class properties, such as color, font-size, padding etc.
4. First you declare a property, followed by a colon (“:”) and then define the value
5. You then close the value or that line with a semi-colon (“;”)
6. Repeat for as many lines and properties as necessary

Here is an example of a CSS class formatted in CSS:

.header-main {
    color: #333333;
    font-size: 24px;
    padding: 10px;
}

How to Create Class Names

Class names should be meaningful and descriptive and shouldn’t contain spaces.

Instead of spaces, you can use a dash (‘-‘) or an underscore (_). For example:

✅ header-main
✅ button-cta
❌ header main

Option 2: CSS Classes in Webpage Builders

Even if you’re using tools like Elementor or WordPress, CSS classes remain incredibly useful. These platforms often assign default classes to elements, which you can find using browser developer tools like Inspect Element.

For example:

1. Right-click an element on your page and select Inspect.
2. Look for the class name in the highlighted HTML.
3. Use that class in your CSS to modify the element’s style.

Alternatively, you can assign your own classes in the webpage builder and style them globally.

For example, Elementor gives you an option to assign your own custom class to any widget element. You can then go to your CSS sheet (for example using a free plugin Simple Custom JS and CSS) and style that class however you want.

This is where you can add a CSS class to any widget in Elementor:

And here is where you can add a CSS class in WordPress to any block after selecting it (for example in a blog post):

Try it yourself!

Below is an interactive exercise where you can examine the HTML code where we assigned a class to an HTML element and then styled it in CSS.

Click on the ‘CSS’ tab below and then change any of the values. For example, you can change the font-size, button color from blue to green or the padding and border-radius in pixels to see the result!

For example, we assigned the same class to both buttons in the preview. So, if you change the background color within that class, the change will affect both buttons. Or in other words, all the buttons and elements within that class!

See the Pen Blog post CSS classes exercise by Anait (@velvetmade) on CodePen.

Why are CSS classes useful?

CSS classes are essential because they make your code cleaner, flexible, more efficient, and easier to maintain and update.

Here’s why:

✅ Style Multiple Elements

Apply the same styles to multiple elements without duplicating code for each element.

For example, you can create a class called “.image-rounded” and you can assign this class to ALL the images on your website that you want to have rounded corners. You can then define a property for these rounded corners in CSS for this specific class.

Or, like in the example below, you can assign the same class “button-primary” in HTML to two different button elements and style them in the same way.

Here is how that structure would look like in HTML:

<div class="button-primary">Click Me</div>
<div class="button-primary">Learn More</div>

You could then use that class “button-primary” and define it in CSS as follows to format your two buttons:

.button-primary {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
}

✅ Make Global Updates From A Single Place

Change the appearance of all elements with a single class from one place in your CSS file.

For instance, updating the .button-primary color will affect every button using that class.

That way, you can apply global changes to all the elements within a class without going and individually adjusting each and every one of them.

✅ Override Default Styles

Classes allow for precise customization, overriding broader styles set by tags or other rules.

✅ Organize Your Code

Using well-named classes keeps your CSS and HTML structured, easy to understand and reusable.

Conclusion: Why CSS Classes Are Essential

Understanding CSS classes is a crucial step in your journey to mastering web design and development. By using classes effectively, you can make your code more organized, scalable, and reusable.

Even when using webpage builders, classes allow you to save time, apply global updates across all pages, and create highly customized designs. And of course, to create beautiful, custom designs where you can adjust virtually anything on your website.

online course

free 30min consultation

Ready to Learn CSS?

A step-by-step basic online course for beginners and non-coders with 50+ practical exercises to get you started with CSS.

• No HTML
• Interactive
• For non-coders

Enroll now