Inheritance in CSS properties?

Sorry, but no matter how often I read it, I just don't grok it.

I have declared

.submit_button  
{  
  font: 12px Arial;  
  margin:0px;  
  padding:2px;  
}

and now I want to declare center开发者_开发技巧ed_submit_button which inherits from submit_button and adds margin-left:auto; margin-right:auto;

Please take pity on me ...

Unfortunately, vanilla CSS doesn't have any notion of inheritance, but you can achieve what you need with this:

.submit_button, .centered_submit_button
{
    font: 12px Arial;  
    margin: 0px;  
    padding: 2px; 
}

.centered_submit_button
{
    margin-left: auto;
    margin-right: auto;
}

This is probably all that you need, but as scurker mentioned, there are CSS-enhancing tools such as LESS that provide inheritance-like constructs as well as many other nice features that can improve your quality-of-life as a web developer.

In this case, LESS is ironically more verbose, but arguably more expressive:

.button ()
{
    font: 12px Arial;
    margin: 0px;  
    padding: 2px; 
}

.submit_button
{
    .button;
}

.centered_submit_button
{
    .button;
    margin-left: auto;
    margin-right: auto;
}

Another similar tool is Stylus, which does most of what LESS does, but also has a very indifferent attitude about using punctuation in your syntax:

button()
    font 12px Arial
    margin 0px
    padding 2px

.submit_button
    button

.centered_submit_button
    button
    margin-left auto
    margin-right auto

Both LESS and Stylus have client-side JavaScript implementations, so you have the option to host your .less or .stylus files directly or to compile them on the server and host the resulting CSS.

It doesn't work quite like that. There is no concept of inheritance in that sense, in CSS. However, what you CAN do, is define the common attributes of .submit_button and .centered_submit_button, and then redefine the things you want to do differently, for only .centered_submit_button, like this:

.submit_button, .centered_submit_button
{  
  font: 12px Arial;  
  margin:0px;  
  padding:2px;  
}

.centered_submit_button
{
  margin-left:auto;
  margin-right:auto;
}

Unfortunately CSS inheritance doesn't work that way. If you want to do something like you're asking, you'll need to use something like Less. Otherwise you'll have to define the properties per element or add multiple classes to an element.

I don't know what's up with these people who say you "can't do inheritance" in CSS. Sure, CSS doesn't call it inheritance, but you can still accomplish the same effect. It all hinges on a topic called CSS specificity, which says that when there is a conflict of rules, the most specific rule will be applied.

In your case, you could do something like this:

.submit_button  
{  
  font: 12px Arial;  
  margin:0px;  
  padding:2px;  
}

.submit_button.centered
{
  margin: 0 auto;
}

The first rule given defines the styling for all elements with class submit_button. The second rule applies to all elements with class submit_button and class centered. It's perfectly valid HTML and CSS to have multiple classes on a single element (just separate the class names with spaces in the HTML class attribute). Now, the second rule is more specific than the first, since it matches everything the first rule does (submit_button class) plus something more (centered class). As a result, the conflict in the margin rule for the centered class is resolved by taking 0 auto over 0.

Specificity is very powerful once you are familiar with how it works. It really helps reduce code in situations like the one you just described.