Basic CSS question re specificity

**John Hosking** · Feb 20 '07, 07:05 PM

Re: Basic CSS question re specificity

paul.denlinger@ gmail.com wrote:

[...]
/* Define default text */
-----------------------------------------------------------------
#default {
color #333;
}
>
Can you tell me what I'm doing wrong which causes the third paragraph
to be red instead of dark gray?

No. You haven't provided a URL (preferred) or even any HTML code.
All I can guess at for now is that your -------------- lines are messing
up your real CSS. Also, it's Tuesday. This stuff never works on Tuesday.

And is this in all browsers?

--
John

**Bergamot** · Feb 20 '07, 07:05 PM

Re: Basic CSS question re specificity

paul.denlinger@ gmail.com wrote:

>
Here are the three CSS rules:

The code snippet you posted doesn't give enough info to determine what's
going on. Upload your test page and post the URL.

--
Berg

**paul.denlinger@gmail.com** · Feb 20 '07, 08:15 PM

Re: Basic CSS question re specificity

On Feb 20, 10:53 am, Bergamot <berga...@visi. comwrote:

paul.denlin...@ gmail.com wrote:
>

Here are the three CSS rules:

>
The code snippet you posted doesn't give enough info to determine what's
going on. Upload your test page and post the URL.
>
--
Berg

Hi--

I have uploaded the page to http://www.china-ready.com/colly/stylesheet.htm

The CSS is http:www.china-ready.com/colly/style1.css It is linked to
the HTML page above.

Thanks,

Paul

**Beauregard T. Shagnasty** · Feb 20 '07, 09:05 PM

Re: Basic CSS question re specificity

paul.denlinger@ gmail.com wrote:

I have uploaded the page to

Welcome china-ready.com - BlueHost.com

http://www.china-ready.com/colly/stylesheet.htm

Bluehost - Top rated web hosting provider - Free 1 click installs For blogs, shopping carts, and more. Get a free domain name, real NON-outsourced 24/7 support, and superior speed. web hosting provider php hosting cheap web hosting, Web hosting, domain names, front page hosting, email hosting. We offer affordable hosting, web hosting provider business web hosting, ecommerce hosting, unix hosting. Phone support available, Free Domain, and Free Setup.

>
The CSS is http:www.china-ready.com/colly/style1.css It is linked to
the HTML page above.

Paste your CSS into this checker, then fix the errors.

CSSCheck, a Cascading Style Sheets Lint

http://www.htmlhelp.com/tools/csscheck/

CSSCheck is a lint to check the syntax, style, and accessibility of Web authors' Cascading Style Sheets.

New documents should use a Strict doctype, Transitional is for ..
transitioning old legacy code.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Also, before you venture much further, have a read of this:

http://k75s.home.att.net/fontsize.html

--
-bts
-Motorcycles defy gravity; cars just suck

**paul.denlinger@gmail.com** · Feb 20 '07, 10:45 PM

Re: Basic CSS question re specificity

Thank you very much; the CSS check site is very helpful.

Paul

On Feb 20, 12:58 pm, "Beauregard T. Shagnasty"
<a.nony.m...@ex ample.invalidwr ote:

paul.denlin...@ gmail.com wrote:

I have uploaded the page to
http://www.china-ready.com/colly/stylesheet.htm

>

The CSS is http:www.china-ready.com/colly/style1.cssIt is linked to
the HTML page above.

>
Paste your CSS into this checker, then fix the errors.http://www.htmlhelp.com/tools/csscheck/
>
New documents should use a Strict doctype, Transitional is for ..
transitioning old legacy code.
>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
>
Also, before you venture much further, have a read of this:http://k75s.home.att.net/fontsize.html
>
--
-bts
-Motorcycles defy gravity; cars just suck

**Andy Dingley** · Feb 21 '07, 03:15 PM

Re: Basic CSS question re specificity

On 20 Feb, 18:44, "paul.denlin... @gmail.com"
<paul.denlin... @gmail.comwrote :

/* Define highlighted text */
-----------------------------------------------------------------
#highlight {
color: #F00;
>
}

Don't use an id or "#highlight " for highlighted text, use a class
and .highlight instead. Using id in a selector has "powerful"
specificity which is hard to over-ride locally, class is much better
(search, this has been posted many times before)

This will also fix your bug, which is caused by mixing the two.

**Bergamot** · Feb 21 '07, 05:45 PM

Re: Basic CSS question re specificity

Andy Dingley wrote:

On 20 Feb, 18:44, "paul.denlin... @gmail.com"
<paul.denlin... @gmail.comwrote :
>

>#highlight

>
Don't use an id or "#highlight " for highlighted text, use a class
and .highlight instead.

In this case, "highlight" insinuates emphasis, so it may actually be
better to use an <emelement instead. Depends on the context, of course.

--
Berg

**Andy Dingley** · Feb 21 '07, 06:55 PM

Re: Basic CSS question re specificity

On 21 Feb, 17:28, Bergamot <berga...@visi. comwrote:

In this case, "highlight" insinuates emphasis, so it may actually be
better to use an <emelement instead.

class="emphasis " and <em>...</emmean two different things.

The first means a notion of "emphasis" (which is still undefined
ontologically, but that's not at issue) and this notion is applied to
an element or contained DOM tree fragment. This can be any element,
and it includes the elemnt itself.

<em>...</emmeans a fragment of HTML matching the %inline;
production. Although we might agree that the concepts can be seen as
exactly equivalent, it's simply not possible to define the same
document scope with it. You cannot highlight a list element or a menu
element with <em>, only its contents.

**Bergamot** · Feb 21 '07, 09:25 PM

Re: Basic CSS question re specificity

Andy Dingley wrote:

>
class="emphasis " and <em>...</emmean two different things.

I did say it depends on context. ;)

Since the OP posted bogus content, we can't know for sure which markup
might be better, but we all know it isn't unusual for newbies to use the
wrong markup for the job.

--
Berg

**Patrick Smith** · Feb 22 '07, 03:15 PM

Re: Basic CSS question re specificity

paul.denlinger@ gmail.com wrote:

Hi--
>
I'm working my way through the book, Beginning CSS Web Development by
Simon Collison. I ran into a problem on pages 17-18 (Chapter 2), I
have copied and put in three rules re IDs and the <ptag.
>
>
The first and second paragraphs are red, and the third paragraph
should be
dark gray. My problem is that all three paragraphs are red.
>
Here are the three CSS rules:
p {
color: #F00;
}
>
/* Define highlighted text */
-----------------------------------------------------------------
#highlight {
color: #F00;
}
>
/* Define default text */
-----------------------------------------------------------------
#default {
color #333;
}
>

Don't know if I am jumping into this too late, but I see a missing colon
after color before #333; Would it make a difference if it read
color: #333; ?

Can you tell me what I'm doing wrong which causes the third paragraph
to be
red instead of dark gray?
>
I wrote to the author, and he told me that there had been a mistake in
the example (not enough specificity), and that the CSS rule should
read:
>
/* Make text red only for paragraphs within the box class */
#container .box p {
color: #F00;
}
>
I have tried that, and it still doesn't work for me. Can you tell me
what I'm doing wrong, and how to correct it?
>
Thank you.
>

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group – USF - College of Marine Science
http://ocgweb.marine.usf.edu Phone: 727 553-3334

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld

Basic CSS question re specificity

Basic CSS question re specificity

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment