Designing decisions: Cascading Style Sheets

When it comes to implementing your web designs CSS is a powerful tool. Learning CSS can be a lot of fun too.

I like to think that I’m fairly knowledgeable when it comes to CSS. It’s been fun: I started learning how to change colours and I’ve come to a point where I can lay out a whole page and figure out how to reproduce effects that I see on the net.

I knew that there were things that I didn’t know, but I didn’t realise there were so many! Most of them don’t come under the everyday use of CSS, if there is such a thing, but some do.

Width, Padding and Margins

The first, and possibly most embarrassing gap in my knowledge (not that I feel the need to be embarrassed when I don’t know something) was how padding behaves in regards to width.

How I thought it worked

I always thought that under the box model you had a box of a certain width, any padding pushes whatever was inside the box inwards and margins pushed things away from the box.

It made sense to me: if you think of it like a shipping crate or box – the box has dimensions and the padding (most likely those little styrofoam balls) go inside the box to stop the items hitting the sides of the box. This might actually be how IE works, but it’s not how standards compliant CSS is supposed to work.

How it is supposed to work

It actually works as shown above by Brett Merkey (more recent versions of IE should work the correct way).

I did discover, through practice, that my measure calculations didn’t work the way I thought they should. So, I have been using width+padding as the total dimensions — otherwise layouts just don’t work. I just thought it was buggy!

:before and :after pseudo-elements

I’ll admit that I haven’t thought much about pseudo-elements before. I’m familiar with :hover and :visited, since their use with links is a common feature of websites, but I’m not sure I’d even heard of :before and :after until recently!

I came across them because I wanted to style lists with CSS, without a background image, and using something a little more subtle than the standard bullets.

That search brought me to this W3C page (a little cumbersome to read, but useful), and A List Apart article Taming Lists.

You can use these pseudo-elements on most other elements to put an image or character(s) before or after something — a paragraph, blockquote, list, image, link… I thought that it could be useful for identifying links that open in a new window, rather than using javascript or a background image.

CSS inheritance

As described on SimpleBits,

One of the easiest ways to optimize your code when dealing with basic markup styled with CSS, is to strip out unnecessary class declarations as well as redundant div tags.

The idea is that instead of using a whole lot of ids and classes to style your page, you can cut down the clutter by using the cascade inheritance and nested elements.

<div id="post"><p class="entry"><span class="whatever">Some content.</span></p></div>
becomes,
<div id="post"><p><span>Some content.</span></p></div>
and can be styled with
#post p span {font-size:12px; color:#222;}

It saves bytes in server storage (hey, they could add up!) and it saves remembering a mass of ids and classes.

What I’ve learnt about inheritance

While I already knew about this method of implementing CSS (I think I might have even seen that SimpleBits article a few years ago. I didn’t realise that you had to be a bit careful with your specificity.

You see, when you style an element with CSS, if you give another style to the same element later in the CSS file, it overrides the earlier style. This can be useful; for example, you can set overall styles for links and then you can set more specific styles for the links within posts. Or you could remove all the default margins and paddings and add them back into each element as you like it.

However, when you’re using this inheritance method, your overriding styles must be as specific or more specific than the ones you’re trying to override.

One style might be,
#sidebar .sidebar li.widget a img {border: none;}
and I might want to give a particular image a border,
a img.framed {border: 3px solid #222;}
won’t cut it. I need to make the inheritance more specific to override the first one.
#sidebar .sidebar li.widget a img.framed {border: 3px solid #222;}

Or better yet, don’t be too specific at the start of your CSS file, and save running into problems later.
li.widget a img {border: none;}

Congratulations on getting to the end of this one!
Previous Designing decisions posts have been,

1. Hierarchy
2. Width
3. Links