Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
To find out just how useful attribute selectors can be, we'll add some styling to the Explore California contact page, focusing on how attribute selectors allow us to add visual styling cues without adding unnecessary classes or markup. Now I have the contact.htm file opened here in Chrome and you can find this in the 02_04 folder in your Exercise Files. Now we are going to target one thing at a time. So the first thing I want to target here is the tour brochure link.
That actually is going to allow our users to download a PDF file and I'd really like them to know that this link is going to open a PDF for them. That way they could choose whether they wanted to click on it or not, they at least know what they're going to be getting. So I'm going to switch back to my code editor and again, I have the same file opened here, contact.htm from the 02_04 folder. I am also going up to open up the main.css, which can be found in the _css directory of the same folder. Since I'm using Dreamweaver, I can switch back and forth between the two of them without having to open up separately, which is one of the things I really like about Dreamweaver actually.
Okay, the first thing I am going to do is scroll down to about line 88 in my code and this is where I have some just basic link styling in my styles and I'm going to add that to that selector. It's going to target that one specific link and really any link that's going to be linking to a PDF file. I am going to add it right there. So I am just going to type in a, and then do an attribute selector which is going to require the bracket notation and I am going to type href. So I am looking for the href attribute. Now I wanted to do $=, because I only want to target a suffix, so ending in is essentially what I'm doing here, and in quotation marks I'm going to type in .pdf.
So again, I am looking for any href attribute that ends in .pdf. Now I'm going to close that. Open up my brackets and then close as little curly braces. And inside that I am just going to add a little of padding, so I am going to do padding-right of about 50 pixels and I am going to add a background image. So that's why I am adding a little bit of padding to right-hand side of this, so that I can have this PDF icon that I have done show up to the right side of that. So here we'll just do a background and this background is going to have a URL of ../_images/pdf_icon.gif.
So that's an image that's already in the _images directory, and we're going to give it no-repeat so that it only shows up once. And I'm going to align it to the right and to the vertical center. So that way it's going to show up on the right-hand side where our padding is, and it should be vertically centered with the inline box. So I am going to go ahead and save that and then preview this again in Chrome and you can see now right beside tour brochures we get that nice little PDF icon to let people know that hey, when you are going to be downloading this, you're going to be downloading a PDF file.
And of course, that didn't affect any of the other links. It only affects that one because that one had a match to the attribute. Cool. Now I would also like people to know when they're going to click on a link that's going to take them away from our site. You can see these links are linking us further into our site. However, these links down here are actually taking us out to Wikipedia, where you can learn more about this area. So I would like to let people know that they are going to be navigating away from my site. And of course, we're going to do that by using an attribute selector. So here I am back in my code and again just below the selector that I just wrote I am going to write another one.
So here I am going to say a href^="http://" and then my bracket. So again, what that is doing is it's saying, hey, any attribute selector that starts with this, so here we did ends with and here we did starts with. All right, and once again, we are going to do something very similar here. Oh and by the way, I really only want this to show up when somebody hovers over it, because if I haven't show up in my default styling then that little icon is going to show up all the time.
It could break some of my text flowing, so maybe just when somebody hovers over it. So notice that with an attribute selector you can attach pseudo class selectors to them, which is cool. So we'll just say hover and we're going to do a very similar selector. So padding-right: 20 pixels and then we are going to do a background again here, we'll do url and again, this is going to be ../_images/external_link.gif.
And again here it's going be no-repeat right center. So it's just like the last one. All right, I am going to save this and again I am going to back and preview that in my browser. So now when I hover over these, notice that I'm getting a little icon that I don't get when I hover over my other links. Again, it's letting me know hey, this is going to go outside of your site, so it sort of uses that universal external link icon. Okay, the next thing I want to do is affect this styling. You can see all of these icons are floating to the left of the name of the tour, the package itself, and the price of it.
That's fine, but I want to show you kind of how this being done currently and how attribute selectors could maybe make that a little easier. I'm going to switch back to my code. So here I am back in the CSS and I am on about line 942 in my CSS code. You can see that we are targeting images inside the specials div tag, which is inside the sidebar. Now that's fine, but what happens if I have other images in a specials sidebar div tag? That could happen in my site. Well, they are all going to get same styling and maybe I don't want those floated.
Maybe I only want them floated when they are going to be these little icons. Well if I switch to my source code I can see that I've done something that can really help us out here. In my alt tags for these images, notice that the word icon is used in each one of these. So California Calm icon, From desert to sea icon, Backpack Cali icon. So the word icon is added to the alt tag of each one of those. It's descriptive but it also gives me a hook for use for my attribute styling. So I am going to go back to my CSS and I am going to modify this selector. So what I am going to do is I am just going to change this.
I am going to add the attribute to it, alt*="icon". So again, what this is going to do is it's going to basically say hey, if you see an image tag that has an alt attribute that contains the word icon anywhere in it, go ahead and target it. So that ways it's going to limit it to just those. Now if I save this and again preview this in Chrome, I don't see any visual change here, but if I place another image inside that specials div tag it's not going to get the same styling, so I have limited it to just those icons, so that's really cool.
One more thing. Notice the forms that I have got here, the input tags really aren't the width that I want them to be. I'd like them to be a little bit wider. Now in the past we've done that by applying classes and then targeting the width via the class, but I don't have to do that. Remember these input tags have a specific attribute called type and for text fields the type is equal to text. So now we know what we know about attribute selectors, we can target them specifically. Again, I'm going to go back in the code. So back in my CSS at about line 835 you'll find the styles for the contact form.
That's where we want to add this. So I am just going to place my cursor at the very top of the contact form styles, and I am going ahead and add a new selector. So #mainContent input, and then I am going to use an attribute selector here. I am going to say type="text". So here I'm being very explicit. I am saying only if the input form field has a type attribute that is equal to text and here we're just going to go ahead and give those guys a width of 250 pixels.
I'll go ahead and save that and if I test this in my browser, I can see that my text fields are all now the exact width that I wanted them to be. Really cool. Now aside from the versatility that we seen, that attribute selectors give us here, the best thing about them is their widespread support. And in fact unless you're having a target IE6 specifically, there's really nothing to prevent you from adding attribute selectors to your own styles. Have fun with them. Keep that in mind when you're planning your site design to see where they might fit in your workflow and as with anything you do, you want to test them thoroughly as you begin to use them.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.