The secret to a good-looking blog: Nice-looking CSS

Appearances in a weblog are made possible by good use of tag semantics. However, what actually manifests them, for the most part - is having good CSS rule definitions that the blog is using.

Here is one piece of CSS I find very handy in my weblog.

/** thick, gray revision bar */
blockquote {border-left: 6px solid gray; padding-left: 1em; margin-left: 1em; }

It makes sure that the snippets from other blogs I quote appear, well - like they are snippets quoted from other blogs.

The whole purpose of the blockquote XHTML element is to do just that: quote snippets of text and/or other information from another source.

Here is what it looks like:

We have nothing to fear,
but fear itself.

-Roosevelt

These are the times that try men's souls

The Shadow knows... !

One, two - buckle my shoe.
Three, four - out the door.
Five, six - pick up sticks...

If you are fancy, you can use the cite element, as I have done in the first case above, to cite your source by title and/or name. And, of course, you should use an a (anchor) tag to include a hyperlink to it if it is on the web someplace.

Another handy element, which I should include some CSS for is the code element.

Example:

for (Element element : document) {
    System.out.println(element);
}

The code element is handy for marking up Javascript and Java program listings, CSS rules, and so forth.

One thing I have not looked into doing yet is how to include snippets of HTML, XHTML, XML, and so forth really easily. I think I can do it by using a bang-CDATA directive - but I have not tried it yet. If it works, that would be easiest. Escaping scores of less-than and greater-than punctuation-marks and double-quotes is not my idea of fun, believe me.

Oh, here is another good trick. You should quote people - or do the air quotes thing by using the q (quote) element. You will love it! It takes the contents, the entire thing, and wraps it in question marks. Even people who know HTML/XHTML do not seem to know about this one.

In conjuction with the q element, you should be able to set up a CSS rule to improve the appearance of your quotes. You know those big, beautiful, exaggerated quotes that a lot of magazine websites and swarmy weblogs use? Well, you should be able to do the same effect using q elements - and a custom CSS 2.1 rule. (This particular template seems to come supplied with a rule that does that already - but only for the opening quotation mark.)

Just remember, not all web browsers are created equal when it comes to supporting the current CSS standard, 2.1. So you have to take that into account - either by trying it with a bunch of browsers, waiting until they are done, or using CSS tricks to create fallback rules or use some kind of browser brand/version sensing technique.

Anyway, those are some things you can do to enhance the readability - and correctness - of your blog.

Until next time, good-byte!