Why is my small-caps font-variant CSS class being disregarded?

Question

I added this CSS class:

.beanies {
    font-variant: small-caps;
}

I call it from a couple places, coupled with another class, trying it both this way:

<p class="coolPools beanies">LICENSE #764014</p>

...and this:

<h3 class="statelyPresence, beanies">NEW POOL LAW REQUIRES IMMEDIATE ACTION AT ALL APARTMENT AND CONDOMINIUM POOLS AND SPAS</h3>

(IOW, with or without a separating comma between the two classes I'm applying to the element)

...and in neither case does the text display in small caps.

What am I doing wrong?

Answer 1

It is working and you are not wrong. But it is not visible because you have all capital letters.

Write this:

.beanies {
    font-variant: small-caps;
    text-transform: lowercase;
}
.beanies:first-letter {
    text-transform: uppercase;
}

Fiddle here.

Answer 2

By typesetting definition, when text is "small caps", its lowercase letters are displayed as cute little versions of their uppercase selves. You don't have any lowercase letters in your example, so none of those your characters display differently than how you typed them. If you were to use all small caps, the uppercase letters would also become cute and little.

Try this (demo):

.beanies {
    font-variant: all-small-caps;
}

Mozilla describes and shows the differences with an interactive demo in their MDN Docs.

Caveat: This may not work in Safari or Internet Explorer.

Answer 3

Small-caps means that lowercase letters are turned into slightly smaller variations of uppercase letters. Uppercase letters stay unchanged. Since you only have uppercase letters, you don't see any difference.

Try:

<h3 class="statelyPresence beanies">New pool law requires immediate action at all apartment and condominium pools and spas</h3>

Demo: http://jsfiddle.net/Mn48Q/

In general the goal is that you write the HTML "normally" and use CSS to apply text styling, including uppercasing all words when necessary.

(Side note: no commas in class lists.)