precedence in css

[lucasm]

Say I have an external style sheet referenced into my html document that says:
p{
text-align: right;
}
for example. Now in my html document after doing all the preliminary definition stuff, I say this:

<p>Texttexttext</p>
<div style="text-align: center;">
<p>TextTextText</p>
<p style="text-align: left;">TextTextText</p>
<p>TextTextText</p>
</div>
<p>TextTextText</p>

What happens is all the paragraphs are right aligned except for the one paragraph in the middle I made left aligned. How come my paragraphs in the div that I styled to go center ignore this?

[Xapti]

Good question; text-align is inherited by default, and of course inline styles take precedence over a style sheet/tag. What browsers did you test it in? (and perhaps check the doctype too)

I assume you just tested in IE, which is just buggy as hell and can't render anything properly.

[edited by: Xapti at 12:12 am (utc) on Nov. 19, 2007]

[lavazza]

[tizag.com...]

Inline CSS has the highest priority out of external, internal, and inline CSS. This means that you can override styles that are defined in external or internal by using inline CSS. However, inline CSS detracts from the true purpose of CSS, so use it sparingly.

Common Inline CSS MistakesWhen using CSS inline you must be sure not to use quotations within your inline CSS. If you use quotations the browser will interpret this as the end of your style value. Instead, copy our form as we have displayed below.

[w3.org...]

...an "!important" declaration (the keywords "!" and "important" follow the declaration) takes precedence over a normal declaration...

[SuzyUK]

first re lavazza's quote can I add the last part as the quote on it's own is slightly misleading ;) the bit about quotes refers to using quotes within quotes as in background image rule.. and does not apply here

When using CSS inline you must be sure not to use quotations within your inline CSS.

<p style="background: url("yellow_rock.gif");">This is broken</p>

<p style="background: url(yellow_rock.gif);">
This is workin'</p>

AS an aside it's recommended not to use quotes around
background image names at all whether external or internal CSS.
----------------

Back to the original question..
Your Code is doing as it should.. the answer is in the specificity of your rules,

you have specifically asked, via the external CSS rule, for all <p> elements to be aligned right, and you have then overruled one of the <p> elements using inline CSS, which works by using the cascade -

<p style="text-align: left;">TextTextText</p> 

With this rule inline <p> CSS setting is 'trumping' the external <p>CSS by order of the Cascade.

This -

<div style="text-align: center;"> 

- is also working and any text inside this div but NOT in a <p> element will align center.

Any/All text inside <p> elements (whether nested in the div or not) is being targeted quite specifically by the external rule. Specificity is condsidered more important than the Cascade see Cascading order.. [w3.org]

In order to get specific to the <p>'s inside your div,
i.e. to target only the <p> elements inside you need something slightly more specific

div p {text-align: center;}

and to target it separately from any other section, you could then give the div a class name and do something like this:

div.[i]yourclassname[/i] p {text-align: center;}

, which is getting more specific still

read more on specificity.. [w3.org]

[edited by: SuzyUK at 9:40 am (utc) on Nov. 19, 2007]

[lavazza]

..re lavazza's quote ... on it's own is slightly misleading

Whoops!

That what comes from me providing links to something (inline styles) that I don't use

Thanks for making the correction Suzy :)

[lucasm]

Thank you all