Skip to main content

Inheritance in CSS

CSS Inheritance

An explanation of how inheritance works in CSS and why CSS doesn't need Object Oriented style inheritance.
Introduction

Many newcomers to CSS are confused by inheritance; this is often because they come from a background in object oriented (OOP) programming and expect CSS to work in a similar way.

This document attempts to explain CSS inheritance and present alternatives to OO-style inheritance to demonstrate why it is not necessary.
CSS Inheritance

CSS inheritance works on a property by property basis. When applied to an element in a document, a property with the value 'inherit' will use the same value as the parent element has for that property.

For example, given this style sheet:

`.foo {
background-color: white;
color: black;
}

`.bar {
background-color: inherit;
color: inherit;
font-weight: normal;
}

And this HTML fragment:

div class="foo">


Hello, world. This is a very short
paragraph!


`div>

The background colour of the div element is white, because the background-color property is set to white. The background colour of the paragraph is also white, because the background colour property is set to inherit, and the background colour of the parent element (the div) is set to white.

The inherit value does not require that the parent element have the same property set explicitly; it works from the computed value. In the above example, the color property of the paragraph has a value of "inherit", but the computed value is "black" because it inherits.

This might seem like a lot of typing, but the default value for many properties is already inherit, and for most others (border for instance) you wouldn't usually want to inherit the parent element's value.

While on that line of thought, I'll point out that not all properties can be inherited.
Object Oriented inheritance

Many people ask on mailing lists and in newsgroups about CSS if it is possible to do something such as:

`.foo {
background-color: white;
color: black;
}

`.bar {
Some reference to the above style for .foo
font-weight: normal;
}

It isn't. A selector is just a selector, there is nothing special about classes. Things would get rather complex if you had .foo > .bar as the selector for a style you wanted to import, or multiple identical selectors.

I won't go into how CSS could be changed to allow such functionality, not only would there be a lack of support among today's generation of browsers (which are likely to be with us for a long time to come), but it isn't needed. CSS already gives us the tools we need.

There are several approaches we could take.
Multiple Classes

Making good use of classes will solve most problems. Take the example of having boxes of data floating on alternating sides of the canvas.

`.oddBoxOut {
width: 12em;
float: left;
padding: 0.5em;
margin: 0.5em;
border: solid 1px black;
}

`.evenBoxOut {
width: 12em;
float: right;
padding: 0.5em;
margin: 0.5em;
border: solid 1px black;
}

As you can see, many properties are duplicated in each definition, so it is obvious why somebody might want OO-style inheritance.

There is another solution though. Lets take a quick look back at the HTML specification:

` class = cdata-list[CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

So we can assign multiple class names to a single element? That means we can change the style sheet so it looks like this:

`.boxOut {
width: 12em;
padding: 0.5em;
margin: 0.5em;
border: solid 1px black;
}

`.oddBoxOut {
float: left;
}

`.evenBoxOut {
float: right;
}

And then the HTML will look like:

`div class="boxOut oddBoxOut">div>

Grouping Selectors

A single style may have multiple selectors assigned to it through the use of grouping.

To revisit the previous example, we first simplify the HTML so we only mention the one class:

div class="oddBoxOut">div>

Then we assign the CSS we want to it, but we group the common property/value pairs.

`.oddBoxOut,
`.evenBoxOut {
width: 12em;
padding: 0.5em;
margin: 0.5em;
border: solid 1px black;
}

`.oddBoxOut {
float: left;
}

`.evenBoxOut {
float: right;
}

These two techniques should solve most problems which people think can be solved with OO-style inheritance

Comments

Popular posts from this blog

MS interview

Algorithm Collection Q1: How would you find a cycle in a linked list? Try to do it in O(n) time. Try it using constant amount of memory. Q2: Given a history of URLs, how would you determine if a particular URL had been seen before? Q3: Since pages can have multiple URLs pointing to them, how can you make sure you've never seen the same CONTENT before? Q4: Come up with the plan on how to traverse a graph, as well as to quickly determine if a given URL is one of the million or so you've previously seen. Q5: The Web can be modeled as a directed graph. Come up with a graph traversal algorithm. Make the algorithm non-recursive and breadth-first. Q6: Write a function to print the Fibonacci numbers Q7: Write a function to print all of the permutations of a string. Q8: Design a memory management scheme. Q9: Give a one-line C expression to test whether a number is a power of 2. Now implement it without using loops. Q10: How can I swap two integers in a single l...

Amazon interview question Collection

General Questions and Comments [more] generic questions on software development -------------------------------------------------------------------------------- What is the complexity of this algorithm -------------------------------------------------------------------------------- What is your stronger language (Java or C#) -------------------------------------------------------------------------------- Lot of design questions and OOAD stuff 2 -------------------------------------------------------------------------------- Programming questions asked were more or less same as the ones listed at this site -------------------------------------------------------------------------------- more architectural view about solve problem capability. I think the intervier was more realistic than the other two . Not just because he recommend to 2nd interview, since I also have the experience with recuriting other employees in the past. I felt the potenial is more than anything in work. Coding is j...

Few Software Development Knowledge

 What are the benefits of OOD? o Object oriented design facilitates “Reusability”, “Extensibility” and “Modularity” of the software. We can divide the software into many components/classes so that “Abstraction” can be done on the changing part and non changing part to support the “changeability”. Plus Inheritance, Composition and polymorphism will always help in implementation.  Explain how the Garbage Collector works in C# o The GC of the C# (.Net rather) is a cool component in .NET framework. Being a C++ programmer, I truly understand the importance of it. I don’t need to worry about allocating /freeing the memory once I use it in .net. In c#, all the object memory management is done in “Managed heap. GC collects the unused memory based on metadata information which gives the memory layout of the created object. It performs the collection in two phases. Mark -> GC first finds the root of each object and traverse to the bottom of it adding each object and make a graph of it. It...