ID, Class, Descendent, or etc - Which is most appropriate?

[ewwatson]

What is the best way to apply p { margin-top: 0px; } to only one p tag on each page - class, id, decedent, or etc? The only p tag that I need to apply no margin to is the one right after the h1. Not the others.

I will put it in an external style sheet. I'm pretty sure it's an ID selector that I need, but I want to be sure before I apply to each page. Thanks

[Marcia]

For just one paragraph on only one page that has different styling (the top margin), using an id isn't really necessary. You could just put the style inline to avoid unnecessary repetition and keep the stylesheet from getting bloated.

<p style="margin-top: 0.0em">

Otherwise, if it's the formatting for a differently formatted paragraph that will be used on more than one page, you could just code that paragraph <p class="rightpar"> in the HTML, and in the stylesheet use

p.rightpar {margin-top: 0.0em;}

[ewwatson]

Thanks Marcia. but what is the advantage of using

p.rightpar {margin-top: 0.0em;} rather than just

rightpar {margin-top: 0.0em;}

[Xapti]

Well there is a selector which does exactly what you want, but it's not widely supported. It would consist of using an Adjacent sibling combinator:
h1 + p{}

[Marcia]

>>rightpar {margin-top: 0.0em;}

Where would that go and what would it be telling the browser to do? And which element would it refer to? Is it a paragraph, a div, an (Hn)

If it were in the stylesheet like that, then the HTML code would have to read <rightpar>Some text.</rightpar> and there's no such thing in HTML.

p.rightpar {margin-top: 0.0em;} in the stylesheet is telling the browser that when it sees a paragraph with a class of rightpar in the HTML, to do what that says to for that paragraph. In the HTML code for the page would look like <p class="rightpar">Text here.</p>

[HarryM]

As Marcia wrote you can put p.rightpar {margin-top: 0.0em;}. But you can also code classes in various ways.

p.rightpar{margin-top: 0.0em;}
p.rightpar{margin-top: 0px;}
p.rightpar{margin-top: 0;}

.rightpar{margin-top: 0.0em;}
.rightpar{margin-top: 0px;}
.rightpar{margin-top: 0;}

I would automatically code it as .rightpar{margin-top: 0;}, but I have no idea which is the most efficient, and would be interested to hear.

I have never seen anything which compares ID selectors with classes, so again would be interested to hear if there is any practical reason why one should be chosen before the other.

[Marcia]

>compares ID selectors with classes

Classes can be used a number of times on pages. If there were ten paragraphs on a page and someone wanted the first and last paragraphs to be in red text instead of black, they'd be able to use the class as many times as they want.

p.bright {color: red;}

<p class="bright">Red text</p>

Div ID should only be used once on a page and one time only. Like repeating <div id="section"> a few times in the navigation will cause error messages when trying to validate, for all but the first one.

[ewwatson]

Another user posted this. I think this answerers it most appropriately.

"It will do the same thing but it's more a matter of writing "good" code. An ID should only be used for a single element and if you wrote your code using #nomargin then that would apply to all HTML tags instead of just the <p> tag. p#nomargin is just a way of being more specific. You can of course do it either way and even use a class instead of an ID but "standards" specify that you should use p#nomargin and it's always good to get in that habit. It really makes things easier a couple years down the road when you need to work on your code or if someone else has to work on your code at some point."

[ewwatson]

So I just changed my div ID from #divjustify to div#justify - so I am being more specific. So I assumed Dreamweaver CS3 would account for this. It does not seem to. I't allows me to, and gives me the option to apply that div#justify ID to any property, be it a p tag or etc.

However it only works when applied to a div. Seems to me this could get a little confusing. Since 1 year from now I will not remember what property I applied the #justify to. Therefore I will always have to look at my .css sheet to verify. Is this write, or am I doing it wrong?

[Marcia]

Best practices in coding means approaching tasks in the simplest, least uncomplicated manner to accomplish the task at hand, taking into consideration the current experience, skill level and capabilities of the person doing the coding. It's using the right tool for the job, somewhat dependent on who's doing the job.

ID selectors are often more difficult and complicated to work with, and are not intended for the same purposes that class selectors are. And when they're used, they can cause far more difficulties and debugging than when simple class selectors are used.

Realistically, a <div id="foo"> is most appropriate for a "section" within a document that could have several different elements within it. And the id= should only be used once in a document. Then, there are inheritance issues involved, especially when shorthand properties are used.

Stylesheets always have to be looked at; over time there are improvements that can be made to them to refine and improve code and and trim down the code size and efficiency.

Things should be named intuitively so it's easy to recognize what they're for by simply looking at the code. <p class="first">Means just what it says - it's the first paragraph. Simple and easily understood and implemented. Best practice because it's easy to do, it works, it's fast (about 3 minutes maximum to implement) and it'll pass the W3 validator.

KISSS: Keep it simple, short and sweet.

[ewwatson]

So to recap, I am adding a doctype and beginning html to all my pages. When I do it moves the page down a little bit. I have been trying to find the best solution to that, and here it is. This way, I put it once on my .css and thats it - no ID's or class's needed.

The best way to apply solution to the p tag that I have found

"Just apply it to all p tags because all p tags have a top margin applied. It will only be obvious on the first item at the top because the bottom margins collapse with the top margins of vertically adjacent elements."

Code:

h1 { margin: 0px; }
p { margin-top: 0px; }

The code should be first in the stylesheet so that any subsequent margins are not over-ruled