Sharpe's Opinion

If you have a website or blog and you don’t know how to use CSS Styles… Learn to use CSS Styles. Apart from helping you accomplish the things you want to accomplish with the design of your blog, it’s a far more powerful system than most people give it credit for. I use CSS classes for almost everything, and I thought it might be fun to have an elementary ‘CSS 101’ post to demonstrate a little bit about how it works.

There are three particular CSS Tricks that I use on this site which I’m particularly proud of. The first is one that you wouldn’t even really notice, but it makes things easier for me (strictly speaking it isn’t a trick at all, it’s exactly what CSS was made for, but I’m surprised at how little known it is); the second is a very stylish way of beautifying your site’s content, and the third allows you to have extra functionality on your site without making it cluttered.

Trick 1. Class Action.

Keeping HTML markup easy to read with classes is not really a CSS trick – it’s what CSS was designed for. To demonstrate how it works, here’s a copy-and-pate of a paragraph from a “recent post” on Guido Fawkes Blog of Parliamentary Plots, Rumours and Conspiracy:

…And here’s the markup used to create that paragraph:

Notice in particular the ‘<span style="font-style: italic; color: rgb(255, 0, 0);">‘ in the middle of that HTML mess¹. It’s not so much a problem if he’s only going to use that set of text attributes once, but every single time he makes an aside? That must get tiresome even with a WYSIWYG editor. He also has ‘style=“text-align:justify”’ on all of his paragraph elements, which is similarly inefficient².

The solution is to use a CSS class to defines what an ‘aside’ looks like, and what the normal paragraphs look like. You do this by adding the property ‘class=“myClassName”’ to your HTML elements, and then putting ‘.myClassName’ in your stylesheet (note the dot just before it). It looks like this:

Having done that, the markup for the above paragraph would look like this:

Much cleaner. I use classes to define the look of all sorts of things on Sharpe’s Opinion, from the ‘theLink’ class which defines how the title link should look on my link posts, to the ‘hattip’ class which is discussed next…

Trick 2. Background Information

When I put a hat-tip on one of my posts, it looks…

Like This.

That’s because I have set up a CSS class called ‘hattip’ which looks like this:

You may be able to see how it works by reading the style there, depending on how much exposure you’ve had to stylesheets in the past. The picture of the hat is set as the background image of the paragraph, and then the text is pushed to the right of the picture with a 30 pixel padding on the left. The ‘background-repeat’ property is set to ‘no-repeat’ so that the image only appears once. Again, this means that I don’t have to muck about adding image tags, I just give the paragraph a class of ‘hattip’ (<p class=“hattip”>) and it’s done for me automatically. Simple, yet I think quite effective. I particularly like that it conveys information to the reader without my needing to explicitly say anything. You know what a tipped hat means, I know what a tipped hat means, we all move on.

I use this trick for the hats in my hattips and the open quotation mark in my blockquotes, but there’s two caveats: the first is that the background image doesn’t scale with the rest of the site when you increase the browser’s font size. This means that users who have their browsers set to very large font sizes because, for instance, they are visually impaired, will see a tiny little hat next to some huge text. The second caveat is that you can’t (easily and in a standards compliant manner) turn the background image into a hyperlink. the strawberries scattered about the site, therefore, are simple images, instead of background images.

Trick 3. Now You See It, Now You Don’t.

I don’t know if you’ve ever noticed, but below each post on this blog is a list of social bookmarking buttons – so you can post one of my pages to Digg, del.icio.us, twitter, technorati or some other such service. I know that some people use those services, I know they’re useful for generating traffic, so I put them in there (using the ‘Sociable’ Wordpress plug-in, since you asked). The problem with them, though, is that they are unsightly and messy and I don’t like them actually appearing on my blog. So, they only appear when the mouse rolls over them.

Now, you can use javascript to hide and display the if you want – but it’s fiddley, and frankly overkill when the power is there in CSS to make this happen without any scripting. The way it works is this: the Social Bookmarking links are an unordered list, which is made up of two types of elements – a single <ul> (standing for ‘unordered list’) element which contains several <li> (standing for ‘list item’) elements. That unordered list of social bookmarking links is then contained inside a div element. It looks like this:

The trick to making the rollover work is these three CSS selectors:

The first one makes sure that the ‘sociable’ div still has a height, and therefore somewhere for the mouse to roll over, even when the elements inside it aren’t being displayed. The second prevents any of the <li> elements from being displayed by the browser. The third says, using a ‘:hover’ pseudo-class (which is just a funny name, don’t get hung up on it) that whenever the mouse hovers over the ‘sociable’ div, it should display the <li> elements again. Voila, she is done.

Thanks for listening.

This concludes today’s lesson. Don’t worry, there won’t be a test.

…But there is one more thing. The power of CSS isn’t just constrained to what you can do now. You can also experiment with stuff that you will be able to do in the future. How? Because some browsers, particularly Firefox and Safari, have already started implementing stuff that’s not yet set in the CSS standards. In particular there’s two really clever (and easy to use) properties that I LOVE using. The first is ‘border-radius’, and the second is ‘box-shadow’. To demonstrate, here are two boxes:

Statistically speaking, those two boxes look exactly the same to you. That’s because statistically speaking you are one of the 75% of the internet users who use Microsoft Internet Explorer to browse the web³. If, however, you are using Firefox or Safari, the box on the right will have lovely rounded corners. What’s more, If you are using Firefox 3.1 or higher (Firefox 3.1 is in beta at the time of posting) or Safari 3 or higher, the box on the right will have appeared with a beautiful, slightly offset drop shadow. The code to do this looks like this:

I don’t want to go in to all the detail of how those work, because they aren’t part of the CSS standard and don’t appear in all browsers, but I thought you might like to see them. If anyone’s interested in stuff like this, the basics of writing standards-compliant sites and adding clever tricks to your blog, I’ll keep writing about it. If not maybe I should make a new blog for it. Personally, I’ve always found it interesting to see how other people go about creating their own sites, so I thought it might be enlightening to put up a few little details of the design of Sharpe’s Opinion.

I hope you go off and bake some little things like this into your own site, and start harnessing the impressive power of CSS to create interweb stuff. Until next time, good night.

1. The eagle-eyed reader will notice that the markup for these code demo sections is actually even more of a complete mess, but I figure I have four excuses – 1. It’s extremely hard to write HTML so it appears in the browser as HTML with proper syntax colouring; 2. I’m actually using the ‘Copy as XHTML function in Coda to generate it; 3. Without using inline styles the code elements won’t appear correctly in RSS readers; and 4. I don’t care [↩]
2. Incidentally, there are two more important reasons to keep your code tidy: firstly, less HTML means smaller file sizes which means faster pageloads for people on dial-up connections. Secondly, less markup and more content is more search engine friendly and will improve your page ranking and search engine listings – leading to potentially higher traffic. [↩]
3. actually, and this is a statistic I take much pride it, only around 40% of hits on my blog come from IE, the majority coming instead from Firefox. I take this to mean I have an exceptionally intelligent and discerning audience. Now if only you all used Macs… [↩]