Question

Currently, I’m doing something like this:

<h2><div class='q'>Q:</div> Does alfredo sauce contain soy?</h2>

and then styling it in my CSS file, like so:

.q {
    padding-bottom: 15px;
    display: inline;
    font-size: 35px;
    font-weight: 700;
    color: #65A6D1;
}

While this displays fine in my browser, when running the page through http://validator.w3.org, it complains: “Element div not allowed as child of element h2 in this context. (Suppressing further errors from this subtree.)”

How would I style this piece of text in valid HTML/CSS?

Answer 1

You can use a span

<h2><span class='q'>Q:</span> Does alfredo sauce contain soy?</h2>

also remove display: inline from the class

.q {
    padding-bottom: 15px;
    /*display: inline;*/
    font-size: 35px;
    font-weight: 700;
    color: #65A6D1;
}