CSS Tricks

How to Override Inline CSS Styles

Explaination: Inline styles have the highest priority of all CSS, well, in general.  There is a way to override inline styles from an external stylesheet. This will force the text in the sponsored tag to become width 550px in the example Below. I’ve tried this in IE7, IE8, Firefox 3, Firefox 3.5, Safari 4, Chrome.

Keep in mind to only use this technique when you have no other alternatives.

eg

The “Sponsored Links” text will end up with width 550px, not 500px

<!– external stylesheet –>

<style type=”text/css”>

{

.sponsored { width: 550px !important; }

}

<!– Inline styles are those defined in the HTML –>

<span id=”ctrlTop” style=”width: 500px; display: block;“>

<div id=”ctlHeader“ class=”sponsored“>Sponsored Links</div>

</span>

How to create a box that is expandable in height?

<!– HTML –>

<div id=”masthead”>

<div id=”left”>left content goes here</div>

<div id=”right”>right content goes here</div>

<div class=”clear”></div>

</div>

<!– css –>

#masthead

{

position:relative;

min-height:180px;

width:897px;

clear:both;

border-left:solid 1px #CCCCCC;

border-right:solid 1px #CCCCCC;

}

#masthead

{

position:relative;

min-height:180px;

width:897px;

border-left:solid 1px #CCCCCC;

border-right:solid 1px #CCCCCC;

}

div#masthead .clear

{

clear:both;

}

Advertisement

Tags: CSS, CSS !important, inline CSS override