10 Step CSS Learning Guide for SEO
10 Step Guide to Getting Started with CSS for SEO:
- First go to a simple website such as SEO Class (you are already here unless you are using an RSS reader or someone forwarded this article to you).
- Next go through the CSS tutorial on W3C Schools.
- Then download or Get firefox if you don’t currently use it from Mozilla.
- Download and install the free firefox web developer plugin that make SEO and CSS easier to work with and learn.
- Go to our sample CSS page and print out the page itself to see the layout as well as the HTML source code by clicking view in the firefox toolbar and then page source or ‘Ctrl+U’.
- On the web developer plugin toolbar click the CSS drop down and click view CSS or ‘Cntrl+Shift+C’ and print this page.
- On the web developer plugin toolbar click the information drop down and click display element information or ‘Cntrl+Shift+F’.
- Scroll over the various page elements to view them and better understand the layout. Start from the top outermost area and move towards the center and middle of the page. You will see the main div and notice its properties such as width by clicking on it and looking at the yellow box on the screen.
- You can click on items such as Houston Arts and Entertainment to see the attributes such such as ancestor in the yellow box as well as looking at the web developer bar towards the top of the page to see the hierarchy of elements.
- Basically you can now open up our page index_b.html in Dreamweaver 8 by Adobe and start adding and modifying divs and elements to see what attributes are given as options. Use your print outs as references and by experimenting with CSS in this manner you will learn to design better SEO optimized CSS pages.