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, line-height, text-align and 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:
body {
font: 75%/150% "Trebuchet MS", Tahoma, Arial;
color: #36130c;
background: #36130c;
}
h1 {
font: bold 240%/100% "Trebuchet MS", Tahoma, Arial;
}
h2 {
color: #59770e;
font: normal 190%/100% "Trebuchet MS", Tahoma, Arial;
}
h3 {
font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
color: #758d38;
}
h4 {
font: normal 130%/100% "Trebuchet MS", Tahoma, Arial;
color: #758d38;
}
And this is how it could be written more concisely:
body {
font: 75%/1.5 "Trebuchet MS", Tahoma, Arial, sans-serif;
color: #36130c;
background: #36130c;
}
h1, h2, h3, h4 { line-height: 1; font-weight: normal }
h1 {
font-size: 240%;
font-weight: bold;
}
h2 {
color: #59770e;
font-size: 190%;
}
h3, h4 { color: #758d38; }
h3 { font-size: 140% }
h4 { font-size: 130% }
In the first example, the font-family, font-size, line-height and 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 – line-height, font-weight and 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 h1.
Let’s look at another example that you may come across quite often:
a:link {
background: #fff;
color: #000;
font-weight: bold;
text-decoration: none;
border-bottom: 1px #000 solid;
padding-bottom: 2px;
}
a:visited {
background: #fff;
color: #800080;
font-weight: bold;
text-decoration: none;
border-bottom: 1px #000 solid;
padding-bottom: 2px;
}
a:focus, a:hover, a:active {
background: #000;
color: #fff;
font-weight: bold;
text-decoration: none;
border-bottom: 1px #000 solid;
padding-bottom: 2px;
}
This can be rewritten as:
a:link {
background: #fff;
color: #000;
font-weight: bold;
text-decoration: none;
border-bottom: 1px #000 solid;
padding-bottom: 2px;
}
a:visited { color: #800080 }
a:focus, a:hover, a:active {
background: #000;
color: #fff;
}
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 background-color and 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.
