HTML and CSS Reference
In-Depth Information
CSS Specificity And Inheritance
Inayaili de Leon
CSS' barrier to entry is extremely low, mainly due to the nature of its syntax.
Being clear and easy to understand, the syntax makes sense even to the
inexperienced Web designer. It's so simple, in fact, that you could style a
simple CSS-based website within a few hours of learning it.
But this apparent simplicity is deceitful. If after a few hours of work, your
perfectly crafted website looks great in Safari, all hell might break loose if
you haven't taken the necessary measures to make it work in Internet
Explorer. In a panic, you add hacks and filters where only a few tweaks or a
di
"
erent approach might do. Knowing how to deal with these issues comes
with experience, with trial and error and with failing massively and then
learning the correct way.
Understanding a few often overlooked concepts is also important. The
concepts may be hard to grasp and look boring at first, but understanding
them and knowing how to take advantage of them is important.
Two of these concepts are
specificity
and
inheritance.
Not very common
words among Web designers, are they? Talking about
border-radius
and
text-shadow
is a lot more fun; but specificity and inheritance are
fundamental concepts that any person who wants to be good at CSS should
understand. They will help you create clean, maintainable and flexible style
sheets. Let's look at what they mean and how they work.
