Why is my CSS class with small caps not taken into account?

Question

I added this CSS class:

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

I call it from a couple of places, combined with another class, trying it like this:

 <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 separator, between the two classes that I apply to the element)

... and in no case does the text appear in small caps.

What am I doing wrong?

Answer 1

It works, and you are not mistaken. But this is not visible, because you have all the capital letters.

Write this:

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

The spell is here.

Answer 2

Small-caps means that lowercase letters turn into slightly smaller uppercase variations. Uppercase letters remain unchanged. Since you only have uppercase letters, you do not see the differences.

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 HTML “normally” and use CSS to apply text styles, including top-coding all words when necessary.

(Side note: there are no commas in class lists.)