Dumb CSS question

[torifile]

This should take like -30 seconds to answer, the question is so dumb but...

I've got a tag that I want to be redefined. Specifically, adding underlining to all <strong> items.* In CSS, I defined strong to have underline. No problem there. BUT there are some <strong> things that I don't want underlined. I defined a class called "presenter" with text-decoration: none. I thought I'd wrap the words I don't want underlined with a <span class="presenter"></span> to take out the underlining. That doesn't work. Any ideas?

*Before I get brow-beaten for changing this class to have another's behavior, this isn't for me. It's a wordpress site I've set up for others to put content on and they've got many more things they want underlined and bold than the other way around. Since they're using the WYSIWYG interface to put their content up, it's easier to do it this way. <ducks>

[spikeh]

Try sticking this in:

.presenter strong {
text-decoration: none;
}

Put that below the strong declaration in the CSS, so the style is rendered after your strong tags all are.

Or you could just use b, if you're not too worried about the semantics of it all ;)

[chucker]

You mean strong.presenter {}

[torifile]

Perfect!

I can't ever remember how to do that. What's the trick to figuring out the . or # and what goes after them?

I would use "b" (and "i" for that matter) but the WYSIWYG uses "strong". :p

[torifile]

Hmm. .presenter strong {} worked. I have a mental block when it comes to understanding CSS, apparently.

[spikeh]

Chucker: strong.presenter {} would be if he was assigning the class to the strong tag itself.

Torifile: # is for an ID, . is for a class. IDs are only usable once in the page, which is handy for debugging - most developers use them for block level elements that are significant structures on the page (wrapper DIVs, navigation DIVs and so on and so forth). A class can be applied to anything but is generally the weapon of choice for an inline element because you are more likely to use something like a span or paragraph more than once.

If you have element.className then the class applies only to elements bearing that class.

If you have .className then you can apply that class to any element.

If you have .className element then the cascade applies the properties of the class to every element within that class - so:

.redText p {text-decoration:underline}

would make every paragraph within .redText underlined.

The same applies for IDs, just replace the full-stops with hashes.


HTH. Any other questions, just ask - there aren't many things I can be of much help with, but this is one of them :)

Edit: strong and em are two completely different things to b and i. But that's a different can-of-worms for a different day :)

[chucker]

Chucker: strong.presenter {} would be if he was assigning the class to the strong tag itself.

Yeah. My bad, I misread.

[torifile]

Alrighty, one more CSS question (I hope this one's not as dumb).

On my site (www.durhamdbt.com), the current page is underlined at the top of the page. That's handled in CSS by using current_page_item. I've got that part figured out. I'd like to replicate that behavior in the sidebar.

The sidebar's code is:


#sidebar ul li a {
border-bottom: 1px solid #ccc;
color: #ff7800;
display: block;
text-decoration: none !important;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 25px;
background-image: url(images/navbulle.gif);
background-repeat: no-repeat;
background-position: 10px 50%;
}


The code that works for current_page_item is:


div#pages ul li.current_page_item a {
text-decoration: underline;
}


I've tried:

#sidebar ul li.current_page_item a {
text-decoration: underline;
}


and

div#sidebar ul li.current_page_item a {
text-decoration: underline;
}


Ok. Maybe this one is just as dumb as the first, but whatever. :p

edit: nevermind. It was that "!important" declaration. Stupid me!

Secondary question (and it may be better suited for the WP thread): "groups" is underlined, as well as "services" when on that page. "Groups" is a child of "services". How can I keep it from getting underlined? TIA.

edit2: I've changed the underlined to a background color, but the rest remains the same. (I suppose that if I had tried the color first, I would have saved myself the misery, but I wouldn't have learned about the "!important" declaration. :))

[spikeh]

Don't ya just love CSS? :) What are you using to read up on it? I heartily recommend www.alistapart.com for any specific problems or techniques you may have. The CSS on the site itself is a little wonky IMO (although Eric Meyer had his hand in it so I shouldn't say that really) but it's an invaluable resource.

[torifile]

Don't ya just love CSS? :) What are you using to read up on it? I heartily recommend www.alistapart.com for any specific problems or techniques you may have. The CSS on the site itself is a little wonky IMO (although Eric Meyer had his hand in it so I shouldn't say that really) but it's an invaluable resource.
I've got Eric Meyers' CSS book somewhere. I haven't walked through the projects in some time. I find that I learn better by actually working on something I want to work on and trying to get it right (hence, the thread). I'm a hands-on learner. :)

[spikeh]

It's the way to go! I'm with Ze Frank on learning:

http://www.zefrank.com/theshow/archives/2006/07/post_4.html#