Text-transform part 2

text-transform Values



Using text-transform property you can make text appear in all-uppercase or all-lowercase. Here is an example:

The HTML:<p class="uppercase">This value transforms all characters to uppercase.</p>
<p class="lowercase">This value transforms all characters to lowercase.</p>
The CSS:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}Try It Yourself

Result:
The value none will produce no capitalization effect at all.

Comments

Post a Comment

Popular posts from this blog

font-family part 1

Image
The font-family Property The font-family property specifies the font for an element.  There are two types of font family names:  -  font family : a specific font family (like Times New Roman or Arial) -  generic family : a group of font families with a similar look (like Serif or Monospace) Here is an example of different font styles: The HTML: <p class="serif"> This is a paragraph shown in serif font. </p> <p class="sansserif"> This is a paragraph shown in sans-serif font. </p> <p class="monospace"> This is a paragraph shown in monospace font. </p> <p class="cursive"> This is a paragraph shown in cursive font. </p> <p class="fantasy"> This is a paragraph shown in fantasy font. </p> The CSS: p.serif { font-family: "Times New Roman", Times, serif ; } p.sansserif { font-family: Helvetica, Arial, sans-serif ; } p.monospace { font-family: ...
Read more

Word-spacing part 1

Image
The word-spacing Property The word-spacing property specifies the  space between words  in a text. Just like the letter-spacing property, you can set the word-spacing values as  normal ,  length , and  inherit .  The HTML: <p class="normal">This paragraph has no additional word-spacing applied.</p> <p class="px">This paragraph is word-spaced at 30px.</p> The CSS: p.normal { word-spacing: normal ; } p.px { word-spacing: 30px ; } Try It Yourself Result: When a weird spacing is used, and it is necessary to keep the selected paragraph with normal word spacing, the  normal option is usually used.
Read more

Background attachment part 1

Image
The background-attachment Property The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. Even if an element has a scrolling mechanism, a "fixed" background doesn't move with the element. The CSS: body { background-image: url("css_logo.png"); background-repeat: no-repeat; background-attachment: fixed ; } Try It Yourself Result: Tap  Try It Yourself  to play around with the code!
Read more