treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

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

  • snowfox
    Permalink to comment #
    Hi

    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}
    </style>
    <TABLE>
    <TH ALIGN="left" VALIGN="bottom" COLSPAN="2" ROWSPAN="1" BGCOLOR="#00FFFF" NOWRAP>table header</TH>
    <TR>
    <TD>row1 col1</TD><TD>row1 col2</TD>
    </TR>
    </TABLE>

    Thank you and any help is appreciated.

    TIA
  • chazzwick
    Permalink to comment #
    Instead of using text-transform: uppercase on th:first-letter, instead just put the capital letter in yourself in the xhtml.

    <TH>Table header</TH>


    then use this for your css:


    th:first-letter{font-size:16pt;}
    th {font-size:12pt;font-variant:small-caps}
Add a Comment