3

Why doesn't the 'test' class apply on usage at both the <p> tag and the <span> tag?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />   
        <title>Newsletter template</title>
        <!--general stylesheet-->
        <style type="text/css">
            p { padding: 0; margin: 0; }
            a {
                color: #455670; text-decoration: underline;
            }
            test {
                margin: 20; font-family: "Helvetica Neue"; font-size: 20px; font-weight: normal; color: #666666; line-height: 15px !important;
            }
        </style>
    </head>
    <body>
        <p class="test"><span class="test"> Check the spelling of the words you typed.</span></p>
    </body>
</html>

6 Answers 6

8

use .test. test is an element selector.

2
  • Cheers, what is an "element selector"? Commented Dec 21, 2011 at 4:19
  • element selectors are used to describe elements in the DOM tree by their name. If you had <test>content</test> in the html this would be represented by an element in the DOM tree with the name test. So you would use $('test') to instruct jQuery to select this element. If you have <div class="test">content</div> then $('test') will not select this element because its name is 'div', not test. But if you write $('.test') (notice the dot) this will tell jQuery that you want it to find all elements that have class 'test'. See api.jquery.com/category/selectors Commented Dec 21, 2011 at 21:35
3

Because it should be .test, since it's a class, not just test.

3

In CSS, to select an element by its class, you need to prefix the classname with a . As you have it,

test {
    margin: 20;...
}

expects to see an HTML element named test -- but there is no such element. Change your selector to

.test { ... }
1

You need a period before the class name in your CSS.

1

If you have feedback on the site, use the meta menu option at the top of the page.

1
  • Thanks Steve, SO is awesome as it is though! Commented Dec 21, 2011 at 4:17
1

use .test instead of test in style. use 0px in padding,margin instead of 0. :)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        <head>
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />   
            <title>Newsletter template</title>
            <!--general stylesheet-->
            <style type="text/css">
                p { padding: 0px; margin: 0px; }
                a {
                    color: #455670; text-decoration: underline;
                }
                .test {
                    margin: 20px; font-family: "Helvetica Neue"; font-size: 20px; font-weight: normal; color: #666666; line-height: 15px !important;
                }
            </style>
        </head>
        <body>
            <p class="test"><span class="test"> Check the spelling of the words you typed.</span></p>
        </body>
    </html>
2
  • 3
    0 is fine, you dont need to add the Measurement for px, em, in, cm, % etc. if it is 0.
    – Ben
    Commented Dec 20, 2011 at 3:04
  • Thanks. I appreciate all the tips SO users provide, since I haven't been formally educated in HTML/CSS in the slightest way. Commented Dec 21, 2011 at 4:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.