Join Chris Converse for an in-depth discussion in this video Indicate download file types, part of Creating Web Media.
- [Chris] Hi, this is Chris Converse, and in this episode we'll use CSS to determine the type of file available for download, then graphically represent that to our users. So if you'd like to follow along with me, download the exercise files, and let's begin by opening the HTML file in a text editor. And so in the HTML file, we have a link to the style.css file, which we'll be opening in a moment. And down inside of the body area, we have this series of anchor links. Each anchor link has a class of "download", and each one also links to a specific file.
So in this case, this one links to file.pdf, .xls, and so forth. What we're going to be doing is using CSS to determine what file types are being linked to, so we can then apply a graphic to the links. So at this point, let's go back to the exercise files. Let's find style.css. Let's open this in our text editor. Let's scroll down a little bit. And I've already set up a rule that will target all of the anchor links with a class of "download". And by assigning all of these properties, we get the button shapes that we see over here in the browser.
Now the first thing that we'll do inside of this rule is give ourselves a little bit of room on the left side of the links, so we can put in the graphic. So down here at the bottom, for padding, let's come down here and change the padding-left property from 20 to 52. So again, that'll give us a little bit more room on the left-hand side here. Now let's come down, after the download:hover, and let's create a few more rules to specifically look for different file types.
So we'll start with a.download. Then we're going to use two square brackets so we can use the attribute selector of CSS, then we'll type href, then we're going to type a dollar sign, then equals, then two quotes, then inside of the quotes we'll put "pdf". So the href is looking for the attribute name. The dollar sign here with the equals is looking for the ending value of that href, and then we're putting in "pdf" here.
So anything that points to a file name ending in "pdf" will be targeted by this rule. So outside of the square brackets, let's put in our curly brackets. Let's come in here and add a background-image property, and we're going to set that to url(); Then we're going to point to images/file_pdf.svg.
Save our file, go back to the browser, and when we hit reload, we'll now see that this anchor link, which is pointing to a pdf file is now getting the pdf image assigned to its background. So with the first one in place, come back to the CSS. I'm going to duplicate this four times. For the second item, let's come in here and change this to "xls". Then inside of the URL, we'll set this to xls.svg.
For the third item, let's change this to "doc". Fourth item, we'll set this to "zip". And for the fifth item, we'll set this to "mp4". And then for the background images, we'll set up the same properties. So doc.svg, and then zip.svg, and then finally mp4.svg. And so with those in place, save your CSS. Let's go back to the browser and we can now see that each corresponding graphic is being associated to the link that references that file type. So with an attribute selector in CSS that looks for the ending characters in the URL, we're able to reference different graphics in our web page, based simply on the name of our media files.
And so with that, I'll conclude this episode. And as always, thanks for watching.