How To Create A Css Class In Html

Imagine you're designing a web page. You want a group of headings to have a large red text, a group of buttons to have a medium white text, and a group of paragraphs to have a small blue text.

Bold choices. But, thanks to CSS classes, you can do exactly that. CSS classes enable you to apply unique style properties to groups of HTML elements to achieve your desired web page appearance.

In this post, we'll cover the fundamental terms you need to know, like CSS class, class selector, and CSS specificity. We'll also walk through how to create a class in CSS and use it to style your web pages.

Download Now: Free Intro Guide to HTML & CSS

What is a CSS class?

A CSS class is an attribute used to define a group of HTML elements in order to apply unique styling and formatting to those elements with CSS.

Let's look at an example of how CSS classes work. Below, we have a simple HTML page with three headings (h2 elements) and three paragraphs (p elements).

Notice how the second heading, third heading, and final paragraph are styled differently than the rest — this is because these elements have been assigned the class bright. Looking at the CSS, we see the .bright selector, which applies its style rules to all elements with the attribute class="bright".

See the Pen css class: heading example by Christina Perricone (@hubspot) on CodePen.

You can use CSS classes to group HTML elements and then apply custom styles to them. You can make classes and apply them to text, buttons, spans and divs, tables, images, or just about any other page element you can think of. Let's now take a closer look at how we can use CSS classes to style page elements.

How to Create a Class in CSS

Let's try making a CSS class from scratch. Say you want to make a paragraph of text and style certain words for more emphasis. You can do this by creating a CSS class for these special words, then assigning this class to individual words with span tags.

Start by writing out the HTML elements you want to style. In this case, it's a paragraph of text:

                                          
<p>Our <span>marketing software</span> and <span>service platform</span> provide you with the tools you need to <span>engage</span> visitors, <span>convert</span> them to leads, and <span>win them over</span> as customers.</p>

I've also placed <span> tags around the words we'll soon style with a CSS class.

Next, let's add class attributes to these <span> tags. To do so, add the attribute class="name" to the opening tag of the targeted element, and replace name with a unique identifier for the class.

a diagram showing how to create a css class

Image Source

In our example, the HTML looks like this:

                                          
<p>Our <span class="orange-text">marketing software</span> and <span class="orange-text">service platform</span> provide you with the tools you need to <span class="blue-text">engage</span> visitors, <span class="blue-text">convert</span> them to leads, and <span class="blue-text">win them over</span> as customers.</p>

Here we've added two CSS classes to our span tags: orange-text and blue-text.

Lastly, you need to create rule sets for these classes in CSS. We do this using CSS class selectors and declaration blocks.

What is a class selector in CSS?

In CSS, a class selector is formatted as a period (.) character followed by the name of the class. It selects all elements with that class attribute so that unique CSS declarations can be applied to those specific elements without affecting other elements on the page.

In our example, we'll create declaration blocks for both of our CSS classes with the selectors .orange-text and .blue-text:

                                          
/* declaration for our first CSS class */
    .orange-text {
    color: orange;
    font-weight: bold;
}/* declaration for our second CSS class */
    .blue-text {
    color: blue;
    font-weight: bold;
}

When we pair our HTML and CSS together, we see how our CSS classes target certain elements with our custom styling:

See the Pen css class: span example by Christina Perricone (@hubspot) on CodePen.

Note that the class attribute doesn't change the content or style of the HTML document by itself. Meaning, simply adding a class attribute to an element without any CSS will not change the appearance or formatting of the element on the front end. You need to assign CSS rules to the class to see any change.

It also helps to create class names that describe the element in the class. In the above example, we used the names .orange-text and .blue-text because we were creating colorful text. These names are descriptive enough that someone just reading the CSS would understand the purpose of the class.

Class names can be one or multiple words. If your class name is multiple words, use hyphens where you would put spaces. Also, it's common practice to write class names in lowercase. Some examples of class names include .bright-blue and .fancy-text.

How to Use CSS Classes

Now that we understand what a CSS class is and how it appears in the body section of an HTML file, let's take a look at common use cases.

Bootstrap CSS Classes

Many CSS frameworks make heavy use of CSS classes. For instance, Bootstrap CSS uses classes to define page elements.

Let's see an example of how Bootstrap uses CSS classes. In Bootstrap CSS, the CSS class .btn can be used with the <button> HTML element (as well as the <a> and <input> elements). Bootstrap contains CSS that automatically formats any elements defined with the .btn class a certain way. Therefore, simply adding the attribute class="btn" to an element changes its appearance.

