tags:

views:

57

answers:

4

Author's edit: sorry for the confusion on this. I changed the path to another folder and was reading from the old files! My fault. Thanks for all the help.

My understanding is that if you place a specific rule underneath a general rule in CSS, the specific one should override the general one. For example, on this page which is in development, I have the following code:

The body id is as follows:

<body id="inside" class="blog">

<h3><a href="http://dev.extraspecialpatient.com/blog/entry/test-blog-entry/"&gt;Test Blog Entry</a></h3>
        <p class="entry-date">published September 13, 2010</p>
        <p>
This is a test of the American Broadcasting System to see if my entry shows up properly on the website. Summary information goes here.</p>
<p>Sentence two.</p>
<p>Sentence three.</p>

Here is the generic styling for this content:

body#inside #content p { 
                        margin: 0; 
                        padding: 0 0 20px 20px; 
                        color: #000; 
                        font: 14px/22px "Myriad Pro", Arial, sans-serif; 
                        }

I need to modify the padding on the paragraph and style the date information so beneath this I placed the following:

body#inside.blog #content p             { padding: 0 20px 10px 20px; }
body#inside.blog #content p.entry-date      { 
                                font-size: 11px; 
                                color: #4d6b53; 
                                font-style: italic;
                                margin: -3px 0 0 20px;
                                padding: 0;
                                }   

I would appreciate some help getting this worked out.

Thanks!

+1  A: 

There's no #content ID in your HTML.

mingos
I see one: `<div id="content">`
Pekka
@mkoistinen only that it's not true.
Pekka
Indeed! You are correct.
mkoistinen
OP only posted the body code, not the entire page's HTML. Looking at the page that was linked, there is a #content element.
jeek
I wonder if it was added after this question was posted?
mkoistinen
Yeah, the OP didn't post the full body HTML in his question, hence the confusion.
Pekka
Ah, OK, sorry then. Haven't noticed the link, thus, I haven't checked the full code.
mingos
+1  A: 

I can't see the more specific rules you quote above, neither in your CSS file nor in the HTML document. Am I overlooking something? You may have forgotten to upload them.

Also, it should not be necessary to be more specific than the general rule: Using

body#inside #content p

will be enough. The fact that the rules come after the general rules will be enough to overwrite them.

Pekka
A: 

When you say body#inside.blog #content p, that means "a p that is a descendant of something with the id 'content' that is a descendant of a body with id 'inside' and class 'blog'"

The CSS isn't showing up because nothing has the id 'content' inside the body tag.

Tom Smilack
Am I the only one who is seeing a `<div id="content"><!-- begin content -->` in line 43?
Pekka
It is there. You are seeing it correctly.
fmz
My mistake, I only looked at the posted snippet rather than the full page.
Tom Smilack
+1  A: 

Use firefox -firebug plugin and check which CSS is currently applied on the element.It will clearly shows which styles are overridden from which stylesheets.

Get firebug from here http://getfirebug.com/

Shyju