Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
Writing an @font-face declaration is only the first half in the process of using web fonts. Once you have the declaration defined, you can then reference the font's defined name throughout the rest of your styles. To utilize our ChunkFive font, we now need to find the font-family declarations that we wanted to add it to, and modify those font stacks. So I have the main.css file. Then you might want to open up the index.htm or explorers.htm as well to test a little bit later on. Okay, so what I am going to do first is I am going to find the items on the page that I want to reformat using our new font.
To do that, I am just going to test this in a browser so you guys can see what it is that we're going to be targeting. Explore our world your way, we're going to use ChunkFive for that, Tour Spotlight, I want to use ChunkFive for that and Explorer's Podcast, and then in our callouts, these headlines, Tour Spotlight and Monthly Specials, I want to use Chunk Five for that as well. So I am going to close this and go back into my CSS file. Now the first selector I need to find is on about line 116. It's the callOut h1. Those are the sidebar divs or those callOut divs and it's the heading for those guys.
So I always like to have my font declarations towards the top. It's just me. So right at the very top of this I am going to type in font-family and here I am going to build my own font stack. I am going to put the ChunkFiveRegular. Remember that is the name that we used, and at this point, maybe I am thinking hey! Chunk would have been better. After that I am going to follow that up with Georgia. So you need to give it an alternate font. Times and then serif. So that gives us some fallback content in case ChunkFive doesn't load for whatever reason.
It will use Georgia. All right, after that, I am going to type in font-weight. Since this is a headline, I want to do normal, so it's not bold because this is a very bold font. And then I'm going to do a little bit of letter spacing here. I am going to do 1 pixels worth of letter spacing, at a smaller font size. These Chunk Five can get kind of tight. So by doing 1 pixel worth of letter spacing that's at least give me a little bit of extra space between them. All right! Next I am going to scroll down and find the mainContent h1. It's on about line 312.
That is right there. mainContent h1. And you'll notice that we already have a font declaration there, so we're just going to modify this. So it's going to say normal 2.5em. That's fine. I am going to remove the Times New Roman. I've got a bunch of these already and I don't need that. But at the very front of this, I am going to do ChunkFiveRegular and then another comma. So exactly what we had before. As a matter of fact, you should get to a point where you can just copy and paste these declarations. Margins, I am going to change this up a little bit.
You can see right now, for top margin I have .5ems and nothing on sides and then the bottom is .25 ems. Well, what I am going to do is I am going to take that top margin and get rid of it as well. It all has to do with the weight and the spacing of the font. It's a little bit of a bigger font. Letter-spacing, instead of -1 pixels, I am going to actually add a pixel, so again space this out a little bit. I am also going to change the color of this. For color, I am going to do #193742. Now, why am I doing that? Well, the original color of this is black, and this is such a large font and so solid that if you leave it black, it just sort of dominates everything else.
So using the sort of blue accent color that's used elsewhere in the site will help tone it down a little bit. All right! The next thing I need to do is go to find the spotlight h2 selector. spotlight h2. And it's going to be a little further down the code. There it is, on line 700 at this point. Your line numbers may differ a little bit from mine depending upon how you like to format your CSS. Now, this doesn't have a font-family declaration, so again, what I am going to do is just go to do this right up top. I am going to do font-family: ChunkFiveRegular. Another value of copying and pasting this would be, if you get it right the first time, you don't have to worry about misspelling it again and having the font not work.
Sometimes you'll spend just a ton of time wondering why your font resource isn't downloading. You'll look through all your code and your font-family declaration and you'll find that you just left out an e or something as you declared it. So there is a lot of moving parts to this that go wrong. All right! After that, we're going to do font- weight and that's going to be normal. Again, we just don't want that to be bold or bolded, and then we'll do some letter-spacing here as well and we'll do 1 pixel's worth of letter spacing. So I am going to save this and I want to preview this in any of my browsers, and we're just fine.
You can see in Firefox, there is our custom font, Explore your world your way. As we get down, Monthly Specials has it, Tour Spotlight has it, and the Did You Know has it. I could also check it out in Safari to make sure it's working there. Indeed, it's working in Safari, and what about Opera? See if it's working in Opera. It is working in Opera. Cool! Finally, how about Internet Explorer? And indeed, it's working in Internet Explorer as well. Cool! Now, one problem here and let me point this out. If I go to one of my other pages like this Explorers page, the headline up here also gets it because it is a mainContent h1.
That is so small that it begins to close up and it's a little too small for that particular font. So I want to revert that back. So sometimes you have to be careful when writing these new selectors. You want to make sure that you're not overwhelming maybe some of the other ones. So in this case, I need to go and find the mainContent h1 page ID selector, because that is the one that is controlling that particular font and that is on about line 351 or so. It's going to be in that area. So I am just going to scroll up until I find it. There it is right there. And here again, I am just going to go up and do a font-family declaration here.
I am just going to use the regular Georgia font stack for this, so Georgia, Times New Roman, Times, and serif. So if I save that, test this in a browser again, and click on Explorers, I can see that now that's gone back to just being regular Georgia and it's a little bit more readable. So my main advice regarding the use of web fonts is to carefully consider how they're going to impact your design before you use them. Obviously, you're adding additional overhead to your site because these font resources need to be downloaded. Heavy usage of web fonts often can cause a noticeable delay in the font rendering as well, so there might be a little bit of a pause before the fonts are fully rendered.
Also, make sure you test your design in several browsers to ensure consistency in how your font renders. Keep in mind that you may have to make several subtle typographic adjustments in order to get the look and feel that you want for the font that you've chosen. Using web fonts is a great way to enhance your site design and offers exciting new capabilities for you in controlling your site's typography. You just want to make sure that you've planned carefully, so that you can execute it properly.
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.