css attribute after list is missing

Question

In the following example I have an inline css tag that specifies font style, color and size. However, everything after the list will not display the attributes of the css tag. What am I doing wrong?

        <div class="Content"><p style="font-family:verdana;color:#2137C2;font-size:14px;">
        Try the kit for at least 30 days and if you aren’t completely satisfied, you can 
        return it to us in the original packaging and, once we receive it, we will gladly     
        refund your money*.<br>

        <strong>Important Tips and Recommendations:</strong> 

        <ul>
        <li>Use only 1-2 tablespoons of liquid HE detergent</li>
        <li>Never use powdered soap</li> 
        </ul><br>

        Please note that shipping charges are non-refundable 
        if you elected to have your kit sent to you by Priority or Express shipping.<strong>   
        Returns must be sent within 60 days of the original order date.</strong> </p></div>

score 2 · Answer 1 · answered Sep 02 '13 at 19:24

You're specifying the inline style on the p element. The ul element will implicitly end this p element just before it, and so the styles from the p element won't apply to the ul, its children, or anything that follows it.

If you wish to apply styles to all of the text in your div element, specify it on the div element instead. You should preferably do this in a stylesheet, however:

div.Content {
    font-family: Verdana;
    font-size: 14px;
    color: #2137C2;
}

You should also create another p element surrounding the second block of text that comes after the ul, since the ul is closing the first p.

score 0 · Answer 2 · answered Sep 02 '13 at 19:25

You have specified the style to the <p> paragraph tag, not the entire div.

This should work:

<div class="Content" style="font-family:verdana;color:#2137C2;font-size:14px;"><p>
        Try the kit for at least 30 days and if you aren’t completely satisfied, you can 
        return it to us in the original packaging and, once we receive it, we will gladly     
        refund your money*.<br>

        <strong>Important Tips and Recommendations:</strong> 

        <ul>
        <li>Use only 1-2 tablespoons of liquid HE detergent</li>
        <li>Never use powdered soap</li> 
        </ul><br>

        Please note that shipping charges are non-refundable 
        if you elected to have your kit sent to you by Priority or Express shipping.<strong>   
        Returns must be sent within 60 days of the original order date.</strong></p></div>

You could also apply the style to the Content class by adding this in the CSS stylesheet:

.content {
    font-family:verdana;
    color:#2137C2;
    font-size:14px;
}

score 0 · Answer 3 · answered Sep 02 '13 at 19:28

0

For better practice don't use inline styles.

When you set the style on the p element as an inline, only that specific element will get the style mentioned while other elements will not.

Here is a fiddle showing how to do it using separate CSS.

answered Sep 02 '13 at 19:28

Shahar Galukman

882
3
15
35

score 0 · Answer 4 · edited May 23 '17 at 11:49

That's because the browser is assuming you want to close your paragraph before the list and won't let you have list elements as children of paragraphs, since paragraphs are only meant to contain phrasing content (like in-line tags such as span, and text). To read more about that you can check out the paragraph definitions or this StackOverflow post.

To fix your problem, I suggest ending your paragraph before the list and starting a new one with the same style after the list, as follows:

<div class="Content"><p style="font-family:verdana;color:#2137C2;font-size:14px;">
    Try the kit for at least 30 days and if you aren’t completely satisfied, you can 
    return it to us in the original packaging and, once we receive it, we will gladly     
    refund your money*.<br>

    <strong>Important Tips and Recommendations:</strong> </p>

    <ul>
    <li>Use only 1-2 tablespoons of liquid HE detergent</li>
    <li>Never use powdered soap</li> 
    </ul><br>

    <p style="font-family:verdana;color:#2137C2;font-size:14px;">Please note that shipping charges are non-refundable 
    if you elected to have your kit sent to you by Priority or Express shipping.<strong>   
    Returns must be sent within 60 days of the original order date.</strong> </p></div>

Demonstration here: http://jsfiddle.net/FpvYM/

To avoid re-writing the style for the paragraph you could always create a class for it:

<p class="fancy">text here</p>

With the CSS:

.fancy {
    font-family:verdana;
    color:#2137C2;
    font-size:14px;
}

Or, even:

.Content p {
    font-family:verdana;
    color:#2137C2;
    font-size:14px;
}

Note that the last example will affect all paragraphs div with the class of "Content".

css attribute after list is missing

4 Answers4