How To Create Pseudo-classes With CSS

Introduction

In this tutorial, you will create CSS pseudo-classes and learn how and why to use them. You will also practice using the :hover pseudo-class that allows us to change the style of an element when the user’s cursor is hovering over it.

Pseudo-classes are CSS classes that are activated only during certain states. For example, the pseudo-class :hover can be used to change the appearance of an image or text element when the user’s cursor hovers over the element. The pseudo-class :visited is often used to change the color of a link after a user has clicked on it.

Pseudo-classes are declared in CSS by appending a : and the name of the pseudo-class to a tag, class, or ID selector. This pseudo-class will then be automatically applied to any HTML content assigned the tag, class, or ID of the pseudo-class. You do not need to add any extra code to an HTML element to make a pseudo-class work.

Prerequisites

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

Creating a Pseudo-class with CSS

Let’s now try a practical exercise to explore how pseudo-classes work. First, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

Erase everything in your styles.css file (if you added content from previous tutorials) and add the pseudo-class below to your document:

img:hover {
 border: 10px solid red;
}

In this code snippet, you have added the highlighted pseudo-class :hover to the <img> tag selector. Save the file and return to the index.html file and erase everything (except for the first line of code: <link rel="stylesheet" href="css/styles.css">). Then add the following snippet of HTML code to your index.html file:

<img src="https://css.sammy-codes.com/images/small-profile.jpeg">

Note that you are sourcing the image from an online location for convenience. You can also use your own image by specifying the file path as instructed in our tutorial How To Add Images To Your Webpage With HTML.

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

You should receive something like this:

The webpage should now display an image of Sammy the Shark. Try hovering your cursor over the image. A solid red border 10 pixels wide should appear around the image when your cursor moves over the image. Your browser automatically applies the pseudo-class :hover when your cursor interacts with an img element based on the rule that you added to styles.css.

You can use the :hover pseudo-class with text elements as well. If you’d like to try applying :hover to a text element, erase everything in your styles.css file and add the pseudo-class below to the document:

p:hover {
  font-size:100px;
  color:red;
}

Save the styles.css file. Return to the index.html file, erase everything (except for the first line of code: <link rel="stylesheet" href="css/styles.css">), and add the following code snippet:

<p>Some text</p>

Save your file and load it in the browser to check your results. You should receive a page with the text “Some text” that changes color and size when you hover your cursor over it:

Conclusion

In this tutorial you explored how and why to use pseudo-classes. You also experimented with applying them to text and image based HTML elements. You will use pseudo-classes to build the footer of the demonstration website if you follow the second half of this tutorial series.

In the next tutorial, you’ll learn about creating and styling the HTML <div> element, which can be used to structure the layout of a webpage.