Question

I’m trying to update a website. There’s a label element I want to style. It looks like:

 #foo {
     font-size: 9px;
 }

 <label id="foo"></label>

but it looks like a css definition for the “label” element is overriding the more specific style I’m setting. I’m seeing this in firebug

label {
    font-size: 16px;
}
.foo {
    font-size: 9px; /* strikethrough on my font-size declaration here */
}

so is there a way to override the default label font-size setting without modifying it for everything? (I thought my more specific definition would do that by default)

Thanks

Answer 1

You’ve mixed up the syntax for id with the one for class:

#foo { /* # = id, . = class */
    font-size: 9px;
}

Keep in mind that ids are supposed to be unique for the entire document

or switch your label to using a class instead:

<label class="foo"></label>