CSS on text:
CSS on text:
CSS works great on text elements. That may be a heading, a paragraph or a text link. CSS works same for all these elements. Following are the properties used for styling text:
|
Property
|
Value
|
Description
|
|
Color
|
blue;
|
Colors the text
|
|
font-family
|
"Times New Roman", Times, serif;
|
Set of fonts to be used by the browser
|
|
font-style
|
normal; / italic;
|
To stylize the text
|
|
font-size
|
40px;
|
To set a size of the text
|
|
font-size
|
10vw;
|
Responsive size of the text
|
|
font-weight
|
normal; / bold;
|
To make text bolder
|
|
text-align
|
center; / left; / right; / justify;
|
To align the text
|
|
text-transform
|
capitalize;
|
To convert entire text in Sentence case
|
|
lowercase;
|
To convert entire text in lower case
|
|
uppercase;
|
To convert entire text in UPPER CASE
|
|
text-indent
|
50px;
|
To set the indent
|
|
letter-spacing
|
3px;
|
To set space between letters
|
|
line-height
|
0.8;
|
To set space between lines
|
|
word-spacing
|
10px;
|
To set space between words
|
|
text-shadow
|
3px 2px red;
|
To set shadow behind text
|
|
background-color
|
Red; / #ff0000; / rgb(255,0,0);
|
Colors the background
|
|
background-image
|
url("paper.gif");
|
Puts a background image
|
Example 1: color, font-family, font-style, font-size & font-weight
<![CDATA[<html>
<head>
<style>
</style>
</head>
<body>
<p style="color:red;">Namaste! You're at ourtutorials.</p>
<p style="font-family:monotype corsiva,arial,calibri;">Namaste! You're at ourtutorials.</p>
<p style="font-style:normal;">Namaste! You're at ourtutorials.</p>
<p style="font-style:italic;">Namaste! You're at ourtutorials.</p>
<p style="font-size:25px;">Namaste! You're at ourtutorials.</p>
<p style="font-size:5vw;">Namaste! You're at ourtutorials.</p>
<p style="font-weight:normal;">Namaste! You're at ourtutorials.</p>
<p style="font-weight:bold;">Namaste! You're at ourtutorials.</p>
</body>
</html>]]>
Output 1:
Example 2: text-align, text-indent, line-height, text-transform, text-shadow, letter-spacing & word-spacing
<![CDATA[<html>
<head>
<style>
</style>
</head>
<body style="background-color:white;">
<p style="text-align:justify;text-indent:30px;line-height:1.4;">Namaste! You're at
ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at ourtutorials.
Namaste! You're at ourtutorials. Namaste! You're at ourtutorials. Namaste! You're
at ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at ourtutorials.
Namaste! You're at ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at
ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at ourtutorials.
Namaste! You're at ourtutorials. Namaste! You're at ourtutorials.</p>
<br>
<p style="text-transform:uppercase;">Namaste! You're at ourtutorials.</p>
<p style="text-shadow:3px 3px 5px red;">Namaste! You're at ourtutorials.</p>
<p style="letter-spacing:5px;">Namaste! You're at ourtutorials.</p>
<p style="word-spacing:7px;">Namaste! You're at ourtutorials.</p>
</body>
</html>]]>
Output 2:
Example 3: background-color & background-image
<![CDATA[<html>
<head>
<style>
</style>
</head>
<body style="background-color:white;">
<p style="background-color:#2bcdac">Namaste! You're at ourtutorials. Namaste! You're at
ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at ourtutorials. Namaste!
You're at ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at ourtutorials.
Namaste! You're at ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at
ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at ourtutorials. Namaste!
You're at ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at ourtutorials.</p>
<br><br>
<p style="background-image:url('scene2.jpg');">Namaste! You're at ourtutorials. Namaste!
You're at ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at ourtutorials.
Namaste! You're at ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at
ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at ourtutorials. Namaste!
You're at ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at ourtutorials.
Namaste! You're at ourtutorials. Namaste! You're at ourtutorials. Namaste! You're at
ourtutorials.</p>
<br>
</body>
</html>]]>
Output 3: