473,473 Members | 2,134 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

Basic CSS question re specificity

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
10 1772
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
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
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Michael Foord | last post by:
#!/usr/bin/python -u # 15-09-04 # v1.0.0 # auth_example.py # A simple script manually demonstrating basic authentication. # Copyright Michael Foord # Free to use, modify and relicense. #...
11
by: Laurence Tureaud | last post by:
hello i'm just getting started with CSS & am reading through Eric Meyer on CSS, specifically the first chapter. he creates these styles: td#advert {stuff} #content-top td { stuff } tr...
5
by: Harlan Messinger | last post by:
If I want to give special priority to property values I want to declare for a particular class, should .myclass.myclass.myclass.myclass.myclass.myclass.myclass.myclass.myclass { /* declarations...
56
by: Dave Vandervies | last post by:
I just fixed a bug that some of the correctness pedants around here may find useful as ammunition. The problem was that some code would, very occasionally, die with a segmentation violation...
3
by: sefe dery | last post by:
hi ng, i try to create a asp.net 1.0 website on windows server 2003(Servername: ServerX) with iis 6.0. PROBLEM: The user should login with his windows credentials in basic.aspx and...
8
by: sajid | last post by:
The CSS 2.1 Specification describes how to sort a list of selectors in order of specificity, but it doesn't provide a method to calculate the specificity of a single selector in isolation. I've...
6
by: Simon Walsh | last post by:
I'm an Electronics student in college and I'm currently working on a project. I was given a circuit diagram for my project, from which I had to design a printed circuit board to be sent off and...
2
by: rhino | last post by:
1. Does it make any different what sequence I use to specify my rulesets? For instance, is there a problem with specifying the rules for "p.footer" before I have specified the rule for "p" or if I...
1
by: PaulShimm | last post by:
I have this simple div with a label in: <div id="TestDiv"> <label>TEST CSS</label> </div> I am applying the following CSS: div#TestDiv *
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
0
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.