CSS Introduction
CSS Structure
CSS Colors
CSS Background
CSS Width-Height
CSS Float
CSS Display
CSS Borders
CSS Fonts
CSS Text
CSS Align
CSS List
CSS Margin
CSS Padding
CSS Position
CSS Tables
CSS Images
CSS Link
CSS Icons
CSS MAX MIN WIDTH-HEIGHT
CSS Test is on of the most important property of CSS. CSS Text control text color, alignment, decoration, transform and more css text controlling.
By this tutorials you can learn
1) How to use CSS Text?
2) Kinds of CSS Text Property.
2) Example of CSS Text Style.
CSS Text use in a style code area - like: color: red; Where color = property name; red = property value;
1) Color: green - for use control text color.
2) Alignment: center - for use control text alignment.
3) Decoration: uppercase - for use control text case.
4) Transform: 20px - for use control font sizing.
5) Letter Spacing: 5px - for use control text letter spacing.
6) Line Height: 5px - for use control text line height.
7) Word Spacing: 5px - for use control word spacing.
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Color.</title>
<style type="text/css">
.saf h1{color:green;}
</style>
</head>
<body>
<div class="saf">
<h1>Example for Text Color.
</div>
</body>
</html>
Double Click to Select Code
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Alignment.</title>
<style type="text/css">
.saf p{text-align:center;}
.saf1 p{text-align:left;}
.saf2 p{text-align:right;}
</style>
</head>
<body>
<div class="saf"><p>Example for border solid.</p></div>
</body>
</html>
Double Click to Select Code
Example for Text Align Center
Example for Text Align Left
Example for Text Align Right
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Text Decoration.</title>
<style type="text/css">
.saf3 p{text-decoration:overline;}
.saf4 p{text-decoration:underline;}
.saf5 p{text-decoration:line-through;}
</style>
</head>
<body>
<p>Example for border solid.</p>
</body>
</html>
Double Click to Select Code
Example for Text Decoration Overline.
Example for Text Decoration Underline.
Example for Text Decoration Line Through.
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Text Transform.</title>
<style type="text/css">
.saf6 p{text-transform:uppercase;}
.saf7 p{text-transform:lowercase;}
.saf8 p{text-transform:capitalize;}
</style>
</head>
<body>
<p>Example for border solid.</p>
</body>
</html>
Double Click to Select Code
Example for Text Transform Uppercase.
Example for Text Transform Lowercase.
Example for Text Transform Capitalize.
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Letter Spacing.</title>
<style type="text/css">
.saf9 p{letter-spacing:5px;}
</style>
</head>
<body>
<div class="saf9">
Example for Letter Spacing.
</div>
</body>
</html>
Double Click to Select Code
Example for Letter Spacing.
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Line Height.</title>
<style type="text/css">
.saf10 p{line-height:10px;}
</style>
</head>
<body>
<div class="saf10">
Example for Letter Spacing.
</div>
</body>
</html>
Double Click to Select Code
Example for Line Height.
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Word Spacing.</title>
<style type="text/css">
.saf11 p{word-spacing:5px;}
</style>
</head>
<body>
<div class="saf11">
Example for Word Spacing.
</div>
</body>
</html>
Double Click to Select Code
Example for Word Spacing.
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Text Shadow.</title>
<style type="text/css">
.saf12 p{text-shadow: 2px 2px green;}
</style>
</head>
<body>
<div class="saf12">
Example for Text Shadow.
</div>
</body>
</html>
Double Click to Select Code
Example for Text Shadow.