Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie, we'll look at the CSS for the Rock Paper Scissors website, and so the first thing we're going to do is we're going to load up this page here, scissors.html, from the chapter 17 folder in our exercise files. I am just going to open that in the text editor, and you will notice at the top here we have these two link tags: one of them is opening the main.css, and one of the is opening the rps.css. The main.css file is exactly the same as we've been using throughout this course. Let's take a moment and look at it. Open that in our text editor here.
That's main.css from the same folder. And this is really just a set of resets. So the first thing we do is up here at the top, list all of these different selectors for a lot of different elements. And we just set a bunch of margins for them and defaults, and then we set up the body and some more margins for some of these other elements and default font sizes for the headers and default font family for a number of elements. And so it's really just a reset. And a lot of my sites, I'll design them in this way where I will have one reset for the entire site and then I will have other CSS files for other purposes, and it helps to organize everything and to make it easy to manage in the long run.
Now, you will notice here we also have this rps.css, and this is where the specific styling is done for this site. And so I've set a different background-color. I've set line-heights and font-families and colors for text and things, all here at the top. And so if we come back over here to the scissors file, you see there is the background. There's some of the text coloring. These are the things that are specific to this site, and my reset is being overriden here because in the source file, you notice the reset is first, and then is the specific CSS.
So specific CSS is cascading on top of the reset. It's changing those defaults. But it's using them as a basis, and that makes it actually really convenient. Here you notice that I am floating my image right. I am formatting it. And so that's this image here, and it's got this border, and it's got a little bit of padding in there, and that's all set right there. The figure element is actually not used in this incarnation of the site, so we'll just go right past that. Now we have the formatting for the navigation bar, and this was described in the chapter on lists.
In the HTML, it's just this simple unordered list element with a number of list items that have the links in them, and it's all inside of this nav block. And so we format the nav element to have a width all the way across the screen, and so that's this brown bar all the way across the screen there. And there is the background color that makes it that color, and it's hiding everything. And then the unordered list is put in block mode, and list-style: none and it's a width of 600 pixels and it's a margin of 0 and auto, and that's actually how you center something in CSS, and so you see that it's centered here on the page.
And as I change the width of the viewport, that remains centered. And then we set our margin and padding for our list elements and then finally, the bulk of the formatting is done right here in the a element. So this is adescendent selector from top-menu ul li and a. And if we look in our HTML, here is the id="top-menu." There's the ul and the li and the a element. And so each of these a elements have that descendent property, and so they are covered by this descendent selector.
So it sets them into Block mode, and it makes them float left so that they stack next to each other left, left, left, left. And that makes this one stack at the left side of the container. Then this one stacks right up against it to its left side, and these stack this way by having them all have float left like that. Then they're given dimensions. They are given margins. They are given the font family, text-align: center within their little blocks. That way these underlines, which are actually a border-bottom, the text actually centers on top of that.
And that's because we have this text-align: center. The background-color to match the top-menu element and text-decoration: none because that obviously defaults to underlining. We don't want that because we're using the bottom border there to indicate. And we set the color of the text, and the color of the bottom border. You notice that the bottom border color matches again the background color, so it actually disappears. And when we hover over, we have our pseudo selector for hover, and that bottom border color gets changed to the same color as the text, and so that gives it this nice effect.
So that's our nav element. The header element, that's this part right here. We have our h1, which its text properties are getting set up above, and the h2 text properties are getting set up above. The margin-top is just making it flush up here. If we get rid of that margin-top, just delete this, you'll see that we lose that flush up at the top here and we get this brown ugliness. And so we put that in, and that allows it to be flush up with the element above it. It have a descendent selector for the paragraph so that we can format this do not run with these, and then we have our main div.
Our main div is right here, and it goes all the way to right above the footer. That's this one here. And all of this is inside of this main div and right there below the nav element. And the whole point of it is to give it a background color and center it on the page. So we set a width, we set its margin: 0 auto, which we know will center it on the page, and we give it this background-color. And so that is this cream color here that goes all the way down to the footer. Next, we have our article element, and you notice we're also using two selectors here--section.buy and article--and section.buy that's on our Buy page and that's this section right here.
We're just sharing its formatting because it's convenient. We wanted it formatted exactly the same. And so it has a width, it has a margin to the right, and it floats to left, and that allows this aside to float to the right of it. And then we format some of the elements inside it with descendent selectors, the h1, the p, and the mark. We're not using mark, but that's for highlighting. And then we format the aside. The aside floats to the right. We had it floating to left in other parts of this course, and it would make it stack, but when we want to have more than one item to the left of it, having it float to the right allows that to happen.
And so on a lot of these pages, we have different sections to left and we want that to float in that way. Then we have our formatting for inside of it with some descendent selectors-- font-size, margins, fonts-- and then we format our footer. Our footer has this dark gray background, and that's seen down here. And the paragraph inside of it has a lighter color, not quite white, so we see that we have that lighter gray color of the text. And its font size is smaller and its text aligned to the center, and it has some up and down padding.
The first number here is the top and bottom, the second number here is the right and left, and so that's giving it 10 pixels above and below so that the text looks like nice there. Now, we do some formatting for details and summary, and that's not used in this example. And then we have our media formatting, and this is really just margins for that div. And so if we look at one of the pages that has that, here's paper, we'll bring up papers.html and here we have the div media. That's just giving it some top and left margins.
So when we see this on the page, there is a little bit of margin here, and it pulls it away from the side there, because you remember in our reset, it gave it a margin of 0. If we look back up at our reset, it's listed in here audio and video, and they have a margin of 0, padding of 0. So, this helps us to get that away from the side margin there and from what's above it, makes it look nicer there on the page. Then we have some formatting for our forms, just to give them the sans-serif font, and to give a font to the inside of these input and text area elements.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 102019 Viewers
61 Video lessons · 88736 Viewers
71 Video lessons · 72559 Viewers
56 Video lessons · 104200 Viewers
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.