The first step in this project is to create our basic each GMO page structure is shown here once you've
done that.
Save the file on your computer.
You can name the file whatever you like next will create a style sheet for CSX rules so inside your
head take create your open and close style tags.
We'll start with creating our first rule.
This will be for the body property.
Create a margin definition set to zero padding set to zero and a line height set to one point five yen.
This will ensure there is no spacing around the perimeter of our page content.
It also sets the default line spacing for the text on our page.
Next we'll create a set of definitions for our header.
So this is for the header div start with a background definition set to block will set the font family
to aerial and a height of one hundred pixels and so that is for this piece over here.
The block background underneath the navigation
now we'll need to create a style rule for the div that will contain our three columns.
So column 1 2 and 3 will named this rule content wrapper since we need the footer to attach itself beneath
the content wrapper.
We need to set a float left property on the wrapper so that's what we've done here.
We've also given the wrapper a width of 100 percent.
This is because we're creating a fluid layout which scales and shrinks to the full width of the browser's
content area.
So as I expand the browser you'll notice that the layout expands with it and contracts with it.
So it's fluid
inside the content wrapper.
We need to create a style rule that will contain each individual column for this rule.
We'll create one definition and that definition will be margin set the margin to zero 230 p x 0 in 230
pixels again and call it content column.
This means that the left column and the right call them will be fixed.
Two hundred and thirty pixels at all times the center content area will be fluid so as I expand the
browser you'll notice that the middle content area expands and contracts with the left and right column
stay at a fixed two hundred and thirty pixels.
Now we can set the rules for our left and right columns.
We'll start with the left
so create the following style rule
we'll call it left column.
That's what we'll name or name or did for this create a float definition and set it to left.
Also set the with the two hundred and thirty pixels set a margin left definition to negative one hundred
percent.
This will help ensure that the columns remain positioned correctly and for the background color set
it to this value or you can set it to another background color.
If you'd like as well.
Now for the right column.
Again set the float to left with two hundred thirty pixels.
This time set the margin left definition to negative 230 pixels.
Again this is for the purpose of making sure that the columns stay in the right position regardless
of the browser's size
and we've set the background color to this value which is this yellowish background.
But you can use whatever color you like.
Next we need to create a rule for the div that will hold our text content so we will create.
We'll call it inner text and it's a class and it'll be applied to any div that contains text content.
So for example here here and here you can see that around the text we have a margin and that's a 20
pixel margin.
The font family is aerial and the color of the text is light great color.
And this is the hex code for the color.
Now we'll create a rule for the footer and that's this black bar right at the bottom.
First we'll create the clear rule and set it to left and this will ensure that the footer stays in the
correct position at the bottom of the content wrapper set the width to 100 percent.
Background is black the text color is white font is aerial text alignment inside the div is center and
there's a bit of a padding for pixel padding around the text.