Creating A CSS Class

The world of Cascading Style Sheets (CSS) can be intimidating to new web designers, but the creation of a CSS class doesn’t have to be complicated. This article will guide you through the process of creating your first CSS class, with a step-by-step tutorial, a code snippet, and a detailed explanation of how the code works.

Code Snippet - Sample CSS Class

    .myFirstClass {
        font-family: Arial, sans-serif;
        color: #333;
        background-color: #FFF;
    }

In this code snippet, we have created a CSS class called ‘myFirstClass’.

Code Explanation for Sample CSS Class

Let’s breakdown the code snippet provided above to understand the structure and syntax of creating a class in CSS.

The code starts with a dot(.) and is followed by the name of the class. The choice of naming your class is up to you; however, it’s best to keep it as intuitive and descriptive as possible to what styles the class holds.

In our snippet, we named the class as ‘myFirstClass’. Remember that CSS class names are case sensitive. Hence, ‘myFirstClass’ and ‘myfirstclass’ would be treated as different classes.

The code within the curly braces {} is where we define the styles for our class.

• The font-family: Arial, sans-serif; applies the Arial font to the elements assigned to the class. If Arial is not available, it defaults to any available sans-serif font.

• The color: #333; sets the color of the text to a dark grey.

• The background-color: #FFF; sets the background color of the element to white.

The class defined can be applied to any HTML element in your document, such as