More precisely, adding the .btn class to an element sets the font and font size, and if a visitor clicks on the button text, an outline of a button with rounded edges appears.

Bootstrap also has classes for styling buttons in other ways, such as background color. If we add the class .btn-success or .btn-danger the button will show as green or red respectively.

See the Pen css class: bootstrap example by Christina Perricone (@hubspot) on CodePen.

With CSS classes, Bootstrap lets us quickly style page elements by just adding one or more class names. CSS classes enable you to format different types of elements while writing less code.

Descendant Selectors

The goal of CSS classes is to apply formatting to specific elements. To that end, descendant selectors are a great addition to your toolbox.

Descendant selectors let you target elements inside of other elements. For instance, you may have already created a class to define a general style for paragraph or heading text, but want certain words within the paragraph to be styled in their own way.

Descendant selectors allow you to add these special styles to specific words without affecting the surrounding text or changing your HTML document.

Let's say you apply the .blue-text class to a heading, but want to change the color of a word within the heading. Wrap the word in a span element, then add another ruleset with a descendent selector: After the CSS class selector .blue-text, add a space and then the type selector span.

See the Pen css class: descendant selector example by Christina Perricone (@hubspot) on CodePen.

Be careful not to overdo this, though. Overuse of descendant selectors can lead you to set up confusing rules that will make changes difficult for you down the line.

Pseudo-Classes

There's more to see on a web page than HTML content. A great deal of information about the user's activity is transmitted while they interact with the page. Some of this information is a reflection of what they're doing.

Consider a link within your content. The user may or may not interact with it. If they do, you can use pseudo-classes to capture temporary user information such as when they hover, click, and follow the link.

Pseudo-classes are identified by a colon followed by the class. They will appear after a CSS selector with no space in between.

Common pseudo-classes for link styling are:

:link targets a link that the user hasn't visited.
:visited targets a link that's been visited by the user before.
:hover targets a link with the user's cursor over it.
:active targets a link that's being pressed down.

Let's look at an example. Say you want to remove the underline from only certain links in all states. Meaning, no matter if the user has visited the link, is hovering over it, or is actively pressing down on it, an underline will not appear below these specific links.

In that case, you'd add a class attribute only to the links you want to remove the underline from. Then, add four rule sets with the class selector and the four respective pseudo-classes. In each declaration block, you'll set the text-decoration property to none.

See the Pen css class: pseudo classes by Christina Perricone (@hubspot) on CodePen.

CSS Class vs. ID Selectors

In CSS, classes group together multiple elements, while IDs are used to identify a single element. Use class selectors to style multiple HTML elements of the same class and ID selectors to style one unique HTML element.

While you can have multiple instances of a class on an HTML page, you can only have one instance of a CSS ID on a page. To give an element an ID, add the attribute id="name" to its opening tag, and replace name with a unique identifying name. In the CSS, the corresponding ID selector begins with a pound sign (#) instead of a period.

Additionally, ID attributes provide the target for URL fragments (such as page anchors), so they should be unique. Fragments help you refer a user to a specific part of a web page — the fragment looks like an ID selector placed at the end of the URL.

The fragment looks like a CSS ID selector placed at the end of the URL

Image Source

CSS Specificity

Sometimes, CSS rules conflict. For example, if multiple selectors target the same element in a document, which rules apply? This is determined by CSS specificity. In CSS, different selectors have varying weights. When two or more rules conflict on the same element, the more specific one applies.

This is how the different selectors rank in the specificity hierarchy:

Inline CSS: Inline CSS appears as style attributes in the opening tag of HTML elements. Since this CSS is closest to the HTML, it has the highest level of specificity.
ID selectors: An ID is unique to a page element and thus, very specific.
Class selectors, attribute selectors, and pseudo-class selectors: These three selector types have equal specificity. If all three types are applied to the same HTML element, the one appearing latest in the stylesheet will apply and override the rest.
Type selectors: These select all HTML elements that have a given node name and have the syntax element. These are element names and pseudo-elements.

This is where ID selectors shine. Because they're so specific, almost any other type of selector that goes up against them loses. On the other hand, the universal selector (*) will lose every time because of its low specificity.

Start Using CSS Classes

CSS classes help you customize elements on a web page faster and more easily. Using CSS class selectors allows you to set up rules to format entire classes of HTML elements, specific elements in a class, or single elements across many classes. You can be as creative as you want when designing your site, but remember the goal is to improve your website's user experience.

Editor's note: This post was originally published in February 2020 and has been updated for comprehensiveness.

New Call-to-action