Web Programming Training By OM SIR Call for free Demo :9320957717/18

Text CSS

(1)color:
<!DOCTYPE html>
<html>
<head>
<style>
body {
    color: red;
}

h1 {
    color: #00ff00;
}

p.ex {
    color: rgb(0,0,255);
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>

</body>
</html>

(2)text-align:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}
</style>
</head>
<body>

<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me,
'just remember that all the people in this world haven't had the advantages that you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>

</body>
</html>


(3) text-decoration:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
</html>

(4) text-transform  :

 <!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

</body>
</html>

(5) text-indent   :

<!DOCTYPE   html>
<html>
<head>
<style>
p {
    text-indent : 20px;
}
</style>
</head>
<body>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

(5) letter-spacing:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    letter-spacing: 12px;
}

h2 {
    letter-spacing: -3px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

</body>
</html>

(6)Line    height:

<!DOCTYPE html>
<html>
<head>
<style>
p.small {
    line-height: 180%;
}

p.big {
    line-height: 200%;
}
</style>
</head>
<body>

<p>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>

<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>

(7) vertical-align :

<!DOCTYPE html>
<html>
<head>
<style>
img.top {
    vertical-align: text-top;
}

img.bottom {
    vertical-align: text-bottom;
}
</style>
</head>
<body>

<p>An <img src="vissicomp_logo.gif" alt="Vissicomp" width="270" height="50" /> image with a default alignment.</p>

<p>An <img class="top" src="vissicomp_logo.gif" alt="Vissicomp" width="270" height="50" /> image with a text-top alignment.</p>

<p>An <img class="bottom" src="vissicomp_logo.gif" alt="Vissicomp" width="270" height="50" /> image with a text-bottom alignment.</p>

</body>
</html>

Note:
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;


(8)text-shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-shadow: 2px 2px #FF0000;
}
</style>
</head>
<body>

<h1>Text-shadow effect</h1>

<p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p>

</body>
</html>

Note:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

h-shadow:
2px 2px red
5px 5px red
20px 20px red
-10px 10px red
-10px -10px red
5px 5px red
5px 5px 1px red
5px 5px 2px red
5px 5px 3px red
5px 5px 4px red
5px 5px 5px red
5px 5px 10px red
5px 5px 10px blue
5px 5px 10px black
5px 5px 10px #00FF00
none
initial

v-shadow:
text-shadow:

2px 2px red
5px 5px red
20px 20px red
-10px 10px red
-10px -10px red
5px 5px red
5px 5px 1px red
5px 5px 2px red
5px 5px 3px red
5px 5px 4px red
5px 5px 5px red
5px 5px 10px red
5px 5px 10px blue
5px 5px 10px black
5px 5px 10px #00FF00
none
initial






Blur radius:

text-shadow:

2px 2px red
5px 5px red
20px 20px red
-10px 10px red
-10px -10px red
5px 5px red
5px 5px 1px red
5px 5px 2px red
5px 5px 3px red
5px 5px 4px red
5px 5px 5px red
5px 5px 10px red
5px 5px 10px blue
5px 5px 10px black
5px 5px 10px #00FF00
none
initial


INITIAL:

text-shadow:

2px 2px red
5px 5px red
20px 20px red
-10px 10px red
-10px -10px red
5px 5px red
5px 5px 1px red
5px 5px 2px red
5px 5px 3px red
5px 5px 4px red
5px 5px 5px red
5px 5px 10px red
5px 5px 10px blue
5px 5px 10px black
5px 5px 10px #00FF00
none
initial


Previous
Next Post »