Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I hope you had fun working on the CSS Lab. We're going to go ahead and take a look at the completed lab, and you can compare your files with the files from the finished files folder. The first thing I'm doing here is I'm just kind of opening up the finished files in the browser so you can kind of see how the styling looks and you can compare your styling with mine. You can probably tell if something isn't working right or if some of the styling is a little off; it's pretty easy to tell usually as you start testing them. So just go through them, look in the browser, and make sure everything looks okay. All right! I'm going to go back into the code.
Obviously, here are our instructions, but the first thing I tasked you to do is to go in and link the external style sheets to all of these files. So in the head of the document you should have this link tag right here that says link href="styles.css," because they're in the same directory, and it has the relationship attribute of stylesheet, and so that should be consistent all the way through. Now, if I go to the styles.css-- I'm just going to go through this in order. The first one was to set the background color of the html and body to this RGB value.
Now, to do that I used the background shorthand notation; you guys may have come in and done background-color. That would have worked just fine. Again, you just want to make sure that all of your properties have the colon between the property and the value that you're setting, and then a semicolon at the end of the value. So it's really important that that syntax be the same. And there is the RGB value that we wanted to pass along. Now, the second thing that we were doing was floating our images. So again, if I go to my styles and I scroll down towards the bottom, right down here I've set the flowRight class selector to right and flowLeft to left.
Let me turn Word Wrap on so you can read that. There we go. So in the flowRight I use the float property and I set it to the right. So again, even if you've never heard of a property before, you just have to remember the property is going to left, there is a colon between them, value goes on the right, and there's a semicolon. So we have right here for float: right, we have left for float: left, and what's that doing for us actually in our site? Well, if I go to the Intro page, it is floating this image to the right and the text is wrapping around it, and it's floating this image to the left and the text is wrapping around it.
Now, if I go back into my styles, our next step was to set the table styling. So if I go up from that just a little bit, we're setting the padding of the tables to 10 pixels. There it is. And we're setting text- alignment to center and there it is. Now, you may have had to go back and watch that movie again because I didn't stress it was text-align, but there it is. And again, that value should be center. If I go back and take a look at the reference page, what this is changing is the table down here in the bottom, it's giving us a little bit of whitespace all around the edges, and then this column right here, all of those elements are now centered within that table cell, which is what the text-alignment is doing for us.
Now, if your results didn't match mine, don't get frustrated. CSS is a huge subject. I mean, we literally have dozens of courses on CSS in the lynda.com online training library. So the purpose of this chapter is simply to introduce you to CSS and how it works with HTML. Being able to write CSS is a critical skill for any web designer, so be sure to dedicate time to learning it as you seek to become more proficient at web design.
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.