CSS extend

This is very simple thing that we do not care too much. When we write CSS file, have you knew that, we can extend CSS attributes from one CSS class to a another CSS class. I will explain this using a very simple example.

Suppose you want to have some customized border styles for cells of a table. For some table cells You need only the top border only, and some other cell You need only the top and bottom border only. For this kind of scenario's, We can use CSS extends feature rather adding repeated CSS attributes.

This is the CSS class for table border top.

.border-top {
        border-top: 1px solid #CCCCCC;
}

Next, You want to have another CSS class for table cells with top and bottom border. If You do not consider about CSS extends, You have to write a CSS class as fallows.

border-top-bottom {
      border-top:1px solid #CCCCCC
      border-bottom:1px solid #CCCCCC;
}

You can see, You have repeatedly added "border-top: 1px solid #CCCCCC;" line for top-bottom CSS class as well. If you extends 'border-top-bottom' CSS class from 'border-top' CSS class, You do not need to do so.

Now I am going to modify 'border-top' CSS class as fallows.

.border-top,  .border-top-bottom {
      border-top: 1px solid #CCCCCC;
}

The above CSS class declarations simply says that, 'border-top-bottom' CSS class inherits all the CSS attributes from 'border-top' CSS class. Then You can write 'border-top-bottom' CSS class as fallows.

.border-top-bottom {
      border-bottom: 1px solid #CCCCCC;
}

You do not need to add 'border-top: 1px solid #CCCCCC;' attribute repeatedly. Further if You want to write CSS class for table cells with border top and right, You can modify 'border-top' CSS class as fallows.

.border-top, .border-top-bottom  .border-top-right{
     border-top: 1px solid #CCCCCC;
}

See carefully, I have added a comma after 'border-top' CSS class and not after 'border-top-bottom'. The above CSS declaration says that, 'border-top-bottom' and 'border-top-right' both CSS classes inherits CSS attributes from 'border-top' CSS class.