If you're wondering how to use classes in CSS and HTML, you're in the right place. Being an introductory topic of CSS, my intention here is to approach, in a simple way, how classes work and how to use them in your project.
Classes are CSS selectors. We use CSS selectors to stylize elements in HTML, using the "class" attribute, for example: <div class="blue"></div> to reference a CSS class "blue".
Confusing? Rest assured, you'll get everything you need to know down below:
What are CSS classes?
If you are familiar with programming, you know that almost all programming languages, such as Java, PHP, Python, etc. have classes in their syntaxes. The good news is that CSS is much easier.
In CSS, the concept of classes is a little different, since CSS doesn't look anything like the languages mentioned above.
First of all, CSS is a language that's used to stylize websites. It describes what HTML elements should look like, and it does this through selectors.
You can consider selectors as keywords with specific rules that "select" certain HTML elements on a page, so you can assign a different appearance to those elements.
For example, there are CSS selectors to select HTML tags, tags with specific ids, e.g. <div id="footer"></div>, classes e.g. <div class="footer"></div>, tags within tags, among other more specific rules. See the example below:
<style>
div {
color: red;
}
</style>
<div>Test</div>
The CSS code above defines a CSS selector "div", which selects all div tags on the page and paint the text in red color.
CSS classes are simply selectors. The syntax to use is a dot "." followed by a keyword, then the styles are set between "{" and "}". See the following example:
<style>
.bordered {
border: 2px solid black;
}
</style>
<div class="bordered"></div>
Different ways to use CSS classes
As seen in the example above, CSS classes are fundamentally a different type of selector. You can combine CSS classes in several ways. See below for more examples:
<style>
.blue {
color: blue;
}
</style>
<div class="blue">Blue text</div>
<a href="#" class="blue">Blue link text</a>
In the above example, any tag that has the class set to "blue" is gonna have its text in blue.
<style>
div.blue {
color: blue;
}
</style>
<div class="blue">Blue text</div>
<a href="#" class="blue">Black text, even though the class is blue</a>
In the example above, the div will have blue text, but the link will not. This is because the CSS selector was described in such a way that it combines the tag "div" with the ".blue" class, therefore applying the style only to the div tag that contains the "blue" class.
<style>
.blue-text {
color: blue;
}
.black-background {
background: black;
}
</style>
<div class="blue-text black-background">Blue text, black background</div>
<a href="#" class="blue-text">Blue text</a>
The above code shows how you can use multiple classes at the same time, and use multiple classes in the same tag as well. This way you can write a series of styles and reuse them, just by applying different classes, separating by space in the HTML attribute "class".
This is the best way to use classes. Some CSS libraries like bootstrap, for example, make use of this all the time.
Useful tips about classes and selectors
If you're getting started with CSS, we've covered enough about classes specifically. But you may still be in doubt about different class applications, selectors you may have seen in some other piece of code, etc.
The first thing I want you to know is that classes are simple to implement and everything you see in the previous examples is pretty much everything you need to know about classes.
You may be curious about other topics involving CSS, but in the end, the CSS syntax is quite simple. What holds most people back is memorizing many properties and being able to make the pages look exactly as you expect it to. But it all comes down to practice.
Here are some tips on CSS classes and selectors that can help you a lot:
Try to learn the main CSS selectors: Class selectors: .class, id: #id, tag: div, attribute: input[type="text"], as well as the hierarchy of these selectors, are important concepts to learn. This needs to be put in another article, but once you understand and memorize the basic concepts, CSS will be much easier to understand.
CSS selectors are used in JavaScript and jQuery: Have you ever wondered why in jQuery we use $('#container') for example? The idea behind jQuery comes precisely from CSS selectors. The library makes it easy to select elements by id, class, tag name, etc, through CSS selectors. The same can be achieved through document.querySelectorAll('#container') in pure JavaScript.
Use patterns for class names: It's important to name the CSS classes with something meaningful. E.g using a .bordered class for an element that has visible borders - This one seems obvious, but not everyone does that. Besides using names that make sense, it's also recommended to always keep a pattern in class naming. I always recommend using slug case, with lowercase letters, replacing spaces with dashes "-", example: .is-centered for a container with property text-align: center.
Take advantage of class combinations: Will you have elements with the same properties on the same page or on multiple different pages? Then you can define a set of common, reusable styles. For example, let's say you have a side menu with a shadow that's the same as a "read more" section at the bottom of the page. You can then create a .card-shadow class that contains the box-shadow property and possibly other common features the elements might share, so you can reuse that class whenever you need, reducing the amount of CSS code and create a semantic stylesheet structure.
Final recommendations
While CSS accepts the use of other types of selectors, such as # for ids, it's recommended that you use classes rather than ids for defining styles between CSS and HTML.
The main purpose of classes in CSS and HTML is to be able to reuse the same code for multiple elements that share the same style.
To make this happen, try to keep your classes organized in your CSS code, so you can always remember a class already exists for a particular style and avoid recreating classes that do the exact same thing.
A hint here is to use /* CSS Comments */ to define different sections in your CSS file, such as a section that defines typographic classes, another section that defines button classes, another section that defines classes for menu, header, footer, and so on.
