Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In our final lab you're going to be practicing controlling site-wide styles and writing some basic styling for our reference site. Inside the 06_07 directory, I've opened up everything. You're going to be working with the files that you've been used to working with throughout our site: the intro, links, next, reference, and syntax. But you're also going to be, this time, editing the styles.css file as well. All right, so the first thing that you'll need to do is link external style sheet site-wide, so this is going to apply to all of our pages. And what you'll need to do is in the head of each page, use the link element to link to the styles.css file.
Be sure to remember to define the styles.css relationship to the style sheet itself. And if you go into each one of these pages, you'll find a comment right here in the head where it says link the styles.css as a style sheet to this file. You'll see that in every single one of them so you know where to place that, just underneath it. And if you do it properly on one, you can just copy and paste it on the others. Now the next step is going to be to set the background color of the pages themselves, and this is going to apply to your styles.css.
Here you're going to go to the styles.css file, you're going to find this rule--so I'm telling you which selector look for, in this case the html, body. So that's the selector that applies to both the html and the body tag. And I want you to set its background color to this value. Now, to make life a little bit easier for you so that you don't have to keep bouncing back and forth, you'll notice if you go over to styles.css, I actually have comments put in place right above the rule that you're going to be working with that tell you kind of what to do there.
Now if you don't remember how to set that background property, you can go back and watch the previous exercises and you can pause it and look at the syntax for that. And then this is the value you're going to use for the color. Next, you're going to float some images. So I'm going to throw a couple of properties at you guys that we did not use in the previous exercises, and that's really just to sort of test the way CSS syntax is written, because if you understand the syntax and you understand how to write that syntax. you can use new properties that you've never seen before because you know where the property is going to go and you know where the value is going to go, and I'm telling you what the property is going to be and I'm also telling you what the value is going to be.
So in the styles.css, you're going to find two selectors: the .flowRight and .flowLeft. So these are class selectors. Anytime you see that period in front of a selector, that means it applies to the class attribute. So you're going to find those two class selectors there about line 98 or so. You're going to set the float property for flowRight to right, and then you're going to set the float property for flowLeft to left. Now, what that's going to do is control how the text wraps around anything with those two classes applied to it.
It's going to really control the images and how the text wraps around the images. So if I go to styles.css, scroll down to about line 98 or so, you can see that here are the two selectors right there, and here are the instructions that you have right here in this comment. Next, you're going to do some table styling. Again, we're going to go to styles.css. You're going to find the td,th selector around line 80 or so. What you're going to do here is you're going to set the padding property for that rule to 10 pixels.
What that's going to do is it's going to replace whatever attribute was passed to table with the cellpadding value. You're also going to find the center class selector. That was that when we actually applied in the earlier table exercise, which is around line 85, and you're going to set the text alignment property to center. So you may have to go back to that movie and see exactly how text alignment is written out as a property, but you want to set text alignment to center. So to find both of those, I'll go over to styles, and here we go. Set the padding of table headers and table cells to 10 pixels.
Set the text alignment of this selector to center. That's going to do it for your step-by-step instructions, but I want to challenge you to do something else. What I want you to do is go through the style sheet itself. You know, just start reading through it. It looks like there's a lot here, but I can tell you this is a very simple style sheet. It's only like 106 lines or so, and I have style sheets that are well over a couple of thousand lines. But what I want you to do is try to match up the selector that you see here with the element or elements that it's affecting on the page.
Once you do that, take a look at the styling. See if you can figure out what's happening with the properties and the values being passed to them and how it's affecting it visually. It's a really nice way of kind of connecting the dots, if you will, about to your CSS. Now first, work carefully; save your site as you modify your styles, because that's one of the bad things about styles: if you make a syntax error in your styles, it can effect all the styles underneath it. So if you're not previewing them as you go, you might miss a step. Then it's going to take a long time to find out where the error is.
Go ahead to your lab and I'll see you in our solutions movie.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.