Imagine you're designing a web page. You want one paragraph to have large red font, another paragraph to have medium white font, and a final paragraph to have small blue font.

Thanks to CSS classes, you can do exactly that. CSS classes enable you to apply unique style properties to groups of HTML elements in order to achieve your desired web page appearance.

In this post, we'll cover some 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. 

Free Intro Guide to HTML & CSS [Download Now]

The class attribute doesn't impact the semantic meaning of the HTML document. 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.

However, you should still choose a name that's not based on the appearance of the element to avoid confusion when adding CSS. For instance, say you want to make all the headings on your page bold and change their font color to blue. To start, you'd create and add a class name to your heading elements. Instead of using a class name like .bold, opt for a name like .bright. That way, you won't confuse the class name with the HTML bold element.

Class names don't have to be one word either. A widely-accepted practice for creating CSS classes is to use lowercase and replace spaces with hyphens. Some examples include .bright-blue and .fancy-text.

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.

How to Use CSS Classes

You can use CSS classes to group HTML elements and then apply custom styles to them.

For example, in Bootstrap CSS, the CSS class .btn can be used with the <button> element as well as the <a> and <input> elements. Since Bootstrap’s default stylesheet contains CSS that will automatically format any elements defined with the .btn class, simply adding this class attribute to an HTML element will change its appearance and behavior. For example, adding the .btn class to a button element will set the font and font size, and if a visitor clicks on the button text, then an outline of a button with rounded edges will appear. 

For now, we’ll just look at the HTML and how it looks on the front end. We’ll look at the CSS in the next section. Here’s how a class attribute appears in HTML:

 
<button type="button" class="btn">Click Me</button>

Here’s the result: 

Button element styled with Bootstrap button class

Image Source

Without this button class, you could use a type selector to target all buttons and apply this CSS. But you’d have to write the same CSS for any <a> or <input> elements you wanted formatted in the same way. So CSS classes enable you to format different types of elements while writing less code.

But let’s say you’re not using Bootstrap CSS. Then you’ll need to know how to create your own CSS classes. To do so, you’ll need to know what a class selector is. Let’s look at that first.

To use class selectors, you have to first apply a class attribute to an HTML element or a group of them. Then, add a matching class selector with defined CSS properties in your stylesheet. Let's take a closer look at this process below.

How to Create a Class in CSS

Creating a CSS class is easy. You just need to add some HTML and CSS to your web pages.

Start by adding a class attribute to the HTML elements you want to style. To do so properly, just add class="class-name" inside the opening tags of those element.

Let's look at an example below.

Here's the HTML:

 
<h1>Not green</h1>
<p class="pastoral">Green</p>
<p>Not green</p>
<p><a href="default.asp" target="_blank" class ="pastoral">The link</a> that appears within this paragraph is green.</p>

Then, you can create a rule set for that particular class. You simply need a class selector and a declaration block. The declaration block consists of CSS properties defined with values.  In the example below, for example, the CSS color property is defined with the color name "green."

Here's the CSS:

 
.pastoral {
color: green;
}

Here's the result:

Applying CSS to elements with the pastoral class attribute

Image Source

You have now successfully created a CSS class. When applied to an element, the .pastoral class will change its font color to green. Now let's take a look at some more complex examples.

Descendant Selectors

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

Descendant selectors allow you to target elements inside of other elements. For instance, you may have already created a class to define the general style you want for paragraph text, but require certain words within the paragraph to be bold or italicized.

Descendant selectors allow you to add these special styles to specific words without impacting the rest of the paragraph or changing your HTML document.

Let's say you apply the .pastoral class to a heading, but want to change the color of a single word within the heading. Then you could wrap the word in a span element and use a descendent selector. You'd simply have to add another rule set using the same declaration block. The only difference is that after the CSS class selector .pastoral, add a space and then the type selector span

Here's the HTML:

 
<h1 class="pastoral">This headline is <span>very</span> festive</h1>

Here's the CSS:

 
.pastoral {
color: green;
}
.pastoral span {
color: red;
}

Here's the result:

Using a CSS class and descendent selector to customize one word within a paragraph

Image Source

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

Styling Links with 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

  • :link represents a link that the user hasn't visited.
  • :visited indicates a link that's been visited by the user before.
  • :hover shows a link with the user's cursor over it.
  • :active marks 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 hasn't visited the link or has, is hovering over it, or actively pressing down on it, the 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."

Here's the HTML:

 
<h2>Links on an HTML site</h2>
<p>By default, the underline will appear in links in every state: when hovered over, clicked on, visited, or not. You can remove it with CSS.</p>

<p><b><a href="default.asp" target="_blank">This is an unformatted link</a></b> that appears within a paragraph.</p>

<p><b><a href="default.asp" target="_blank" class="no-underline">This is a formatted link</a></b> that appears within a paragraph.</p>

Here's the CSS:

 
.no-underline:link {
text-decoration: none;
}

.no-underline:visited {
text-decoration: none;
}

.no-underline:hover {
text-decoration: none;
}

.no-underline:active {
text-decoration: none;
}

Here's the result:

Link defined with CSS class selector and pseudo class does not have underline

Image Source

Styling Buttons with Pseudo-Classes

Pseudo-classes can be used to style all kinds of selectors. Besides text links, you can also format your buttons.

With the .button CSS class, you can style button appearance for different states: :link, :visited, :hover, and :active.

ID Selectors

ID selectors work much like class selectors, only more stringently. With this method, you have a unique ID for a single element per page, making it impossible to reuse styles.

Using ID selectors involves the id attribute on the HTML element that you want to select. The corresponding selector begins with a pound sign (#) rather than a period (.).

To be selected, the id attribute of the element must match the value defined in the selector.

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 an ID selector placed at the end of the URL

Source

ID selectors are rarely a favorite for developers. Assigning a unique ID to every element on the page is time-consuming and the CSS ends up looking clunky if you have multiple elements to style.

Additionally, the method makes your website's URLs dependent on CSS styles. A small misstep, such as forgetting to update your stylesheet after editing a URL, could break sections or the entire website.

CSS Specificity

Different CSS selectors have varying weights, in certain cases. When two or more rules conflict on the same element, the more specific one applies — which is what CSS specificity is about. The ranking of style declarations by certain browser rules determines the ultimate appearance of an element.

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.

This is how the different selectors rank in hierarchy:

  1. 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.
  2. ID selectors: An ID is unique to a page element and thus, very specific.
  3. 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. 
  4. 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.

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 (UX).

New Call-to-action

 css introduction

Originally published Nov 2, 2020 7:00:00 AM, updated November 02 2020

Topics:

Bootstrap & CSS