CSS help please

[fatjames]

Hey,
I'm struggling with something with HTML/CSS.

I have a DIV(eg_div), within the DIV are some paragraphs.

I want to target some paragraphs (ie, margin-left: 10px;) but want to target other paragraphs within the same DIV (ie Margin-left: 20px;)

I can't quite work out how to do this.

I've tried (for example)

<p>stuff</p>

#eg_div p{
margin: 10px;
}



<p id="fat_margin">other stuff</p>

#fat_margin{
margin: 10px;
}

But it just seems to ignore the css for fat_margin.

Any advice would be great.

[J.M.]

Instead of styling specific IDs, create class styles. You specify what class styles should be applied to a particular DIV.

You can create a class for margin 10 and a separate class for margin 20.

The paragraphs can then also have classes applied to them, and you can apply the margin 10 class to the first, margin 20 class to the second, etc.

In general styling based on IDs isn't great. If you style on classes instead you can reuse your styles and minimise having the same styles duplicated all over the place (a nightmare for maintenance).

Also remember you are only supposed to use an ID once per page. You shouldn't have two elements with id="x". If you find yourself doing that, you're using IDs as classes, and should instead use classes.
____________________
2004 R1 & 2018 XSR900

[Jayy]

Can you not post the HTML up?

As JM said, classes bro.

You can apply different margins to both classes then (if they require different rules).

.fat_margin1 { margin-left: 10px; }
.fat_margin2 {margin-left: 20px; }

Then it would be:

<p class="fat_margin1">10px Margin</p>
<p class="fat_margin2">20px Margin</p>

The parent container could be a #, if it's unique and you don't want to style it elsewhere but for this purpose, you would re-use the classes wherever needed.

It depends what you're trying to achieve though, hard to say what's the best way to do it without seeing your HTML.

[J.M.]

Example: https://jsfiddle.net/navogfaL/
____________________
2004 R1 & 2018 XSR900

[G]

Press F12 - on most browsers this should give you a 'developer mode' - click the inspect item item button and select the bit you want.

This should hopefully give you an idea of why it's not doing what you want (iel it's over-ridden by a different style etc.)

[Jayy]

[fatjames]

Thanks everyone, that totally makes sense.
I think I've been misusing IDs for a while! (the style sheet is for about 40-50 pages and I haven't used class at all )

I can't post the specific code as it's from my Intranet site and has stuff on it I can't share, but you've got what I was trying for.

My CSS is about a million lines long.. I might have to do some housekeeping..!

Thanks again, I really do enjoying learning.

[Jayy]

Jesus, 40-50 pages long! That would be why then, using no classes when you could have re-applied the same classes to most of your HTML.

What are you using to edit it? I highly recommend Sublime Text 3, great editor.