CSS refresher

Forgotten how to get a child element optimised in CSS.

Lets day I have the headers:

<h1>Welcome</h1>

<h1>Content</h1>

<h1>Summary</h1>

The CSS might be:

.header h1 {margin:0; padding:10px 10px 10px 10px; background:url(../img/header.png) no-repeat; background-position:10px 10px; font-weight:bold; font-size:120%;}

I want to change the background for one of the headers, but retain all the other formatting. I figured that:

<h1>Welcome</h1>

<h1 class="different">Content</h1>

<h1>Summary</h1>

with

.header h1 {margin:0; padding:10px 10px 10px 10px; background:url(../img/header.png) no-repeat; background-position:10px 10px; font-weight:bold; font-size:120%;}
.header h1.different {background:url(../img/header2.png) no-repeat;}

Unfortunately this changes the image, but the position is lost. However:

.header h1.different {background:url(../img/header2.png) no-repeat;background-position:10px 10px;}

...does the trick. Is there a shorter way to do it? I'm trying to minimise the code.

I'll take the lack of responses as a no.

What's the '.header' junk for? You just need h1. Also 'background' on its own is a shorthand, you are using it incorrectly (with blank values) which is why it is overwriting the less specific values. Do this;

CSS
1 23 45 67 89 10	h1 {  margin:0; padding:10px;  background-image: url(../img/header.png); background-repeat: no-repeat;  background-position:10px 10px; font-weight:bold; font-size:120%;} h1.different { background-image: url(../img/header2.png); }

LoL!

Back again, and as polite as ever. Read up on CSS and learn why the .header is there.

Well, I assume it's because all of the h1s you're targeting are inside a div with class header, which you haven't showed in your code. Either that or you have no clue why you're even using it and just copy pasted the code from some other site. Judging by the way you're using background, I can make a pretty good guess that you're doing it wrong.

oh and stop using relative font sizes.

In reply to a post by 12eason:

Well, I assume it's because all of the h1s you're targeting are inside a div with class header, which you haven't showed in your code.

I took it as read that anyone who can improve the code can assume that much. No it isn't copied and pasted. It's not wrong.

They are relative for a reason. Stop being a plug for a second and think about why they would be relative. What does the word mean? Anyway, I'll take my second post as the answer. No one else is bothering, and your attitude (to most things), as usual, becomes the problem.

End of conversation.

The word means more redraws and slower load times. Avoid % and ems and stick to pts and px.

You're welcome btw. Perhaps you'll use w3schools before asking such inane questions next time?