Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.
Controlling the text formatting of a simple page doesn't require a tremendous amount of planning or execution. However, when controlling a site, especially a complex site, even the simplest text formatting requires thinking about how to apply the formatting efficiently, and in a way that doesn't change the formatting that you need for other elements. In this lab, you are going to return to the desolve.org site and focus on controlling the site's typography. You'll need to utilize many of the properties that you've learned in this chapter as well as put some thought into writing the most efficient selectors possible to achieve the desired formatting.
Let's take a look at the goals that we have for our text formatting lab. I'm in the 04_15 folder and I've opened up the index.htm along with the main.css file which can be found in the same directory in the _css file. Now if I preview this page in a browser just to kind of show you what's going on here, a lot of the formatting doesn't look very good at all. So typographically, we've got our work cut out for us here, so a lot of what happens in this particular page is very dependent upon the typography.
So I am going to jump back into our page. Now, from the previous two labs, you should be fairly familiar with the structure of the page and you should be fairly familiar with how the CSS is structured. So I am just going to jump into what our goals are for this particular lab and to find out what those goals are, I am going to switch over to the main.css file. And at the very top of the code, I've got our Lab instructions posted here. Once again, just like we did in the previous lab, you're going to have to figure out exactly kind of where to put these selectors.
This time I've given you some hints, I've got comments scattered throughout the CSS that say hey, put the link styling here, place the @ font-face rules here, that sort of thing. So you'll get some feedback as far as that goes. I'm more concerned at this point that you're focusing on the overall typographic strategy of the page. Now the very first thing that we are going to do for this particular file, we are going to be using web fonts for our site. So one of the things I would like you to do is go over to the assets folder, inside that you're going to find a text file that says fonts.txt and that has all of the font syntax that we are going to be using for this.
So I am not going to make you write this syntax from scratch. That wouldn't be exactly fair right now, would it? And then you are going to place that at the very top of our Global styles. Okay, so that's kind of a softball pitch, just to get you started. But you're also going to have to go through to make sure that you are using those new fonts as well and we'll talk more about that in just a moment. Now, our second goal that we need you to do is in the Global styles region, so remember, our styles are separated by sections, but in the Global styles region or section of our styles, I need you to write rules that are going to take the em element and the strong element and reset them so that they're once again displaying as italic and bold.
So why aren't they? Well, at the top of our styles, we have a very limited reset. This is one of my favorite resets to use because it's not overpowering and it's pretty easy to overwrite. But essentially, we're stripping all the margins, padding and border off of these elements, so if there is any default of those values, they are gone. We're using vertical line baseline to make sure that everything is aligned to its baseline property, even within things like tables and things like that. And then we have a font: inherit, and this is what's getting rid of our default styling for some of those elements like strong and em.
So it's not quite a scorched earth, CSS reset, but it does reset a lot of properties that you then have to go back through and toggle back on if you want them and that's one of the dangers of using a CSS reset. So again, the goal is in those Global styles regions that we were just in, I want you to follow that with a couple of rules that are going to reset em as displaying as italic and reset strong as bold. Then in the same section, I want you to find the body selector and I want you to modify that selector, modify the existing properties or add to the properties, so that the font family being used is Cantarell, the new font that we've added along with its proper font stack.
I want you to set the initial font size to the default size of the browser. So again, you have to remember how to do that. Set the line-height property so that all of the elements on the page have a line height that's 1.5 times the size of their font size. Now, when you do that you're going to have to remember you know do you use set that's using a relative unit of measurement or a multiple, you know how is this value going to inherit, those are the things that you need to think about. You're going to set the font-weight and the font-style to Normal and you are going to set the foreground color to ASH. Now every time I ask you to set a color, whether it would be a foreground or a background color and I use a color name, you can go right up here to the Color Guide and you can copy and paste these values, either the hexadecimal value or the RGB value.
Don't copy and paste the color name, because these are not reserved keywords. So copy and paste one of these; either the hexadecimal value or the RGB value, one of those two, either one of them will work just fine. The fourth objective for our lab is I want you in the Global styles to find the comment that indicates the location of the link style. So if you scroll down into our Global styles, this is kind of what you are looking for, a comment like that and that actually is the comments. So anytime I tell you, hey, go in the styles and look for a comment that says this, it's going to look something like that.
So I am going to go back up here again, let's read through this. So once you've found where you need to write those styles, what you need to do is write a couple of selectors that's going to strip out all of the text decoration for all our links. Set the color, the default color of our links to Burnt Orange, once again see the color guide up there, and set all of the color of the links when they are hovered over to the Pewter Blue and again, you can get that value from the color guide. So remember, this is supposed to be a very generic, very basic default styling for our links. So, keep that in mind as you write the selector for it.
In the header section of the styles and again, all of our styles are separated by sections so here is banner styles, you'd be looking for the header styles. So as you go through, you're going to look for that header section. All right, so let me go back up. But in the header section of styles, you want to modify the header h1 and h2 styles, so that the h1 has a font size that is 3.2 times its parent element's font, set the font-weight to bold, display the entire text in all caps, set the line height to an exact value of 165px and set the color to white.
That's going to give you some really dramatic formatting for that. For the h2 in the header, find that rule, set its font-style to italic. Set the font-weight to normal, set the font-size to 1.4 times its parent element, the color to white, all the letters to lowercase and increase the space between the letters by 0.1em. You also want to set the line height there to exactly 165 pixels as well. Now I know this might sound kind of confusing, you know the font size to 1.4 times its parent element, but trust me, if you were paying attention in the font-size movie, you kind of already know what I'm going for there.
Remember, it's calculating this based on its parent element, so we are using a relative unit of measurement there, okay. So let's go down to our last two objectives and the seventh one is Find the #mainNav a selector that's going to target every link inside the main navigation. Modify the rule so that the text displays an all caps and the text is aligned to the center. You then need to find the #mainNav a em selector which is just below that and modify it, so that the text appears in all lowercase.
Finally, go down in your styles and find the #footer a selector, you want to modify that selector so that the link text is aligned vertically with the background image (the bird). So you want it centered vertically with that bird. Now if you want a hint on this one, examine the height of that element for a clue on how to accomplish that. So okay, I know there's a lot going on there. So I am just going to leave it right at that, I am not going to make you do anything else. But I want to encourage you. The reason I'm giving you all these tasks is I want you to really pay attention to how the remaining formatting of the rest of your document is set as well.
Look into each section, you know like the article and the side regions and see how the text in each of the elements there is formatted. By setting that base formatting on the body tag, we can then treat every single region as an individual area and go ahead and tweak the formatting as needed. Now for the most part, styling is defining the relationship between the various element types. Care has been taken when I initially designed this to make sure that the formatting between the regions is consistent and it works together harmoniously. So really take a look at the styling and see if you can pick up on that. All right.
There you go. Have fun working on the lab and if you want to compare your solutions to mine, be sure to go ahead and watch the solutions movie as soon as you're done working on your lab.
There are currently no FAQs about CSS: Core Concepts.
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.