Become a webdsign master


SEO Benefits Of CSS

Heading  With  Your  Important  Keywordsstructure in HTML. The nav section butts up
against the top left corner of the page (top
Subheading  With  Important  Keywordsand left are both 0px). The # sign defines
the "id" of the div followed by the name. I
Your important content will be here, withset the width to 200px which is like making a
keywords. Notice how this is right at thetable cell that width. I have used the 500px
top of your code. No matter where this is onheight just as an example so the summary
the page, you want it here at the top of yourbelow will start where the nav ends. You
code.want to be sure everything will fit with the
sizes you specify. You can also set padding,
This could have image buttons, text, or both.but unlike a table cell in HTML, you can set
If using images, make sure to include alteach side separately. In the example above,
text which should contain keywords. Withthe first 20px is the top, then it declares
tables for layout, this would most likely beeach side in clockwise order so the left side
above the content, now it is below where itis also 20px. */ #summary {position:
should be. The div id above will help youabsolute; top: 00px; left: 0px; width:
control  this.200px; padding: 20px 10px 10px 20px; } /*
The summary above starts where the nav ends,
As the name can imply, this can be at the topat 500px from the top. The other settings
of the page, but notice how it is way downmatch for alignment. I did not set a height
in your code because it has no strong SEObecause it will stretch just like a table
elements. It might be your logo or additionalcell when you insert your content. */
navigation. Even though it shows at the top#banner {position: absolute; top: 0px;
of the page to the user, it is not the firstleft: 200px; width: 550px; height: 150px;
thing you want the search engine to read orpadding: 20px 0px 10px 20px; } /* The
display  in  search  results.banner will be at the top of the page, but
will start at 200px from left where the nav
This example of another div is used toends. Declaring a height is optional, but it
illustrate another SEO principle. Usewill help for making sense out of where the
keywords in it so it is like your closingcontent below will start. I used 150px just
point. By appearing at the bottom of theas an example. The reason for 0px padding on
code,  it  makes  stronger  SEO.the right side is because the remainder of
the screen is empty in this layout, no need
Next, I will show a simple example of how toto pad that side. I limit the width so it
make the file.css to control the layout. Youwill display well down to 800x600 res (the
can use this code in a text editor to see thetotal width here is 750px). */ #content
effects. For simplicity, I will focus on only{position: absolute; top: 150px; left:
the layout code, we will not be declaring200px; width: 550px; padding: 10px 0px 10px
fonts,  sizes,  links,  etc.20px; } /* Now the content starts right
where the banner leaves off, 200px to the
In the HTML example, we have 4 sectionsleft and 150px from the top. Notice this is
(divs). You can divide up by pixels orlast. If you used tables to create the same
percentages (or even both). We will be usinglayout, this would be last in your code too.
pixels for simple illustration of theThe search engines would read everything else
principle  here.before getting to the meat of your page. In
the HTML used here, it is at the top of your
/*Begin CSS*/ /*Just for the record, this iscode so the search engines see it first. */
a comment in CSS*/ #nav {position: absolute;/*End  CSS*/
top: 0px; left: 0px; width: 200px;
height: 500px; padding: 20px 10px 10px 20px;These are simple examples, but if you can
} /* To explain the code above, I listedthink in terms of top down logic, you can
the divs in a different order than the HTML.build search engine friendly pages. They will
This order follows the flow of the way I amalso load faster as complex table structures
doing the page layout. It also follows thetake longer to load than CSS layout, which is
flow you would have if you set up a tableanother benefit to CSS.



1 A B C D E 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128