1
00:00:00,550 --> 00:00:07,410
The first step in this project is to create our basic each GMO page structure is shown here once you've

2
00:00:07,410 --> 00:00:08,010
done that.

3
00:00:08,040 --> 00:00:10,440
Save the file on your computer.

4
00:00:10,440 --> 00:00:19,420
You can name the file whatever you like next will create a style sheet for CSX rules so inside your

5
00:00:19,420 --> 00:00:25,330
head take create your open and close style tags.

6
00:00:25,600 --> 00:00:34,420
We'll start with creating our first rule.

7
00:00:34,450 --> 00:00:37,090
This will be for the body property.

8
00:00:37,090 --> 00:00:45,860
Create a margin definition set to zero padding set to zero and a line height set to one point five yen.

9
00:00:46,240 --> 00:00:51,290
This will ensure there is no spacing around the perimeter of our page content.

10
00:00:51,310 --> 00:00:57,970
It also sets the default line spacing for the text on our page.

11
00:00:58,010 --> 00:01:09,110
Next we'll create a set of definitions for our header.

12
00:01:09,280 --> 00:01:18,210
So this is for the header div start with a background definition set to block will set the font family

13
00:01:18,210 --> 00:01:24,980
to aerial and a height of one hundred pixels and so that is for this piece over here.

14
00:01:25,550 --> 00:01:28,220
The block background underneath the navigation

15
00:01:31,770 --> 00:01:36,850
now we'll need to create a style rule for the div that will contain our three columns.

16
00:01:36,930 --> 00:01:45,270
So column 1 2 and 3 will named this rule content wrapper since we need the footer to attach itself beneath

17
00:01:45,270 --> 00:01:46,860
the content wrapper.

18
00:01:46,950 --> 00:01:53,680
We need to set a float left property on the wrapper so that's what we've done here.

19
00:01:53,680 --> 00:01:57,460
We've also given the wrapper a width of 100 percent.

20
00:01:57,460 --> 00:02:03,820
This is because we're creating a fluid layout which scales and shrinks to the full width of the browser's

21
00:02:03,820 --> 00:02:04,940
content area.

22
00:02:05,980 --> 00:02:11,140
So as I expand the browser you'll notice that the layout expands with it and contracts with it.

23
00:02:11,530 --> 00:02:12,130
So it's fluid

24
00:02:16,810 --> 00:02:18,370
inside the content wrapper.

25
00:02:18,370 --> 00:02:25,890
We need to create a style rule that will contain each individual column for this rule.

26
00:02:25,910 --> 00:02:36,100
We'll create one definition and that definition will be margin set the margin to zero 230 p x 0 in 230

27
00:02:36,260 --> 00:02:40,240
pixels again and call it content column.

28
00:02:40,250 --> 00:02:44,420
This means that the left column and the right call them will be fixed.

29
00:02:44,450 --> 00:02:53,310
Two hundred and thirty pixels at all times the center content area will be fluid so as I expand the

30
00:02:53,310 --> 00:03:01,440
browser you'll notice that the middle content area expands and contracts with the left and right column

31
00:03:02,160 --> 00:03:09,510
stay at a fixed two hundred and thirty pixels.

32
00:03:09,520 --> 00:03:13,160
Now we can set the rules for our left and right columns.

33
00:03:13,240 --> 00:03:15,190
We'll start with the left

34
00:03:17,830 --> 00:03:19,660
so create the following style rule

35
00:03:23,710 --> 00:03:25,510
we'll call it left column.

36
00:03:25,510 --> 00:03:30,980
That's what we'll name or name or did for this create a float definition and set it to left.

37
00:03:31,060 --> 00:03:39,270
Also set the with the two hundred and thirty pixels set a margin left definition to negative one hundred

38
00:03:39,270 --> 00:03:40,140
percent.

39
00:03:40,140 --> 00:03:46,800
This will help ensure that the columns remain positioned correctly and for the background color set

40
00:03:46,800 --> 00:03:49,610
it to this value or you can set it to another background color.

41
00:03:49,620 --> 00:03:51,710
If you'd like as well.

42
00:03:52,620 --> 00:03:53,760
Now for the right column.

43
00:03:53,790 --> 00:03:58,350
Again set the float to left with two hundred thirty pixels.

44
00:03:58,350 --> 00:04:03,900
This time set the margin left definition to negative 230 pixels.

45
00:04:03,930 --> 00:04:10,050
Again this is for the purpose of making sure that the columns stay in the right position regardless

46
00:04:10,110 --> 00:04:12,090
of the browser's size

47
00:04:14,920 --> 00:04:20,440
and we've set the background color to this value which is this yellowish background.

48
00:04:20,440 --> 00:04:22,360
But you can use whatever color you like.

49
00:04:22,360 --> 00:04:29,690
Next we need to create a rule for the div that will hold our text content so we will create.

50
00:04:29,690 --> 00:04:38,550
We'll call it inner text and it's a class and it'll be applied to any div that contains text content.

51
00:04:38,550 --> 00:04:45,420
So for example here here and here you can see that around the text we have a margin and that's a 20

52
00:04:45,420 --> 00:04:47,070
pixel margin.

53
00:04:47,070 --> 00:04:52,550
The font family is aerial and the color of the text is light great color.

54
00:04:52,590 --> 00:04:54,490
And this is the hex code for the color.

55
00:04:54,510 --> 00:04:59,570
Now we'll create a rule for the footer and that's this black bar right at the bottom.

56
00:05:01,650 --> 00:05:08,830
First we'll create the clear rule and set it to left and this will ensure that the footer stays in the

57
00:05:08,830 --> 00:05:16,600
correct position at the bottom of the content wrapper set the width to 100 percent.

58
00:05:16,610 --> 00:05:26,810
Background is black the text color is white font is aerial text alignment inside the div is center and

59
00:05:26,810 --> 00:05:29,810
there's a bit of a padding for pixel padding around the text.