Write Your CSS Code in Style

CSS (Cascading Style Sheet) coding is gaining a lot of popularity. And, because it is often edited you should think about writing your code with a bit of style. This will help prevent errors and typos from creeping in and make your code much easier to decipher and update anytime in the future.

I’ve started adopting a three-column layout for my CSS code. Here’s a sample styling my <p> element and a header id selector.


(Click on the image for a larger view.)

At the top of each element block I add a comment describing what this will do. For the standard XHTML elements this isn’t necessary, but it is really critical for any custom id or class selectors you create.

In the first column I list the element (in pink) then the attributes. I’m always consistent with the curly braces putting the opening one right after the element going down two lines and typing in the closing one right away, so I don’t forget it.

In the middle column I list the value, lining them all up with each other. I use spaces to do this because tabs will expand and contract on other computers making a mess of things.

In the third column I add comments describing what each item does. This has saved me hours of work. It makes quick work to track down a specific item when making minor changes. This is especially true if you are smart in your commenting. Instead of stating the obvious, describe any weirdness that may be happening or how this attribute relates to the others. I pretend that whoever will be reading this is the future has only the basic knowledge of CSS.

Follow these guidelines for some very stylish CSS code. It will make you look very professional as well as making your web programming future a lot less stressful.

Technorati :
Del.icio.us :
Ice Rocket :
Buzznet :

Use CSS to add page breaks

Here’s how you can use CSS to insert page breaks in your web pages for printing.

I often print a web page to a PDF file in order to keep all the graphics and layout together. I’ll often do this with my own pages for presentation handouts.

In my CSS file I add the following class definition:

.pageBreak { page-break-before: always; }

To use this I simply add a DIV tag where ever I want the printer to start a new page:

<div class="pageBreak">
<p> </p>

Keep in mind that this CSS class is only triggered in the printing of a document. It won’t affect how the page appears in the user’s browser window.

Technorati :
Del.icio.us :
Ice Rocket :

ClearType on your PC

Here’s a great tool that will make your Windows XP screens much easier to use. Microsoft offers the ClearType Power Toy as a free download. This uses the technology that was developed for the PocketPC and it is amazing how much easier it is to use the computer when the text is crisp and clean.

I don’t like customizing my Windows because I use so many different machines through the course of the day, but this Power Toy is definately one to have on the machine you use the most.

Heck, with ClearType installed my laptop the Windows dialog boxes and file lists look almost as good as my Mac! ;-)

Earle Harrison talks about accessibility

Triumph Technology Logo How do blind people “see” a web page?

In 2005 Earle Harrison from Triumph Technology visited my Web Programming I class. He spoke about building accessible web pages and demonstrated JAWS, System Access, and several other interesting programs that convert HTML markup into speech.

You can listen to his presentation on your computer or any MP3 player such as an iPod or iRiver. I’ve broken the presentation into two parts. Here are the files:



Here is a transcript Julie Peek typed up from the recording.

My thanks to Earle for allowing me to publish this material as well as Julie for taking the time to type out a transcript.

File Naming Conventions

If you work with files you should have a set of rules that you follow so that your file names are always consistent. This is especially true if other people will be working with your files which is very common in web work and programming.

Here’s the file naming conventions that I have developed over the years as a programmer and web person. What you do is not as important as being consistent. Using the same name convention will save you countless hours of “fixing” things and looking up to see how a filename was spelled. I recommend using these rules for filenames, folders and directories, and variable names.

  • always start a filename using lowercase
  • don’t use spaces or underscores _
  • use camelCaseToMakeNamesEasierToRead
  • don’t use plurals – for example: Use “graphic” instead of “graphics”
  • be consistent with extensions. .html should always be .html and not .htm one day or .default on another day.

Here’s the reasoning and experience that helped me develop this list:

