Imagine you want a paragraph that's located on one of your web pages to be large-sized red font, another paragraph to be medium-sized white font, and a final paragraph to be small-sized blue font.

Thanks to CSS classes, you can do exactly this and achieve your desired web page appearance.

Free Intro Guide to HTML & CSS [Download Now]

Without CSS classes you wouldn't be able to make any unique styling changes — all of your paragraphs would look the same. Notice how CSS allows you to make unique styling choices in this example:

similar paragraphs in HTML behave differently with css

Image

Additionally, you can choose a specific element to be affected by a single class (or a single element across different classes) depending on what you want styled.

To use class selectors:

  • Give a class attribute to the HTML element.
  • Give a matching class selector in your CSS stylesheet.

You can make almost anything be the value of the HTML element as long as it matches your CSS selector.

The class attribute is only for linking to your stylesheet and doesn't impact the semantic meaning of the HTML document. However, you should still choose a name that's not based on the appearance of the element to avoid confusion with styling. For instance, instead of using a name like .bold for your class you could have .title which will save you the confusion in CSS.

A widely-accepted practice for naming CSS classes is to use lowercase and replace spaces with hyphens.

Note that the .class attribute can be given to any HTML element, not just <p>. With class selectors, you can style all sections of your website including paragraphs, buttons, and layouts.

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. A class becomes an independent component that you style entirely from CSS — you don't have to make alterations to your HTML just to make simple stylistic changes.

For instance, you may have already defined 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 paragraph or changing your HTML document.

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.

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.

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 styles: These are attached directly to the element and are the most specific.
  2. IDs: An ID is unique to a page element and thus, very specific.
  3. Classes: This includes classes, attributes, and pseudo-classes.
  4. Elements: These are element names and pseudo-elements.

Start Using CSS Classes

CSS classes help you manage elements on a web page and manipulate them seamlessly. Using CSS class selectors allows you to set up rules to format entire classes, specific elements in a class, or single elements across many classes. Exercise your creativity with different styles and always remember the goal is to improve your website's user experience (UX).

New Call-to-action

 css introduction

Originally published Feb 13, 2020 9:00:00 AM, updated February 18 2020