By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,092 Members | 1,597 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,092 IT Pros & Developers. It's quick & easy.

Basic CSS question re specificity

P: n/a
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;
}

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.

Feb 20 '07 #1
Share this Question
Share on Google+
10 Replies


P: n/a
pa************@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
Feb 20 '07 #2

P: n/a
pa************@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
Feb 20 '07 #3

P: n/a
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

Feb 20 '07 #4

P: n/a
pa************@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.css It 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
Feb 20 '07 #5

P: n/a
Thank you very much; the CSS check site is very helpful.

Paul
On Feb 20, 12:58 pm, "Beauregard T. Shagnasty"
<a.nony.m...@example.invalidwrote:
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

Feb 20 '07 #6

P: n/a
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.

Feb 21 '07 #7

P: n/a
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
Feb 21 '07 #8

P: n/a
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.

Feb 21 '07 #9

P: n/a
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
Feb 21 '07 #10

P: n/a
pa************@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

Feb 22 '07 #11

This discussion thread is closed

Replies have been disabled for this discussion.