Class and ID are different in some ways, and similar in others. A
class is like a group affiliation, like saying you belong to the
choir. That’s not as strong an identifier as saying your name is Jens.
If someone says your name, you turn your head, right?
So class and ID are entirely different from one another. One is a
group, and you can belong to many different groups while remaining an
individual. The other is a proper name, and in the rules of HTML, only
one element on any given page may have any given ID. So there would
never be another #foo on your page, while many different elements
could have the same class as #foo. And every object on the page can
have its own (unique) ID and every object on the page can belong to
one or more classes, too. They can all belong to the same class if
they need to for some reason, although that’s not likely necessary.
So imagine if you had two different sets of style attributes applied
to one paragraph. One, through class, set the type color to black. The
other, through ID, set it to white. If all else is equal, then the ID
would “win” and the type would be white.
Generally, you want to think about which one to use depending on how
many other things need that same attribute. If there’s more than one
thing that needs that particular set of styles, then you would use
class. You set it once, apply it to many different things.
So if you wanted all of the type on one side of your page to be
Georgia, you could create a class that had only the font-family
attribute, set to Georgia, and you could apply that class to each
paragraph on that side of the page. (More likely, you would apply it
to a container object, like a DIV, that held all of those paragraphs,
so you wouldn’t have to add it to each paragraph separately. But then
if you also wanted the third paragraph down to be blue, you could
create another class with just the color blue in it, and apply that
class to the paragraph as well. So your third paragraph could be <p class="blue georgia">some text</p>
Now, let’s say you wanted the first H2 on the page to be much bigger
and bolder than its brothers, for design reasons. Let’s say also that
you don’t want to set that one tag to be H2 and all the others to H3,
because your semantic hierarchy dictates that all H2s are equal. It’s
just that you need this first one to be bigger and bolder because it
will make the page look better or more balanced. So you set all the
attributes that the H2 tags have in common in either a class style or
simply in the H2 tag style itself. Then you make a single ID-based
style that will turn your first H2 into what you want. So for that
one, you would add a class and an ID, and the ID would “win” so your
H2 would inherit all of the properties of the class (or tag) style,
plus all the extra juice from that one ID style.
Walter
On Apr 27, 2010, at 11:33 PM, _savage wrote:
Right, I understand that.
What I was asking was this: now the paragraph has an id associated
directly (through
but also through the
css class center. In the case of the code generated by Freeway,
both ids are the same and so I assume that’s ok. If, however, the
id defined in the stylesheet was different from the id defined for p
(e.g. .center { id; foo; }, which one would win then?
Jens
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options