March 20, 2016

Some Useful CSS text property

Using text-decoration and text-transform property the selected elements can be styled with the keywords underline, line-through, overline underline blink, uppercase, lowercase or capitalize etc. The  selected  text  can be capitalized using the text-transform css property with the keywords as uppercase, lowercase or capitalized. 

Let us see an example below:

Create an HTML, document with a paragraph containing spanned text and another paragraph containing hyperlinks, separated by a ruled line.


/* Save the HTML document along with style sheet. We add rules to specify color and fonts */
#para-1 {font:medium "Courier", monospace;
background: #65479f;
color: #ffffff;}

#sig {font:xx-large "Lucida Handwriting", cursive;

/* Here we add style rules to decorate spanned text. */
span.under {text-decoration:underline}
span.thru {text-decoration:line-through}
span.rails {text-decoration:overline underline blink}

/* Here we add style rules to transform spanned text. */
span.lower {text-transform:lowercase}
span.upper {text-transform:uppercase}
span.caps {text-transform:capitalize}


<p id="para-1">We think it is
<span class="under caps">important</span>
when<br>a word is
<span class="under">underlined.</span>
<br>Outdated word we mark as
<span class="thru caps">cancelled</span>
when<br>not needed it can be
<span class="thru">crossed it</span>
<br>still try to just read<br>
<span class="rails upper">the whole sentence</span>
<span id="sig" class="lower"> - NAOCHA </span>


 Save the HTML document and open in a browser to see the result.


We think it is important when
a word is underlined.
Outdated word we mark as cancelled when
not needed it can be crossed it
still try to just read
the whole sentence


No comments :

Post a Comment