Video: How Do I: Use Cascading Style Sheets for Web Page Layout?

In this video we learn how to use div elements in combination with cascading style sheets (CSS) to create robust and higher performance web pages. The div based approach will be compared to the table based layout approach used by most web sites over recent years. Then, several CSS-based approaches will be shown, ranging from absolute positioning to floating elements. We also learn the benefits of separating structural HTML from design with the use of CSS.

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video


Minute 0

Hi this is crisp else in the city over to learn how to use CSS based page layout with developments in recent years most people have used HTML tables to create layout on their webpages and in fact by the majority of the sites on the web still use tables as a major basis for doing a page layout however more and more sites are using developments in conjunction with cascading style sheets to their page layout because that approach offers several advantages the first thing is that typically a tape based page layout has considerably less HTML that has to be sent down to the browser so it s leaner page and that has an impact on performance in the second somewhat less obvious advantage is that when you used to the elements you can position the content in your reach

Minute 1

GML so that it is sent down to the browser and displayed first lifetimes HTML tables have quite a bit of HTML markup before it actually gets descending the content aspect of the page down to the user and displaying the content first has been shown to have a distinct advantage on the perception of the user towards the website because they like to see the content first and not have to sit there and see graphics and navigation or whatever and then wait for the content the third advantage is that by using cascading style sheets in conjunction with developments there is every small degree of separation between the structured aspect of the page layout which is the development in the HTML and cascading style sheet which represents the design solicited look at a standard cable based page layout

Minute 2

No go on and do a number of database cascading style sheet layouts to show you how to compare and some of the basic principles so you can implement them on your own websites and create a website here and in our anti solution or used to create a number of test pages demonstrate the principles on which this his website he be and must create our first patient will will do a table based layout and will let s call this page layout table for three DS will lay out here using tables and let the ball we want to achieve is a left hand navigation column and then the rest that a

Minute 3

On the right side will be the main content area lets create table here and we ll give it a with equal to 20 in the BR navigation column and I skipped that 100 and inside here let s put one row and narrow will put one column little text here so we can see it will run the page navigation links and let s just make this cell to vertical alignment to the top damages to a format that H Novo bids with a more readable for you to the far left hand navigation column is just use this as a basis for our right hand content column and the red

Minute 4

In London will make 80 of the page and will keep one cell in here and watch us change the text so we can see us or call us what content and just to make things a little more obvious for me at a style and here rarely set the background color of the content column to blue and will take that style put it up here in the navigation will give the navigation hate yellow You could live say we want to do here is to take our content table in a cell line that the right and the last thing we can do is just get rid of our development container here that came into the page by default let s reformat

Minute 5

And one more thing here let s put it a lot and it equal to left okay and let s choose to run this patient take a look at out what it looks like and as you might expect we have our navigation column on the left hand a content column of the right we could go further here and we could take this right hand content column and put a nested table and here attacks a three columns of content etc says basic table based approach to pages which think many of you are familiar with Bella salon and do the give approach and see how we do that Cisco hadn t create a second page go to our first they play out sample and let s call this new layout one creating several of these mousedown in a

Minute 6

Several kids to the page here and they differently come our major containers for areas of the page much like the cells of a table s let s make his first one an idea of header and you see why were doing IDs in just a moment as copy that wouldn t create three more kids here and the let s call this left column make the next one in content and will make the less on the footer and I was just at a little Texan e g someone it s displayed we can recognize that sections of the footer content left column and header

Minute 7

List is run this sensitivity looks like and I expect the they are in a flow layouts for getting them sequentially down the page cells go back and will we need to do is add some style information to cause each of these dudes position on the page as we would like them now good practice is to create a separate cascading style sheet and link to it from the page so where can I do that over here and will add a new item a cascading style sheet chemical is to lay out 1 C assessed his name matches the page when you get sent source code it ll be easy to figure out in any year let s create a style in the element free to those students we have header and

Minute 8

Left column to have content area footer and now we are seeing the Palestine as the prefix for the name of our Saturn such as in food because disorder were called element IDs and element IDs refer to the ID value or rather the value of the ID attribute on the element and as you recall over here in our page we gave the IDs of header left column content and footer and specify where naming these cascading style elements accordingly are an important thing to consider when you re naming things is that

Minute 9

Make it a class by using the prefix rather than the town son slept there is some attributes the styles I the first one let s just add a color of zero and zero and let s go to a position and will make this absolute and thus beside the top of this zero pixels to left zero pixels hate with 800 pixels and a height of 100 pixels in a let s just take these style to use and for making quick or let s just talk him down here in Oregon and it s of these values

Minute 10

Some thoughts on let s just change the color here 200 and let s offset it down to 100 pixels lit on the left there zero pixels that spake the wit to 150 pixels is our navigation left and let s make the height of 500 pixels and down to the content and will make this color FFF make the top 100 visits at the same level as he left column make it a with the 700 and a height of 500 and four first section lets face it back on color that and let s put the top hats

Minute 11

Hundred because it has to be down below both content and the header lets face it zero with that as it are pixels who aren t all across the screen and we ll leave it the same night as a header at 100 pixels so that s good we need to go back over here to our page and will put a link from the cascading style sheet to the page or a drag and drop and cascading style sheets and that is for calls with one more thing we want to change appear in the cascading style sheet I see that the left of the left value of zero so that would put the content right on top of the left calls us make that 150 so it s out to right so trivial said let s fire up the page here and take a look at what we have and it is what we expected them to make this little bit

Minute 12

Bigger and you can see we have our header up here which is at 800 pixels are a left column on content and down the bottom we have our footer suite of use absolute positioning here to get a nice standard page layout and we ve done that back here by separating the design of the page and cascading style sheet and the actual HTML is a rather simple noses and bad but let s say we want to add a right handed column as well as a left hand column what we have to do now to that typically would do is just at the right column right here on the same people are going to do is just quickly create a second page so when you get the sample code you have this first one intact at a new stylesheet and page here and so all called us to lay out to

Minute 13

And let s add another page and will call that one dude layout to as well then one didn t do is go over to the first page and I ve just can take all of this HTML right down the head and body tag and were giving over here to this and paste it in the school speed up over doing here and there would have a back to the first cascading style sheet copy everything there will back over to the second cascading style sheet and pasted it on the disk cleanup things here are quite closing a few of these will Windows get rid of the original

Minute 14

Table wine in this default ASP access well for seemingly to do is NR right hand column in the HML solicitors take our left column copy pasted in here and already do it is rename it attacks and also here in the ID now let s go over to our CSS file and take the left column style copy and paste that we use that as the basis for our right hand column now our header and are left column will stay as is in the right column we ll do is make its left value to be 650 and effective

Minute 15

Lets to see the content of 500 cents space to same in this case in the footer is staying the same as well positive of the page and all open up the browser here and now we have far right hand column so it was quite easy to add another column for a layout we really just as it did to the page and edit another cascading style sheet and not much more than that soon both his first and second example we ve been using absolute positioning of our kids on the page now let s make birdcage in this time or can he used the float style attribute to get the kids to float next one another on the page rather than absolutely positioning them some go ahead here and create a new style and a new page was paid for his tears as he did lay out three and

Minute 16

You would create a corresponding stylesheet and will call this did layouts for and that s just copying the HTML is over from number two necessarily doing this does so when you get to sample code you can have all these different approaches as separate entities were specifically we could just edit the one page slowdown here Lopez in HTML there and let s go back to the two had take the cascading style of battery or three pace that in and let s just go over here to three and take our new cascading style sheet put in a link that there are close down our number two pages now we don t have to do anything to the HTML

Minute 17

And witches can edit cascading style sheets so this is an example of how the design aspect is really quite separate from HTML because they want to do here is because were not going absolute position anymore I want to add a body element and set a couple attributes at body and here and I want to set the margins to zero to zero pixels and if heading to zero pixels fumigated out into the header handling and get rid of the absolute positioning and just let it flow in line since its first 18 element it will naturally be at the top of the page and banana takeouts positioning for the left column and in its place work to put the float element or attribute which will float our element to the left in this case swift and so does

Minute 18

Is it causes the left column to voters stick to being a left side of the page and can take that number into the same thing for the right column and the same thing for the content and not down here will take out the absolute positioning for the footer as well global we want here is the clear attribute and what clear attribute does is it says okay let s clear any food attributes that have been said in previous elements because the Florida feud spilled successfully successively rather odd one another okay let s fire up and look at the page in the browser and there is the page has a very similar looked when we did the absolute layout but were floating the left content and right columns seizing the fun attribute is an improvement because we had somewhat less

Minute 19

Code so to speak over in the cascading style seem so its earnings little smaller dopers are dealing with a fixed width columns how would we create a column based layout where they were more fluid war as the term is liquid with a width of the columns would change as we resize the browser or more importantly as users who are running the page at different resolutions have different widths available on the screen and they would get the same basic appearance of our page was creating a fourth page that s based upon our number one page and also a style sheet will add that in here and this will be to lay out for the stylesheet and also to fail for for the SPX page

Minute 20

And less close down the number three here and we can go over and open up one we can take the HTML and one and copy it over here to number four paste it in here and let s use the style information from number one and put that TNR number four style as well that s closed out her number one suggests though we don t start to edit them so once again our HTML doesn t have to change all just to reiterate that would have two columns are left hand navigation column and then the main content area off to the right of it since for nothing is absolute positioning here I want ahead in a body attitude began her

Minute 21

Style element in the zero pixels for the margin and zero pixels for the petty okay so what would you do differently here starting with a header and get rid of the absolute positioning and instead of an absolute width of 800 pixels revenues of 100 for our header and then for our left column we are going to get rid of the absolute positioning as well and here were also in the use of percent in this case 19 and similarly for the content in this one were to make it 80 and down in the footer or the absolute positioning and this one were going to make 100 dislike the header

Minute 22

Now let s go over to our page and its food and anything can tour cascading style sheet and there s one more thing we need to put over in our CSS and you can offload the left column and what it looks good enough to float this one to the left in our content in this case in a float to the right know a lot sort of browser here and your page and there we have a header column content as well as the footer down here for what s a little different about this is the matter how big you make the page our columns header and footer all will resize the percentages and this is more fidgety appealing and also represents fact is they said that this page would work better than

Minute 23

Fixed width size and are ours browsers with a lower resolution coast is found in our last but not least I would we do a three column approach here and let s create a new number five page and cascading style sheet and said he do that style sheet number five is to be largely based upon number for this let s take all over the style information in number four put it in number five take the HTML and four copy that and put that over in five

Minute 24

And I got a form tag here so let s just get rid of that away almost got in there and let s link in our number five stylesheet and the other thing we want is to add a right column as he talked about 10 are HTML is all set to air it appears will check that out in a minute of snow over to our number five and we need to do here in our stylesheet is just at a style for the right hand column and put that down here and all we want to really do here is change the float attribute to write for the rightmost column and let

Minute 25

For the content and let s make to our left hand column now 20 will make the content 59 and then 20 for the right hand column and with immunity to do with our footer down here and need to be clearer attribute and both see here that we forgot to rename this list is rename this style to smell is open up this page in the browser and take a look at it here we have our layout as expected with a left right columns content in the middle pair on top footer on the bottom and what s different about this compare to the fixed width layout that we did earlier with the left and right column is watch what happens as I resize the browser

Minute 26

You can see that both the left content and right column are nicely resizing according to the width of my browser window in this case or it could be a different resolution of the user s screen list of examples of a gone through your shoe several different variations are used it for laying out pages from absolute positioning and fixed with dudes fixed height is to the last one where we had floating kids that were based upon which the percentages so that the whole page layout resides very nicely as the Thursday browser window or screen resolution changed it to expand upon what we ve done here for example by taking the content area of the page and aiding some container is inside of the content do that would partition the content

Minute 27

Area in to save multiple columns of content for a newspaper like approach or you could position certain goods in certain places within the content area all to achieve different effects and you could put that style information in outing cascading style sheets for each of those approaches in the content area so you could have saved several standard formats to your content area and then base upon which cascading style sheet you linked in you would get a different layout to the content I would like their useful issue would have several different types of pages with different layout you may have your home page which has a standard layout and then a main content page for sub areas of your site and then the third type of format might be for content detail within each of those subareas committed to more complex situations like that the benefits of using the deep approach

Minute 28

Are much greater and then if you try to do the same thing with HTML tables and it noticed as we well all here that I talked that one of benefits early on is that you have a separation of the design aspect from the actual structure of each of the elements of the page the Nets played a very nicely here where we have different cascading style sheets associated in this case with different webpages to provide a different layout and assistant is really a bit tedious to give the team working on page design or even if you re by yourself and seven pages is it really segments things very nicely so encourage you to download the source code for these different examples use them as a basis for implementing some different page designs in your own sites and by the less punishing make is that one of the things you will run into in the based layout is that

Minute 29

You absolutely have to test your pages in the major target browsers for your website so be it enjoyed watching this video and learned something about how to page layout with descent cascading style sheets this is Chris Pelz thanks for your time

Click here to go to original video page