Well I never
Colouring in
If there’s one thing I know when it comes to web development, it’s CSS. I don’t always write it in the most organised fashion (though I like to think I do when I’m given a finished design to work from), but for over a year now I’ve felt that my knowledge about the bits of CSS that I use daily is pretty complete*. And for the bits I don’t have to use very often I an always find what I need on the internet.
So imagine my surprise today when I realised that there’s one area of CSS that I use everyday with a fetaure I was completely unaware of. I’d always thought that
p{color:red}
meant “Make the text in the paragraph red”, but it turns out that that’s not the full story.
In all browsers, it seems, if border-width and border-style are defined for an element, but no border-color, then color also defines the border colour. But then if you define a value for border-color then color gets ignored when calculating the border colour. Even if you use another selector of higher specicifity to set a new value for color this still has no effect on the border colour. Here is a demo page.
But is it of any use?
Well, yes – it turns out it is.
Let’s say you want to define a generic button item as follows
.button {display:inline-block;border-width:2px;border-style:solid}
Then you can coordinate the text and border colour of the buttons by just using, eg
.cancel {color:red}
And this technique could be used for all sorts of generic elements where text colour and border colour are normally same. To use a different colour for the border it’s an easy thing to over-ride too.
Has anyone ever included both the British an d American spellings of colour this much in one article before?
* excluding newly emerging vendor-specific styles, eg -webkit-make-it-look-cool {}
Related posts:
- It’s not what you say, it’s which font you say it inI’m redesigning this site at the moment and one thing...
Tags: border-color, color, specicifity