Tag p inside a span doesn't apply css style

Question

I'm having an issue with styles. My code is something like this:

 .grey { color:grey; } 

 <span class="grey"> <p align="justify"><b>Text</b></p> </span> <span class="grey"> Text 2 </span> 

"Text" appears black, while "Text 2" appears grey. I've tried using a div instead of span, but doesn't work. (I've read that span -> p isn't allowed)

PS: (It works locally with Firefox, but when I'm checking it on the iPad (this is for an iPad app), it doesn't).

Is there a way to force p to apply the style of the span?.

Answer 1

<span> is inline level element, it cannot be placed around a <p> element because Paragraphs <p> is block level element. The rule is that block level elements can contain any number of inline or block elements. Inline level elements can only contain inline elements.

Your HTML should be the following and it'll work: http://jsfiddle.net/amyamy86/RENbN/

<div class="grey">
   <p align="justify"><b>Text</b></p>
</div>

<span class="grey">
  Text 2
</span>

For more information regarding inline and block elements see:

• display:inline vs display:block
• http://www.impressivewebs.com/difference-block-inline-css/

If you are still seeing "Text" in black is mostly because there is some CSS selector that has higher specificity and is overriding your .grey selector.

Answer 2

Another walkaround I found that works ( best solution is to change span for div) , add in CSS:

.grey p 
 {
    color: gray;
 }

This will work too.