CSS Learning Trick
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:
- Download the Firefox browser
- Install the Html Validator (based on Tidy) 0.7.9 extension (get it here)
- Open one of your “old” HTML files in FireFox
- View the source, click the “Cleanup the page” button
- Check the “replace FONT…..tags by CSS” box, then Refresh
Editors Note: The latest version of this extension works with FireFox 1.5.x and newer, and three operating systems: MacOS 10.x, Linux, and Windows. You may have to visit the Authors Site (Marc Gueury) to get the latest version for each Operating System.
Illustration above shows how the HTML Validator extension, when loaded, modifies FireFox’s VIEW: Page Source (under View Menu) to include the HTML validator windows at bottom. When you click the “Clean Up The Page” button (bottom right - circles), a pop-up box delivers the “Cleaned HTML” to you so you can cut and paste it into your page editor. As recommended here, ou would first click “replace FONT tags by CSS”, then click “Refresh” to get the benefit of an automatic CSS stylesheet in your “cleaned” code — code highlited in blue above was added by the program.
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!
Author Info: Written by Erich Bihlman, of Bihlman Consulting - PC and Internet Tutoring and Website Design in Prescott, Arizona. bihlman.com
Source: Article Depot - Search Free Articles
Written by: WebMaster
This entry was posted on Wednesday, October 24th, 2007 at 2:27 am and is filed under Web Help. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
