Sent by Adam Kuehn on 17 February 2005 18:06
Charles Fowler wrote:
>I am taking a postion of using # (id) for CSS-P rules, and .class
>for formating rules in order to separate and modularise my
>stylesheets.
I'm not entirely sure how you mean that, but it doesn't sound like
the best way to go about things. It is often easiest to divide you
page into major sections (e.g. header, footer, navigation, content)
and give each of those sections (usually applied as divs) an
appropriate ID. However, it is frequently the case that descendant
selectors will be useful for applying CSS, whether for positioning or
for other types of styles. You can even separate them out in your
style sheet, if that helps you visually.
For example, there's nothing technically wrong with doing this:
#content { position: absolute; left: 0; padding: 0; margin: 0 } /*position*/
#content { font-family; sans-serif; color: #fff } /*format*/
But it is often easier to do this:
#content p { /*format rules for main content paragraphs*/ }
But if you start adding unnecessary classes, you may find yourself
becoming more confused rather than less. Descendant selectors are
your friend. They clean up a lot of mess. I find myself having
needing classes only occasionally, and if I start having too many of
them, I usually start to look for a cleaner way. I would not
recommend classing everything in sight just as a hook for your
formatting CSS.
>But can someone tell me why, when I use an Id and Class style rules
>on the same element, which don't semantically over lap, but actually
>complient each other are not applied properly, or which browser have
>issues?
You'll need to show us a working page. CSS *selectors* that have
more than one class and/or ID in them can be a problem in IE/Win, but
every modern (post generation 4) browser properly supports having
multiple classes and IDs on a single element. Remember that ID
"trumps" a class, so if any rules conflict, the ID wins, regardless
of source order. E.g., given this:
CSS:
#thisone {color: red;}
..topic {color: blue; width: 5em;}
HTML:
<p class="topic" ID="thisone">stuff</p>
The word "stuff" will be red, but the paragraph will still be 5em
wide. Does that help clarify?
>Additonally, in the separation of stylesheets, I have having issues
>with the second externally linked (<link />) stylesheet rules (eg
>formating) being inconsistantly displayed.
It is not clear what the problem is. Can you show us the page?
There are a couple of things that could be happening, and we can't be
sure exactly what you mean by "inconsistently displayed". It would
be much easier to take a look at your actual page.
--
-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
