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.
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.
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:
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.
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.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.