Zurnet

I use TopStyle to write code for various web sites. It’s still my editor of choice and for many of you… hand-coding is the only way to go. For those hand-coders writing CSS and XHTML, look at the 3 examples below:

Example 1:
.boxa { text-align: right; float: left; }
.boxb { text-align: left; float: left; }
.boxc { text-align: left; float: right; }

The above example works ok, but lets say you start to add more elements to your page. If they don’t fit within the already written styles, you need to add onto your style sheet or edit your current styles.

Example 2:
.boxb, .boxc { text-align: left; }
.boxa { text-align: right; }
.boxa, .boxb { float: left; }
.boxc { float: right; }

Example 2 is somewhat better, however then you’ll run into the problem of having a bunch of .boxb classes everywhere in your style sheet.

Example 3:
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.floatleft { float: left; }
.floatright { float: right; }

I find this to be the best solution. It keeps your style sheet size down and it makes it easier to get your layout just right. For example, you have this tag:

‹div›Information and Text Go Here‹/div›

Now we can start applying styles to it very easily:

‹div class=”floatleft right”›Information and Text Go Here‹/div›

We can easily change the float from left or right, or change the text alignment. Take some other common styles like:

.bold { font-weight: bold; }
.italic { font-style: italic; }
.fonta { font-size: 1em }
.fontb {font-size: 1.25em }

Styles can be applied or changed right from within the HTML document. There’s no need to constantly go back and forth to the style sheet. You also don’t have to remember… did .boxa class have bold in it? Did .boxc class have a float right? Now you can just type bold , floatright, or center in your div tag. It’s like using the ‹center› tag, but making it XHTML compliant!