61711

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

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?

Answer1:

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.

Answer2:

Small-caps means that <strong>lowercase letters</strong> 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.)

Recommend

  • what is server side rendering using angular2?
  • Is it possible to deploy Angular app on IBM Websphere Application Server?
  • Cheerio doesn't wait for body to load
  • The calling thread must be STA, because many UI components require this while navigation in wpf
  • jQuery variable is not being populated before ajax function.
  • How can horizontal Divs be tied to each other so that when one grows vertically, an “associated” one
  • SingleThreadExecutor VS plain thread
  • Understanding the Difference Between Non-Blocking Web Service Calls vs Non-Blocking JDBC
  • How to work different .net versions in IIS 6.0
  • How to use SQL variable to iterate XML nodes
  • Locale language detection and translation?
  • How to upload multiple files at the same time using the dropbox java api
  • iis7 pulling wrong connection string - cross site and process?
  • ASP.NET MVC2, getJSON, Jquery Windows 7 64bit IIS
  • What does eof() returns?
  • IIS application pool recycling and “shutdown time limit” role in overlapping
  • Trying to understand SetRecycledViewPool method in RecyclerView
  • how to access Couchbase server (on windows 7) by a remote app .net
  • jquery string to function convert
  • Javadoc generation for Android
  • Run python unit tests as an option of the program
  • Dropping support for JRE 1.3
  • Conditional Formatting in VBA, based on functions
  • Python: remove double quotes from JSON dumps
  • How to fix this floating point square root algorithm
  • allow scroll of div set behind another div
  • Plot a CSV file where the delimiter is '; ' (semicolon + space)
  • How to run a set of SQL queries from a file, in PHP?
  • How to remove comma or any characters from Python dataframe column name
  • Creating JS objects in PHP with commas in between
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Javascript, Regex - I need to grab each section of a string contained in brackets
  • Implementing “partial void” in VB
  • Why use database factory in asp.net mvc?
  • Sending HTML Form Data to Spring REST Web Service
  • Can someone please explain to me in the most layman terms how to use EventArgs?
  • Excel - Autoshape get it's name from cell (value)
  • Statically linking a C++ library to a C# process using CLI or any other way
  • what is the difference between the asp.net mvc application and asp.net web application
  • python regex in pyparsing