1

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

TylerH
  • 20,799
  • 66
  • 75
  • 101
Nico Gallegos
  • 321
  • 8
  • 20
  • 1
    span is an neutral inline-block element that can contain only text or inline/inline-block elements. .use a neutral div instead to start with a valid code. Then apply your css :) – G-Cyrillus Apr 29 '14 at 17:47
  • What do you mean with a Neutral div? I've tried div -> p and it didn't work either – Nico Gallegos Apr 29 '14 at 18:07

2 Answers2

6

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

wentz
  • 700
  • 5
  • 15
Amy
  • 7,388
  • 2
  • 20
  • 31
0

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.

Nico Gallegos
  • 321
  • 8
  • 20