How does one use multiple css id's for an output element? 1

[BobMCT]

As I am migrating most of our "old" Zope html to new xhtml w/css its going reasonably well. By defining attributes in the css and referencing them where needed the results seem to be reasonably close to spec.

However, how does one reference multiple attributes for a given section of code?

Example:

Let's say we have defined id's of #bold, #italic, #center, etc. and when we reference them as in <span id="bold> the work as desired.

Now, suppose one needed two or more of these attributes for the same line? Is there a method to reference multiple attributes for the given output???

TIA

 

[cLFlaVA]

you will need to use multiple classes (preferred) or nested ID'd elements (not preferred). example:

.small {
    font-size: 60%;
}

.red {
    color: red;
}

.slanty {
    text-decoration: italic;
}

.
.
.

<div class="small red slanty">small, red, slanty text</div>
<div class="small red">small, red text</div>

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[BobMCT]

Thank you for your quick reply. That's what I have been doing, BTW. But I was wondering if there was a better or more acceptable way.

I will continue with what I have.

Thanks again.

 

[vacunita]

Or you make a style definition that contains all those things:

.small_red_slanty{
font-size: 60%;
color: red;
text-decoration: italic;
}

and use that:

<div class="small_red_slanty">small red and slanty text inside this div</div>







----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Vragabond]

There's really nothing to add to Cory's complete answer, but I have a few reservations about your code, based on scarce information you've given us. Using ids as described by you would inherently be wrong, because id must be unique on the page. That means, only one element can have one id value. If you define #bold, it makes me think you want to use it multiple times on one page and that would be wrong and invalid. Second, there is no need to define .bold and .italic. By default tags <strong> and <em> will render in that way. Do not forget about semantic code. If you want to emphasize something or make a strong point about something using tags designed for that purpose is much better than styling others to mimic them.

 

[Foamcow]

and to add to Vragabond's addendum to Cory's complete post....

You can always restyle the <em> and <strong> tags as required.

Also, good practice says that you shouldn't use class or id names that describe what something looks like but rather to describe what the thing actually is.

At the same time remember what Vragabond said and don't create styles to make elements mimic other elements (i.e. don't make a .heading class to make <p> tags look like headings when you could just use a <hn> tag and restyle it.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[BobMCT]

Well said, Gentlemen;

As I personally transition (continuing effort) from html to xhtml + css I am presented with a myriad of "standards" and "practices". I like my code to be clean, crisp and orderly. Hence, I've been led to believe that virtually all formatting should be handled by css and not by html elements (i.e.: strong, em). I was also aware that id's should only be referrenced once (per page?). However, I've also read where one shouldn't use multiple classes but instead to use id's (go figure). I try to follow the guidelines outlined in various printed manuals and the available online docs. But it is amazing how sites such as this and usenet become the defacto "masters".

Perhaps we all need ONE all-knowing css/xhtml guru to set the course?

Thanks.

Bob

 

[Foamcow]

<strong> and <em> don't inherently denote a style in the way <b> and <i> do.
Instead they denote meaning or context to what is within them.
That's the key. Your HTML markup should not imply style to your document, just context.

It is a browser stylesheet setting that renders <strong> and <em> in the way we see them, i.e. bold or italic.

If you wanted to change your <strong> and <em> tags to look completley different then you could and it would make no difference to the context of what they contain.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[jpadie]

Cory

i never knew that an element could have multiple classes. definitely worthy of a star by way of thanks.

how does the precedence work with these multiples? is it a straight bottom to top on the css declarations themselves or does the order of the class references in the elements themselves have an impact? please only take the time to answer if straightforward - it should be not too difficult to establish the rules by trial.

thanks
Justin

 

[Foamcow]

The difference with id's and classes...

Think of it this way.

An ID is a unique reference to an element in your document. It is possible to target an element with Javascript or CSS by using this ID.


A CLASS is a reference to a set of style rules in your CSS. A shorthand way to apply a set of styles easily to any element. The cascading nature of CSS means that you can apply multiple classes to an element - and it is perfectly proper to do so.

IDs and Classes are two totally different things and the reason for the confusion, I feel, is that people think of them as both refering to HTML elements.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[BobMCT]

OK - So now that you have several of us "interested", then perhaps you can post a couple of examples of using multiple classes in the prescribed manner.

And while you're at it, perhaps an example of the correct usage of ID's vs. classes?

The more we learn the less we ask AND the more we can respond!

Bob

 

[cLFlaVA]

two things:

in my previous post, [tt]italic[/tt] is not a valid type of [tt]text-decoration[/tt], but rather of [tt]font-style[/tt]. my apologies.

@ jpadie:

interesting question. look at this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html>
<head>
<title>Untitled</title>
<style type="text/css">
.yellow {
    color: yellow;
}

.red {
    color: red;
}

.blue {
    color: blue;
}
</style>

</head>

<body>

<div class="yellow red blue">yellow red blue</div>
<div class="yellow red">yellow red</div>
<div class="blue red">blue red</div>
<div class="blue yellow">blue yellow</div>
<div class="red yellow">red yellow</div>
<div class="yellow">yellow</div>


</body>
</html>

it appears that it's not the order of inline class settings ("red yellow blue") but rather the order in which the classes are defined in your stylesheet, that determines precedence.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

BobMCT: there are several articles on the web discussing IDs vs. classes:

http://www.google.com/search?q=html...s=org.mozilla:en-GB:official&client=firefox-a

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Rieekan]

And when you want to see which sets of objects supercede others, I found this article a great and fun read. I'm not sure who the original poster was for it (it was somewhere in this forum, but I can't find the post again and wasn't thinking straight enough to archive it. Apologies to the OP).

CSS Specificity

- George

 

[BobMCT]

Thanks gentlemen for some GREAT references. Happy holidays to you both.

Bob