I taught myself HTML back in the mid-nineties and was proud of the fact that I was able to accomplish the design of fairly complex web pages with nothing more than a starter HTML book, an HTML reference book, and the knowledge I had stored in my head. But back in those days, we web designers had what looking back was a fairly limited amount of tools with which to work, and the quality (or lack thereof) of sites on the web was lackluster at best.
Fast-forward to today: The hand-coder has more powerful and intuitive software packages available that will still allow us "to get our hands dirty", which brings us to the purpose of this article. With the standardization of the much anticipated Cascading Style Sheets (CSS) in the late-nineties, the web design community has become familiar with a much more powerful and precise method of web page layout.
"But how is an old-time web coder supposed to learn CSS the easy way?!" Well, I say you should learn it the way I, and countless others, have:
1. Download the Firefox browser 2. Install the Html Validator (based on Tidy) 0.5.9 extension 3. Open one of your "old" HTML files 4. View the source, click the "Cleanup the page" button 5. Check the "replace FONT.....tags by CSS" box, then Refresh
Now you have a very neat and tidy piece of code, with all the CSS dirty work done for you! At this point you can copy & paste the resulting code and use it in your project and start figuring out what it's doing. I was amazed at how easily I was able to pick it up and start making changes on my own. When I wanted more information on a certain style it was a just a Google search away to many excellent CSS resources on the web. I find it much easier to learn CSS if I get to apply the modifications to the existing code that I've been working on, and I think you will too.
I hope you find this article helpful and if you follow these steps you should be able to add CSS to your web site design toolbox in no time!
Thanks to Erich Bihlman, of Bihlman Consulting - PC and Internet Tutoring and Website Design in Prescott, Arizona. http://www.bihlman.com
This article is most useful if you are somewhat familiar with HTML and CSS. I explain the concepts well enough that you do not have to be an expert, but I want to provide material that will introduce you to more advanced design in ways you can understand.
Like many other web designers, I began laying out web pages using graphical tools and discovered the wonders of tables for layout without anyone telling me to use them. Since browser support for CSS is better than it used to be, and tables cause problems, CSS offers you a benefit you may not have thought about before, the benefit of better SEO.
I want to say right away that quality content should be your highest priority, not SEO tricks. The advice given here will help you get better search engine results because the key to real SEO begins with good page structure and organizing your content. By understanding how search engines "see" your pages, you can build better page structure.
Search engines use what is called "top down" logic in looking at web pages. They look at your code, not the visual display that users see. Human eyes are drawn to the page content right away, even when there are other things on the page. Search engine robots do not see things the same way, but, they are logical and predictable once you understand them.
You have most likely seen search engine results that do not make sense because some obscure content gets displayed instead of the actual content of the page. I will illustrate top down logic so you can understand how to make CSS work for you.
In the mind of a search engine, the gist of your web page is determined first by what content is at the top of the page. If you start with certain words, they appear often throughout the page, and then again at the bottom so it is essentially your closing point, that, in the automated brains of a search engine is what your page is about.
Your well trained eyeballs will probably look for a title, then read the content; so to you, this is the top down logic of the page. Read your HTML code from the top down. You may be surprised how far you have to scroll before you get to the real content, and, how much other "content" a search engine will see first. If you use tables for layout, the top down logic of your code looks like it has the legs cut off and the place settings are on the floor.
Using CSS, you can organize your code so the search engines see your real content first regardless of where it appears on the page.
Let's use a simple HTML example:
Insert all your head info, including a CSS link like below
Heading With Your Important Keywords
Subheading With Important Keywords
Your important content will be here, with keywords. Notice how this is right at the top of your code. No matter where this is on the page, you want it here at the top of your code.
This could have image buttons, text, or both. If using images, make sure to include alt text which should contain keywords. With tables for layout, this would most likely be above the content, now it is below where it should be. The div id above will help you control this.
As the name can imply, this can be at the top of the page, but notice how it is way down in your code because it has no strong SEO elements. It might be your logo or additional navigation. Even though it shows at the top of the page to the user, it is not the first thing you want the search engine to read or display in search results.
This example of another div is used to illustrate another SEO principle. Use keywords in it so it is like your closing point. By appearing at the bottom of the code, it makes stronger SEO.
Next, I will show a simple example of how to make the file.css to control the layout. You can use this code in a text editor to see the effects. For simplicity, I will focus on only the layout code, we will not be declaring fonts, sizes, links, etc.
In the HTML example, we have 4 sections (divs). You can divide up by pixels or percentages (or even both). We will be using pixels for simple illustration of the principle here.
/*To explain the code above, I listed the divs in a different order than the HTML. This order follows the flow of the way I am doing the page layout. It also follows the flow you would have if you set up a table structure in HTML. The nav section butts up against the top left corner of the page (top and left are both 0px). The # sign defines the "id" of the div followed by the name. I set the width to 200px which is like making a table cell that width. I have used the 500px height just as an example so the summary below will start where the nav ends. You want to be sure everything will fit with the sizes you specify. You can also set padding, but unlike a table cell in HTML, you can set each side separately. In the example above, the first 20px is the top, then it declares each side in clockwise order so the left side is also 20px.*/
/*The summary above starts where the nav ends, at 500px from the top. The other settings match for alignment. I did not set a height because it will stretch just like a table cell when you insert your content.*/
/*The banner will be at the top of the page, but will start at 200px from left where the nav ends. Declaring a height is optional, but it will help for making sense out of where the content below will start. I used 150px just as an example. The reason for 0px padding on the right side is because the remainder of the screen is empty in this layout, no need to pad that side. I limit the width so it will display well down to 800x600 res (the total width here is 750px).*/
/*Now the content starts right where the banner leaves off, 200px to the left and 150px from the top. Notice this is last. If you used tables to create the same layout, this would be last in your code too. The search engines would read everything else before getting to the meat of your page. In the HTML used here, it is at the top of your code so the search engines see it first.*/
/*End CSS*/
These are simple examples, but if you can think in terms of top down logic, you can build search engine friendly pages. They will also load faster as complex table structures take longer to load than CSS layout, which is another benefit to CSS.
Thanks to Steve Chittenden, seeks to help business owners and organizations market themselves effectively and succeed. His company, Creative Business Services, provides carefully planned web design, graphic design, writing, and marketing services aimed at achieving this. goal.
