No I'm not going to talk about Paris Hilton (although she may not have so much to waste anymore now her grandfather has decided to give $US2.3 billion to charity 😉), what I want to talk about today is something that I've seen cropping up quite a lot on my travels through sites and code (usually via requests for help on forums) and that is a lack of understanding about CSS inheritance.
Inheritance is the process whereby style properties are passed from parent elements to their children if they have not been explicitly set otherwise on the children. So the idea is to set your baseline of styles on your containing elements (including the
body) and then only define differences on children elements where they are needed.
Not all properties are inherited; the ones that are generally are those that affect text: font properties,
color. (It doesn't make much sense to have things like margins/padding inherited because children elements would get progressively indented further away from their parents and those around them; or floats/absolute positioning because then your page would just end up a jumbled mess! :[)
It's all very well to talk about inheritance in these sort of terms and to talk about computed values and the document tree but a lot of people, particularly CSS newcomers find technical documents a bit dry and sometimes over their heads, so I'll start off by giving some examples to illustrate what I mean. This is the wrong way:
And this is how it could be written more concisely:
In the first example, the
color are set on the body. This means that every piece of text throughout the whole page will inherit these properties. So having already set the
font-family to be
"Trebuchet MS", Tahoma, Arial, there’s no need to specify it again on the heading tags h1-h4; it’s already inherited by those elements. (The original example also omitted sans-serif from the end of the font-family – it’s always a good idea to specify a generic font-family at the end the rule in case none of the other choices are available on an individual’s machine.)
The rest of the properties –
color – aren’t actually to be inherited but we can make the stylesheet more concise by grouping the elements together and applying the rules to all of them and then just individually applying rules to elements as with the font-sizes, the different colors and the
font-weight for the
Let’s look at another example that you may come across quite often:
Not only is this far fewer lines, it’s also eaiser to read and to see what the differences are between the different states of the links. The only thing different between the normal and visited state is that the visited state is a different color, so that’s the only thing we need to specify. And with the hover, focus and active states, the
color combination have simply been reversed. There’s no need to specify anything else because these properties have been inherited from the
link state of the anchor.
When you’re writing code, one of your aims should be to write as little as possible. It’ll save you typing, it’ll make your file sizes smaller, so they’ll upload/download quicker and save bandwidth and it’ll also make maintenance easier, so everyone wins with savings for both developers and site owners, and site visitors.