Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
- [Narrator] Hi, I'm Chris Convers, and in this episode, we'll add images to our webpage using pseudo-elements, allowing us to add extra graphical content to our page without adding image elements to our HTML. So if you'd like to follow along, download the exercise files, and we'll begin by opening the HTML file in a text editor. And so once you have the HTML file open, up in the head area, you'll see we have a link to style.css. We'll be opening this in a moment, and then inside of the body area, we have a gallery. The gallery's inside of an article element with a class of gallery.
And then each item is an image inside of a div container. And now the information that we need to add to the HTML is going to be for which items get which graphics. And I want to do this with a data attribute instead of a class since this is content related. So for the first div element, let's come in here and let's add a space before the greater than sign. Then let's type data-status equals two quotes and then inside of the quotes, we'll type new.
Then let's come in here and copy that. Let's come down to the div that encompasses the zipline graphic. Let's paste that. Let's scroll down, I'll add one to Munich, and another one to New York City. Then let's come up to Punta Cana. Let's paste this again, and let's change the word new to sale. Then I'll copy that, and let's paste that on to Rockefeller.
So with those in place, save your HTML. Let's go back to the exercise files and let's open up the style.css file in our text editor. And now in the CSS is where we're going to add the graphics using pseudo-elements. And we're going to be positioning the graphics inside of each one of the div containers for the gallery items. So what we want to do first is come down and find the .gallery space div rule. Let's come in here and add a position property of relative. This way, when we position the items inside of each one of those divs, they'll position in relation to their parent container.
Then let's come down to the bottom, let's start by adding our pseudo-element to all of those div elements. So we'll start by typing .gallery then space div and then a beginning and ending square bracket. This is our attribute selector. So we're going to look for the attribute on the divs. We're going to look for data-status. Then outside of the square brackets, two colons. Then type the word after. This will add our pseudo-element.
Let's hit a few returns. Now, typically we would define the content attribute first. But we're not going to do this because we're actually going to specify that based on the value of data-status. And we'll do that in just a moment. So right now what we want to do is set a display type of inline-block. On the next line, we'll set a position property. We'll set this to absolute. Next we'll set a top property of 15 pixels.
We'll set a left property of -7 pixels that way the graphic will hang over the left edge just a little bit. Next we'll set a width property. Set this to 95 pixels. And then finally a height property of 35 pixels. And now before we continue, I'll come up here and spell gallery properly. I need two l's here. And so now we have a pseudo-element inside of every one of the div elements inside of the .gallery class that has the data-status attribute.
So let's come in here, let's copy the name of this rule, the whole selector. Let's come down here to the bottom. Let's paste it. Let's add in our brackets. I'll hit a few returns. I'll scroll up here a little bit. And what we want to do here is test for data-status equaling new. So inside of the square brackets, we'll type equal two quotes, and then type in the word new. So if the data status attribute on a div equals new, we're going to come in here and set the content property.
So we'll type content colon space. Then we'll type URL, beginning and ending parentheses, semi-colon. Inside of the parentheses, we're going to point to the new .svg file in the images directory. So we'll type images/new.svg. With that in place, I'll hit save. And if you look at this in a browser, you'll now see that we have a new flag on each one of the gallery items that has a data-status of new. And now to add a second graphic for all of the items that are on sale, let's come back.
Let's copy that entire rule. Let's hit a few returns. Let's paste it. Let's change data-status equaling new to sale. And we'll change the graphic to sale.svg. Save your CSS, reload this in a browser, and we'll now see that the sale graphics are being applied to all of the div items with a data-status equaling sale. And now if you'd like to see another use for this technique, we use this to create a printer-friendly version of a webpage in Chapter seven of the course entitled Creating a Responsive Web Design, which is also available here in the library.
And so with that, I'll conclude this episode. And as always, thanks for watching.
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.