Always start a filename using lowercase
80% of the web servers use Apache running on Linux and Linux is case sensitive. By starting every name with a lower case letter you remove the guesswork like “Now, was it Index.html or index.html?” On a Linux server these are two different things.
Each time you have to go look up a file name to find out you used the wrong upper/lower case means less time with your video games or bronzing on the beach.

Don’t use spaces or underscores “_”
Web servers and programming languages are befuddled by spaces. They may work in Windows and Word, but most other computer programs don’t even allow them. Linux is a good example.

Why not underscores “_” you may ask. Underscores will “hide” when being displayed as an underlined word and users think they are spaces. Also, why add another character to your name if you don’t have to? And finally, how many people can touch-type the _ character. Every time you have to pause your typing to hit a special key means the longer it takes to complete your killer app.
Use camelCaseToMakeNamesEasierToRead
This is the solution to not using spaces or underscores. Note how easy it is to read the statement above. Its much faster to type this way. You’ll have to personally decide how you are going to handle acronyms. For example: web3RSS.html or web3Rss.html or web3rss.html
My recommendation, for readability and recognition, is to keep an acronym as all caps: web3RSS.html

Don’t use plurals

For example: use “photo” instead of “photos”

When working with a programming team we spent countless hours fixing our programs because of simple spelling “errors” like this. Then, one day someone suggested that we follow this rule and everyone’s life got so much easier.

It’s a little weird at first, but after a few times of knowing how a foldername will be and not having to go look it up makes it all feel right in the end.

Be consistent with extensions and keep them lowercase.

I recommend always using .html. Don’t use .htm one day and .html the next.

Same thing with .jpg

By following these rules on a regular, and consistent basis, you will be able to work faster and with a lot less frustration.Note: There’s a few exceptions to all of this. If you are a Java or .NET programmer than you will want to have all your Class files begin with an upper case letter. And constants are always written using ALL_CAPS with underscores to separate the words. These are both naming conventions that were around a lot longer than my little set of rules.

Insight from Tim Berners-Lee

While doing a little research to a question from my Web Programming I course (What were the other names Tim Berners-Lee had considered for the Web? The answer is here – look in 1990, the year the Web was invented.) I came across this poignant quote that Tim Berners-Lee had included at the bottom of his FAQ for Children:

When asked if the Web was a good or bad idea, Tim Berners-Lee writes:

Here is my hope.

The Web is a tool for communicating.

With the Web, you can find out what other people mean. You can find out where they are coming from.

The Web can help people understand each other.

Think about most of the bad things that have happened between people in your life. Maybe most of them come down to one person not understanding another. Even wars.

Let’s use the web to create neat new exciting things.

Let’s use the Web to help people understand each other.


A great new book for Web Programming II

This class covers both client-side scripting like JavaScript and server-side scripting using ASP.NET. Every year I go through the same anxiety, “What book(s) will I use for Web Programming II?”

Because this area is changing so dramatically I always need to find new textbooks. I think I’ve found a great JavaScript book for the class starting this August. I first heard about it while listening to a podcast from Paul Boag (Boag’s World podcast #23 – Defining Your Project) It’s called DOM Scripting by Jeremy Keith and offers great scripting techniques that include the DOM (Document Object Model), CSS, and XHTML.

The DOM allows a programmer to address any component on a web page. This could be a button, a title, or a specific paragraph. In the past DOM scripting was very tedious and worked differently in different browsers.

Jeremy starts out discussing the basics of JavaScript and builds on that utilizing the DOM based on its current standard which now works in all the popular browsers including Internet Explore and FireFox.

The projects he uses to demonstrate the code include a photo gallery and an animated slideshow. These not only look like fun but could be a valuable addition to your web site.

I’m also looking at making some Flash movies available for the second half of the course. Check out the instructional movies at LearnVisualStudio.net I’ll be looking closer at how I can include these as part of the course over the summer.

This is going to be a great course. Here’s the syllabus that lists all the stuff you will learn. (This is last year’s syllabus and it will be updated and revised over the summer.)