Adventures in HttpContext All the stuff after 'Hello, World'

Wiping Out Inherited CSS Styles

Sure, you can use the !important css keyword in your stylesheets to override inherited styles, but what about when you want to simply wipe out or remove a style defined in a parent? Use the auto keyword.

Let’s say you have a style defined in a global.css sheet defining a position for a class called menu: {
left: 10px;
top: 10px;

This will position a

10 pixels away from the top left corner of the parent element.  But what if you want to move that menu to the right side of the parent element, but you can’t change the defined style in global.css?

You create a new stylesheet or define an inline style, and override the class by specifying {

But this simply stretches the menu to the other corner.   We need to override the left:10px; style with the default style (as if we never specified the left:10px; to begin with).  left:none; won’t work and left:0; won’t either.  The solution is the auto keyword: {
left:auto; /* removes left:10px from parent */

Voila, you’re done!  It’s as if the left:10px was never defined!