Compare Revisions

text-transform

Revision 25166:

Revision 25166 by elysdir on

Revision 25167:

Revision 25167 by elysdir on

Title:
text-transform
text-transform
Slug:
CSS/text-transform
CSS/text-transform
Tags:
css, "CSS Reference"
css, "CSS Reference"
Content:

Revision 25166
Revision 25167
n14      The <code>text-transform</code> CSS property specifies capin14      The <code>text-transform</code> CSS property specifies how 
>talization and lowercase effects of an element's text should be r>to capitalize an element's text. It can be used to make text appe
>endered.>ar in all-uppercase or all-lowercase, or with each word capitaliz
 >ed.
n44        First letter on each word is uppercase and other letter un44        First letter of each word is converted to uppercase. Othe
>naffected.>r letters are unchanged; that is, they retain their original case
 > as written in the element's text.
n62        No case change effects.n62        Case of all letters is unchanged.
n69p:first-line { text-transform: uppercase; }n69p { text-transform: none; }
n71    <h4>n71    <p style="text-transform: none">
72      Live Examples
73    </h4>
74    <ul>
75      <li>
76        <code><strong>none</strong></code> Lorem ipsum dolor sit 72      Lorem ipsum dolor sit amet, consectetur adipisicing elit, s
>amet, consectetur adipisicing elit, sed do eiusmod tempor incidid>ed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>unt ut labore et dolore magna aliqua. 
77      </li>73    </p>
74    <pre>
75p { text-transform: capitalize; }
76</pre>
78      <li style="text-transform:capitalize">77    <p style="text-transform: capitalize">
79        <code><strong>capitalize</strong></code> Lorem ipsum dolo78      Lorem ipsum dolor sit amet, consectetur adipisicing elit, s
>r sit amet, consectetur adipisicing elit, sed do eiusmod tempor i>ed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>ncididunt ut labore et dolore magna aliqua. 
80      </li>79    </p>
80    <pre>
81p { text-transform: uppercase; }
82</pre>
81      <li style="text-transform:uppercase">83    <p style="text-transform: uppercase">
82        <code><strong>uppercase</strong></code> Lorem ipsum dolor84      Lorem ipsum dolor sit amet, consectetur adipisicing elit, s
> sit amet, consectetur adipisicing elit, sed do eiusmod tempor in>ed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>cididunt ut labore et dolore magna aliqua. 
83      </li>85    </p>
86    <pre>
87p { text-transform: lowercase; }
88</pre>
84      <li style="text-transform:lowercase">89    <p style="text-transform: lowercase">
85        <code><strong>lowercase</strong></code> Lorem ipsum dolor90      Lorem ipsum dolor sit amet, consectetur adipisicing elit, s
> sit amet, consectetur adipisicing elit, sed do eiusmod tempor in>ed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>cididunt ut labore et dolore magna aliqua. 
86      </li>
87    </ul>91    </p>
88    <h2>92    <h3>
t90    </h2>t94    </h3>

Back to History