$type=carousel$cols=3$cate=0$date=1

Some Useful CSS text property

Using text-decoration and text-transform property the selected elements can be styled with the keywords underline, line-through, overlin...

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.

<html>
<head>
<style>

/* 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;
color:#f254d4}

/* 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}

</style>
</head>
<body>

<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>
<br>
<span id="sig" class="lower"> - NAOCHA </span>
</p>

</body>
</html>

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

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
- NAOCHA


END...

COMMENTS

Name

css,17,html,7,php,2,python,1,tech,18,
ltr
item
iWriteLess Tech Blog: Some Useful CSS text property
Some Useful CSS text property
https://1.bp.blogspot.com/-GeMzz6tRq0Q/WntFv-PC33I/AAAAAAAABpE/ZP175DY9E_YIzaZ5PkP604hxwmD8JzGBwCLcBGAs/s1600/css_text_poperty.png
https://1.bp.blogspot.com/-GeMzz6tRq0Q/WntFv-PC33I/AAAAAAAABpE/ZP175DY9E_YIzaZ5PkP604hxwmD8JzGBwCLcBGAs/s72-c/css_text_poperty.png
iWriteLess Tech Blog
http://www.iwriteless.com/2016/03/some-useful-css-text-property.html
http://www.iwriteless.com/
http://www.iwriteless.com/
http://www.iwriteless.com/2016/03/some-useful-css-text-property.html
true
2724151228810149585
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy