Css elements - changing one particular element

[stfc_boy]

Hi Guys,

Quick question. Say throughout my site I have a style that's used throughout my site. I'd basically declare this in a external stylesheet:


h2 {
color:#0064ac;
background:#dadada;
font-size:1.25em;
padding:1px;
padding-left:4px;
text-transform:uppercase;
margin-bottom:5px;
width:500px;}


And then call it in:


<h2>This is the h2 element</h2>


But say on one page I wanted the width to be 300px, is there anyway I could simply change the width in the <h2></h2> tag on one page without messing with all the others? Or is it a case of redeclaring a new css style?

Thanks

Chris

[VIPStephan]

You’d declare a new style with only the changes. You can do this by either giving the specific element a specific ID or class, or by using any difference to all the other elements. I.e. let’s say you have your h2s in a div at the top, and the specific ones that are supposed to look different are not at the top:


<div id="content">
<h2>Headline</h2>
<p>Lorem ipsum…</p>
<p>second parapgraph</p>
<h2>Another headline</h2>
<p>Lorem ipsum…</p>
</div>


Then you would first define the styles that are for all h2s and then you’d declare a new rule that either only the h2s on top will get or the ones that are in the middle:


h2 {
color:#0064ac;
background:#dadada;
font-size:1.25em;
padding:1px;
padding-left:4px;
text-transform:uppercase;
margin-bottom:5px;
width:300px;
}
h2:first-child {width: 500px;}

Here I’ve said all h2 are supposed to be 300px wide unless they are the first child of any element. You can get more specific if writing div > h2:first-child. Vice versa you could write:


h2 {
color:#0064ac;
background:#dadada;
font-size:1.25em;
padding:1px;
padding-left:4px;
text-transform:uppercase;
margin-bottom:5px;
width:500px;
}
p + h2 {width: 300px;}

This says all h2 are 500px wide and only those that are directly following a paragraph (as sibling, not child or parent) should be 300px wide.

Note that these methods only work in modern browsers (incl. IE 7), i.e. will be ignored by IE 6. If you wanna be fully compliant you’ll have to go with a class or ID for the specific headlines.
Read up on CSS selectors (http://www.w3.org/TR/REC-CSS2/selector.html), that may help.