(lively music) Welcome to KnowledgeCity's course on Intermediate Cascading Style Sheets. My name's Cliff Brozo. I'm your professor and today we're going to explore laying out pages with Cascading Style Sheets. We'll look at how to do some sticky headings. We'll figure out how to create a navigation bar. We'll talk about different areas of the page, the content window, the asides, the main window, footers, the headers. Put all of that stuff on the page together. We'll talk about articles and we'll see how to format the entire page so that it can look its best. Let's get started. The first thing that we should point out is that we are going to be using software called Atom, A-T-O-M, and you can find it and download it at atom.io. The reason why we're using Atom is it doesn't really matter whether you've got a Windows machine or an Apple machine, Atom works on both and it's going to allow us to see code and results at the same time because it has a live preview feature. So what you're looking at is a webpage that we've created to illustrate the lessons that we're going to learn in this session. First, we're going to talk about sticky headers. And by sticky headers, we mean a header that doesn't move when you scroll. So if I scroll down, the screen content will change but the header will stay where it's supposed to be. What this allows us to do is give the user a navigation that stays on the page no matter where they're looking on the page. The other thing that we just looked at is the navigation bar and there are a ton of different ways of doing navigation. In this case, all we did was we swapped some colors when the user hovers the mouse pointer over that particular item. Let's take a look at the code that accomplishes this page. The HTML code is pretty straightforward. I've got a link to my style sheet that is in a CSS folder. Then I start with my body and I create a header section that contains a division that governs how the sticky header is going to look and I create a class called stick_top. And also governs the navigation section. So stick_top is something that we declare inside of our CSS program and we'll look at that in a second. But that's why when we write the code Sticky Headers, we see the blue text here. We can see that there is some underlining. We have a orange background. All of that stuff is handled in the CSS file. As we move down the page, we get to our MAIN section and the MAIN section contains all of the content that we're going to be putting on the page. And once again, I declare a class in CSS called main_content that's formatting this particular area. I start off with a H1. That just puts a heading on the page, followed by a paragraph of text that hopefully is somewhat interesting to read. Then I create something called an aside and if you've never used asides before, they're a nice way to draw your attention to an area of the screen. Now, I've formatted this aside to include a nice green bar that has a fade to it. I've put the text in italics and I've set the width, and again, we'll see how that's done in the CSS code. Then I continue with my topic and talk about another paragraph and then I come to something called an article where the text is being shown in a specially formatted area. In this case, I'm looking at baseball scores. The information that is at the bottom of this article is just a series of H1 and H2 and what you see here is the Unicode for printing a little baseball. We continue down the page and we get to the footer section. In the footer section, I've put in some mail to information that hovers just the same way that the navigation bars do and in this particular case, I've used Unicode once again. The first time to get a little speedy envelope. And I know that envelopes are not the email fashion but the idea is that we are sending some kind of mail. And then I put another link for a telephone an yes, I've used the &phone, which has a named Unicode feature that gives me a black phone that once again will change to white. Finally, I've put in a copyright notice with the &copy and I'll get the little c there. And I close out my HTML tags in the same order that they were open. So let's take a look at the CSS that goes along with this particular page. What I've done for you is I've put comments on just about every single line of CSS so that you know what the line does. First off, I'm setting the coding and the formatting for three basic HTML tags, the body tag, which begins in line one, the navigation, which begins on line six and the horizontal rule, which begins in line 12. For the body, I'm setting the entire body to a font that is somewhat whimsical and if for some reason Comic Sans MS is not available on the user's PC, I will take any sans serif font and again, we learned about serifs way back in the beginners lesson. I'm using MidnightBlue as a color and I like to use named colors whenever I can. If it's a hexadecimal number, people then have to go and look up the color. What you'll notice also is that I've taken the time to line up my code and I lined up all of my colons where I could to make them look nice and clean. In the body, all I needed to do to line these up is space out so that my colons are aligned and then space out some more so that my semicolons are aligned. The point of doing this is that when the code doesn't work, and there may be times where you've made an error somewhere along the way and your code does not run the way you anticipate, it is much easier to solve the problem when you're looking at nicely formatted code. And if you can keep all of your colons aligned and you can keep all of your semicolons aligned, you will be a much happier person.
