Welcome to CSS Lessons
The power of CSS is boundless.
Let your imagination be your guide.
Brought to you by CyberStar Designs
Let your imagination be your guide.
Brought to you by CyberStar Designs
| Table of Contents | CSS Lesson 1 | CSS Lesson 1 Part 2 | CSS-Lesson 2 |
| CSS Lesson 3 Part 1 | CSS Lesson 3 Part 2 | CSS Lesson 4 | CSS Lesson 5 |
CSS Lesson 5XHTML + CSS = SEOOriginally I was going to write a lesson about an easy way to make your pages accessible for visually impaired visitors that use screen readers to read pages for them. This can be done with a table design, but with much more difficulty. Then I remembered reading an article on the value of XHTML, CSS and optimizing pages for search engines. So this lesson will be for SEO mainly and also cover the benefits for accessibility. First of all, I did not come up with this idea. I frequently read articles on CSS designs and one of my favorite places is, A List Apart http://www.alistapart.com While looking for some answers on a CSS problem I had some time ago, I ran across this article http://www.alistapart.com/articles/seo/ . It explains the benefit of using CSS to help your pages rank better in the search engines. While I’m not advocating redesigning your whole site in this fashion, I believe there is value in adding a few important pages done in this manor.
This last disadvantage is why I do not advocate redoing your whole site this way. Older browsers will not display the pages properly. However, this is only for SEO benefits with an added benefit for the visually impaired. Take one or two of your most import pages. Do not use your index page. Do not clone one of your pages as it might look like a doorway page. Most search engines do not allow doorway pages. Instead, take a topic from one of your pages and expand on that topic. These pages will be optimized solely for the benefit of search engines that index pages such as Google. Now these pages must be usable and informative, as they will be listed in the search engines index. Visitors will be accessing them, so they must be functional. These will be added gateways into your main site, not replacing existing pages. Tools of the trade: If you are doing this by hand, I included a layer tag that you can copy and paste further down the page. Okay, let’s get started. First lets make a quick Style Sheet to help us keep things in the right place. I’ll assume that you have a logo or header graphic on the top of your pages. Lets add that first. Put this under the Title tag of your page and name it different than your regular Style Sheet.<link href="NewStyleSheet.css" rel="stylesheet" type="text/css"> In your Style Sheet we will add the usual tags plus a new one. The new tag @media screen will keep the bots and crawlers from trying to position your content. Just add it before the regular selectors with a curly bracket {. Be sure to add the closing curly bracket } at the end of your sheet. @media Screen {Note! If you do not want a logo or header graphic, just omit the first 3 lines. h1 { These two selectors will get us started. The body selector will set the background image for our logo or header graphic, keep it at the top and to the left, and not let it tile. We also set the margin and padding to zero, set our font, font size for the page, and color for the font. Then we set the H1 selector font, color and size. Save it with your style sheet name with a .css extension. Now the page. Here is a division tag with positioning code. If you are coding by hand, you can use this as a reference. Be sure to set the top below your background image. <div id="Layer1" style="position:absolute; width:00px; height:000px; z-index:1; left: 00px; top: 00px;"> "your text would go here" </div>Just remember to name each layer, as in layer1, layer2 layer3 etc. If you are doing more than one page, be sure to give each layer a unique name. I named mine content and menu. Take one of your pages, remember not to use your index page, and write new text according to the topic you picked. For this exercise, I just opened a page in Internet Explorer and copied the text right off the screen. Then I just pasted it between the body tags (<body></body>) of the page. Save the page. Here's mine. If you are using Dreamweaver or FrontPage you can add a layer, which will insert a div tag with the style tags. If you are in code view, you may have to add these 2 style values: left: 00px; By hand, just paste the div tag from above. Remember to move the end </div> tag to the end of the text section you are working on. On my example, you’ll notice that the links are at the bottom of the page. By using the absolute position, I can display them anywhere on the page I choose. This keeps the contents for the search engines near the top, making it the first thing it sees. You can view the source of example page to see the values of my tags. The advantage for screen readers is there is no complex tabling structure for it to get lost in. No images for it to have to navigate around. It just starts at the top and reads each sentence like you would in a book. I had just to sections to my page, the main text and links. After you insert your division tags, change the width and height of each tag. This will adjust how tall and wide the container is that holds the text and links. I made mine so that I could put the links on the right side. You could just as easily put the links on the left or top. Changing the top and left values will move things around on the page. When you get it where you want it, save the page. Here is my page. One more step. You need to move all of the positioning information to your style sheet. Cut this from your page, #content ( position:absolute; width:570px; height:388px; z-index:2; left: 4px; top: 142px; } Here is my whole style sheet from the example page. This includes the selectors for the CSS text rollovers, highlighting and extra padding and margins for the 2 sections. I also added some padding and margins to keep the text and links from touching. @media screen { I named my final page small-business-website-design.htm. This is the same as my title, Small Business Website Design, and is the same as the H1 tag. This should help the search engines determine what the page is about. Then I made sure I used all combinations of this key phrase throughout the page. Here is the example with all of the key words highlighted. Example of Key words. Now you need to add a link from one of your crawled pages so that this new page will be found and indexed. Theoretically, this page should rank high as it will be easily found |
| Table of Contents | CSS Lesson 1 | CSS Lesson 1 Part 2 | CSS-Lesson 2 |
| CSS Lesson 3 Part 1 | CSS Lesson 3 Part 2 | CSS Lesson 4 | CSS Lesson 5 |