Tag P Inside A Span Doesn't Apply Css Style

I'm having an issue with styles. My code is something like this: 'Text' appears black, while 'Text 2' appears grey. I've tried using a div instead of span, but doesn't work. (I'v

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

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