Basic HTML/CSS Web Page Part 2 - CSS

Introduction: This tutorial is going to be the second of two basic parts on how to create a basic web page with the essential components using pure HTML and CSS. The Structure: Our web page is going to consist of a header covering the full width of content at the top of the page, a body section covering most of the wide from header to fairly far down the page, a side bar containing widgets on the right hand side of the page - next to the main body section of the page, and a foot covering the same width (and probably height) as the header section; underneath our body and side bar sections. This Part: The first part was on the HTML (Hypertext Markup Language), this second part is going to be on styling the components in CSS (Cascade Style Sheets). All Components: First we want to ensure that all the components have our default styling instead of the browsers default styling that the user is currently using to access the webpage. We do thsi by setting the all components property which is a star/an asterix (*)... We give all the components a default value of no padding or margin (no white space or extra space), and a default font size, colour and family. (Note; Colour must be spelt the american way (color)). We set the default properties for all the components at once because it makes it easier for us later on without having to re-type the same property code for many different components. HTML: This part is not really needed but we also set the html tags to have a full 100% width of the entire browsing window and a default height (it should stop wherever the components do)... Wrapper: Next we have the wrapper class. This wrapper class, as mentioned in the previous tutorial, is going to set the boundaries for the rest of the components. Since we want the rest of the components to center on the page (within reason of course), we are going to give this wrapper class div a width of just 980px (essentially the most commonly used desktop width) and center it in to the middle of the 100% browser width html tags... We center the wrapper class by giving it a margin of '0px auto', this sets the top and bottom to 0px white space/extra space, and the left and right sides to auto - which means they have to be the same, and are therefore centering the container. Header: Now we need to style the header. As you can see, we set the wrappers background colour to hex code #ccc which is a light grey. We are going to set the header to have a width of 980px as well, center it in the wrapper container div and give it a background colour of black... We also set a height property on the header class because we want to be able to see it without content. By default, the height and width properties are set to auto which means they will only go as big as they need to be, so since we have no content within the divs, they would not show up at all. Content: Now we have the content div. Instead of giving this one a full 980px browser width of the page, we want it to stand by the side of the side bar so we set the content to 700px width, giving 280px spare space to use. We also float the content block left which means it will go as far left as possible and other containers have the ability to be inline with or go past it. The background colour of this content section is blue. Side: The side bar fills up the rest of the space next to the content section. This section has 260px browser width, which added with the 700px browser width of the content container, gives us a total of 960px used giving 20px spare. So we use this 20px to separate the two sections by giving this side bar a 20px padding on the left of it. Again, we set a default minimum height, the same as the content container since we may want them to be the same size at a minimum to make the page look like it has a nice grid like layout. The background colour of the side bar is red. Footer: Finally we have the footer container, this footer has the properties we've seen in all the previous components but there is one new one, that is 'clear: both;'. Clear both means that the floats that occured above the section that has the clear:both section no longer affect the components. This means that it will go with the grid like layout. Whereas if we didn't have this clear both property on the footer, it would simply go and hide behind the content and side bar containers - try it out, remove the line and refresh your index.html page. Finished, But... So that is the basic two part tutorial series of setting up a basic HTML and CSS webpage, but as you can see, it has no content and doesn't look very nice. I've used the different bold colours to easily show you exactly where the boundaries of each section begin and end. So, I will almost definitely make another few tutorials on how to make them look nice, add content and make them flow with each other. If you look forward to seeing them, make sure to check my tracking on my account/profile page to see if they have been posted yet, or check out any of my other thread posts. Thanks for reading!