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
Think of an ID as a unique identifier for a "single" element and a class as an identifier for a "group" of elements. In your case you just want to control the style of a single p tag so use an ID. in CSS: p#nomargin { margin-top: 0px; } in HTML: <p id="nomargin">Your text here</p> Cheers! ------------------------------------------- AYCOM Consulting - Web Development
Thanks aycom. What is the advantage of using p#nomargin { margin-top: 0px; } rather than #nomargin { margin-top: 0px; } ?
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. I hope that answered your question. -------------------------------------------------------------- AYCOM Consulting - Mid to High-End Web Development
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?
The foo#bar{ } rule works better when applied using classes, as classes can be used multiple times, where ids cannot .this{ } will be applied to any element with class="this" p.this{ } will be applied to any paragraph with class="this"
Rather than to any paragraph the more appropriate way to define would be to ONLY paragraphs. p#name would mean that the named NAME will be used to one and only to paragraph p.name would mean the named class can be used to more than just one paragraph in the same document, but ONLY to paragraphs, you can't apply the same class name to div's for example (well you can, but it won't apply the CSS rules).
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
Something else is going on... adding a doctype should not be changing the look of your page at all... unless all this time you were looking at it in a browser's quirks mode and now with a doctype you are looking at the page in "standards" mode. This is about margin collapse and remember that you may have other paragraphs in other columns elsewhere. The above statement quoted works fine for when all paragrahps are stacked under each other as in a book or something. A lone p sitting somewhere might look weird though. By the way, what was said about the difference between p#nomargin and #nomargin... there is zero difference. When you see it, it's usually the coder keeping track of what (s)he's naming. Because there may only by one id per page, #nomargin means the one thing called #nomargin. Whether it's a p or a div or whatever, the code ignores it, because there is only one. If you need the p to describe #nomargin, it may not be the best name then. If you continue building your page and notice spacing differences between browsers, then the universal reset * { margin: 0; padding: 0; } might be what you want. Everything is set at zero on all browsers and then at least you're starting from the same point while adding back whatever margins and padding you want. As for remembering what's what 1 year later... name your stuff carefully. Try to describe what it is and not where or what it looks like. Try not to use a name like "justify" if that's describing text-justify... it's a perfect name if it's the paragraph about "Justifying" something. If it describes the content, you will remember pretty well what was what. You stop being a peon after 10 posts, I think. Or at least, that's when you can post links.
Ya someone else built the site and left off the doctype. So I have been looking at it in quirks mode this whole time. So I am trying to put it in with minimal damage. Man that reset code is a powerful tool to know, thanks.