Get a free trial // Grow your CSS skills // Land your dream job

CSS: How to get all letter small-cap and first letter large.

  • # July 31, 2008 at 9:38 pm


    I am trying to display my table header tab <TH> content with all first letter of each word to font-size:16px while the other letters in small-caps.

    I have tried halfway using the following which only display the first-letter in large-xx but the rest of all word and letters in uppercase.

    How to get all the first letters to 16px where the rest to 12px or small-caps.

    <style type="text/css">
    th:first-letter { text-transform: uppercase }
    th {color:#0000ff;font-variant:small-caps}
    <TH ALIGN="left" VALIGN="bottom" COLSPAN="2" ROWSPAN="1" BGCOLOR="#00FFFF" NOWRAP>table header</TH>
    <TD>row1 col1</TD><TD>row1 col2</TD>

    Thank you and any help is appreciated.


    # August 1, 2008 at 11:17 am

    Instead of using text-transform: uppercase on th:first-letter, instead just put the capital letter in yourself in the xhtml.

    Table header

    then use this for your css:

    th {font-size:12pt;font-variant:small-caps}
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed