CODEWITHSUNDEEP
htmlcss
Nico Gallegos
Nico Gallegos

Reputation: 421

Tag p inside a span doesn't apply css style

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?.

Upvotes: 1

Views: 8243

Answers (2)

Amy
Amy

Reputation: 7466

<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:

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.

Upvotes: 6

Nico Gallegos
Nico Gallegos

Reputation: 421

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.

Upvotes: 0

Related Questions