How To Use Classes In Css

Introduction

In this tutorial, you will create a CSS class selector, which will allow y'all to utilise CSS rules only to HTML elements that are assigned the class. CSS grade selectors are useful when you desire to apply different style rules for unlike instances of the same HTML chemical element.

Prerequisites

To follow this tutorial, make sure you have prepare up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up Yous CSS and HTML Practice Project.

How CSS Form Selectors Work

A CSS form selector allows yous to assign style rules to HTML elements that you designate with that class rather than all instances of a certain element. Unlike HTML elements (such as <p>, <h1> or <img>), whose names are predetermined, class names are chosen by the programmer when they create the class. Class names are always preceded by a ., which can help you distinguish between tag selectors and class selectors in CSS files.

A CSS rule for a class selector is written in the same fashion as a rule for a tag selector, with the exception of the . prepended to the form proper noun:

                      .red-text            {            color            :            red;            }

To use a class when adding HTML content to your webpage, you must specify it in the opening tag of an HTML chemical element using the class attribute in your HTML certificate similar and then:

                                                    <h1                              form                                  =                  ".cherry-red-text                                            "                            >            Content.                              </chemical element              >

Creating a CSS Course Using a Class Selector

Let'southward begin exploring CSS classes in practise. Erase everything in your styles.css file and add the post-obit lawmaking snippet to specify a rule for the grade red-text:

styles.css

                      .red-text            {            color            :            red;            }

Afterwards adding the code snippet to your styles.css file, save the file.

Return to your index.html and erase everything but the showtime line of code <link rel="stylesheet" href="css/styles.css"> that links to your CSS stylesheet. Then add the following HTML code snippet:

index.html

                                                    <p                              class                                  =                  "red-text                                            "                            >            Hither is the first sample of paragraph text.                              </p              >

Note that the class proper name is not prepended here with a . as it is when being used as a selector for a CSS dominion. Your entire index.html file should have the following contents:

alphabetize.html

          . . .                                          <link              rel                              =                "stylesheet"                            href                              =                "css/styles.css"                            >                        <p class="red-text" Here is the starting time sample of paragraph text.                              </p              >

In this code snippet you have added text using the HTML <p> tag. Only you have also specified the reddish-text grade by adding the highlighted class attribute class="ruby-text" inside the opening HTML tag.

Save your alphabetize.html file and load it in the browser. (For instructions on loading an HTML file, delight visit our tutorial step How To View An Offline HTML File In Your Browser).

Y'all should receive a webpage with scarlet text:

Webpage output with red paragraph text

Let's add an additional CSS course to explore styling different pieces of <p> text content with dissimilar classes. Add the following code snippet to your styles.css file (after your CSS rule for "carmine-text"):

styles.css

                      .xanthous-background-text            {            background-colour            :            yellow;            }

This CSS rule declares that the grade yellow-background-text is assigned the yellow value for the background-colour property. Whatever HTML text element assigned this class volition have a yellow background. Annotation that the utilise of the give-and-take textin the class xanthous-background-*text* is for human readability purposes just. Y'all do non need to include the word text in your class names for classes assigned to HTML text.

To apply this new CSS grade, return to your index.html file and add the following line of code to the bottom:

index.html

                                                    <p              class                              =                "yellow-background-text"                            >                        Here is the second sample of paragraph text.                              <p              >

In this code snippet, you have added some text content with the <p> element and specified the xanthous-groundwork-text grade. Relieve the file and reload it in your browser. You lot should have a webpage with two different sentences, the starting time one ruddy and the second one with a yellowish groundwork:

Webpage with text styled by two classes

Annotation that y'all can add more than one course to an HTML tag. Attempt adding both classes to a single text chemical element by adding the following line to your index.html file:

index.html

                                                    <p              course                              =                "ruby-text yellow-groundwork-text"                            >            Here is a 3rd sample of text.                              </p              >

Note that the class names are only separated by a space. Relieve the file and reload information technology in the browser. You should receive something like this:

IWebpage with text styled by three classes

Your 3rd line of text should now be styled according to the property values set in the reddish-text course and the yellow-background-text form and have a cherry font and xanthous background.

Adding CSS Classes to Images

CSS classes tin also be applied to other HTML elements, such as images. To explore using CSS classes for images, erase the content in your styles.css file and add the post-obit lawmaking snippet:

styles.css

                      .black-img            {            border            :            5px dotted blackness;            border-radius            :            10%;            }            .yellow-img            {            border            :            25px solid yellow;            border-radius            :            50%;            }            .red-img            {            border            :            15px double reddish;            }

Hither yous have created CSS rules for three different classes that tin can be applied to the HTML <img> tag. Before you lot motion on, allow's briefly study what we've declared in each ruleset:

The first CSS rule declares that the class black-img should have a black, dotted border five pixels wide and a edge-radius sized at ten%, which gives the element rounded corners.
The second CSS dominion declares that the class yellow-img should have a yellow, solid border 25 pixels wide and a border-radius sized at 50%, which gives the chemical element a circular shape.
The 3rd CSS rule declares that the course red-img should have a red, double border 15 pixels wide. You have not set a border-radius, then the border will adjust to the element'south shape.

Save the styles.css file. Then erase everything from your index.html file (except for the outset line of code: <link rel="stylesheet" href="css/styles.css">) and add the following code snippet:

alphabetize.html

                                                    <img              src                              =                "https://css.sammy-codes.com/images/modest-profile.jpeg"                            class                              =                "black-img"                            >                                                      <img              src                              =                "https://css.sammy-codes.com/images/small-contour.jpeg"                            class                              =                "yellow-img"                            >                                                      <img              src                              =                "https://css.sammy-codes.com/images/small-profile.jpeg"                            class                              =                "crimson-img"                            >

Each of these three lines of HTML code add an image to the HTML document and assign it ane of the three classes you just added to the styles.css file. Note that you are sourcing the image from an online location. You can also apply your own image past specifying the file path as instructed in our tutorial How To Add Images To Your Webpage With HTML.

Salve your index.html file and load information technology in the browser. You should receive something like this:

Webpage with images styled with three classes

Your webpage should at present display three images, each styled with the different specifications of their assigned form.

To continue exploring CSS classes, trying creating new classes with different rulesets and applying them to unlike types of HTML content. Note that properties and values specified in class declaration blocks will only work on elements that they are intended for. For instance, a font-color declaration will not change the color of an prototype border. As well, a height declaration will not change the size of the font.

Conclusion

You lot accept now explored how to create classes, assign them specific belongings values, and apply them to text and prototype content. You will return to using classes when y'all brainstorm building the website in the second half of this tutorial serial.

In the adjacent tutorial, you will create CSS ID selectors, which work similarly as class selectors with the exception of some unique features.