Tutorial

How To Create Pseudo-classes With CSS

Published on October 13, 2020

Senior Manager, DevEd

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:

styles.css
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:

index.html
<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:

Gif of cursor hovering over image to make red border appear

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:

styles.css
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:

index.html
<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:

Gif of cursor hovering over text to make it have larger size and red color

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


Tutorial Series: How To Build a Website With CSS

This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

About the authors
Default avatar

Senior Manager, DevEd

Open source advocate and lover of education, culture, and community.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.