(upbeat music) Welcome back to Knowledge City's course on Cascading Style Sheets. I'm Cliff Brozo, I'm your instructor. And today we're going to talk about designing, using a grid. We'll figure out how to use containers, we'll play around with the layout and we'll figure out what items to put in what area of the grid that we create. We're also going to take a look at some formatting to create pages that have multiple columns. We'll play around with some fancy looking menu and we'll create articles and asides and style those. Let's take a look at what it's going to look like. We'll create a page that has three uneven columns. Some of the columns will be smaller, some larger but we'll make them all different. We'll use a container and inside the container, we'll put some text and some pictures. We'll vary the size of the containers and create articles in the asides and make a three column layout. We'll use a grid container and put lots of images into our grid. Are you ready? I am. Let's go. Once again, we're using Adam as our design software. And in here, we're going to look at our first page, dealing with a container. This blue line that you see is the actual container. And anything that I put inside here can be stylized differently than the outside of the container. Now you can choose to put in that blue line or any color or not have a line at all. So no one knows that you're dealing inside the container. All you really need, is to set up a content area in CSS and then call on it in your HTML. So in this image, on the right side of your screen, I've got an area called "content" and the width of the content is 80% and left and right margins are set automatically. So, my container is 80% of the page with 10% on the left and 10% on the right. I use that container by calling it in a division, say class equal content. I'm able to resize this and still maintain my 80% content window. And if it gets big or small, the text automatically resizes properly. Let's take a look at the CSS that allows us to do that. In my container CSS, my body tag has the background of lemon chiffon, some margins, the font size and I've picked a font called MV Boli. My content class sets the width at 80%, and what you're seeing here is the same thing that you see in the picture that's included in the webpage. The border is this Dodger blue line. And what I'm doing to do is take this out so you can see exactly what the container looks like with the border which is where it is now and without the border. So I'll delete that line, I'll save the CSS and I've got the page again without the border. Now, there's no right answer or wrong answer as to whether you should or should not show a border. Some people love it, some people don't, let's put it back in and we've got a blue line around our container. I've used a border radius of 25 pixels to give me a curved corner and I've put some panning in just to move the text away from the edge of the corner. We've developed a website, dealing with containers. We'll show you how to create three columns. We'll take a look at a town in New Hampshire, and another town in New Hampshire, the auto road in New Hampshire, and then we'll discuss some CSS comments. We'll move on to our three column layout. And before we click on this button, I'd like to point out that the buttons are stylized with some fancy CSS code. Let's take a look at that code. Down at the bottom of our page is the navigation section for CSS. I've created a background color for my navigation bar of Dodger blue. That's the blue that you see here. I've hidden any overflows to avoid overlapping on images, and I've rounded the corners once again. My links are floating on the left. They are in the lemon chiffon color which matches the background and that's a neat trick to do. Whatever color you make your box for navigation, use the contrasting color. That's the background page. I'm aligning the text in the center. My text decoration of none removes the underlining. And remember, this is a hypertext link. So it removes the underlining, and I put some padding to the left and the right of each word. Here's the fancy part. When I hover over the link, I'm flipping the color and the background color changing from Dodger blue to lemon chiffon. Where I had Dodger blue as the background, now Dodger blue is the color. Lemon chiffon was the color, now lemon chiffon is the background and to make the button look like it has rounded corners as well, I'll put a border radius. When I hover over each of the links, the text changes to the background color and it gives the illusion of a button.
