saftutorials.com
CSS Text Tutorial

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.


How to use CSS Text?

CSS Text use in a style code area -  like:  color: red; Where color = property name; red = property value;


Kinds of CSS Text Property Style?

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 Spacing5px for use control text letter spacing.

6) Line Height5px for use control text line height.

7) Word Spacing5px for use control word spacing.

CSS Text Color

CSS Text Color examples.
<!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

Example of CSS Fonts Styles.

Example for Text Color.


CSS Text Alignment

CSS Text Alignment.
<!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 of CSS Fonts Styles.

Example for Text Align Center

Example for Text Align Left

Example for Text Align Right


CSS Text Decoration

CSS Text Decoration examples.
<!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 of CSS Fonts Styles.

Example for Text Decoration Overline.

Example for Text Decoration Underline.

Example for Text Decoration Line Through.


CSS Text Transform

CSS Text Transform examples.
<!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 of CSS Text Transform.

Example for Text Transform Uppercase.

Example for Text Transform Lowercase.

Example for Text Transform Capitalize.


CSS Letter Spacing

CSS Letter Sapcing examples.
<!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 of CSS Text Transform.

Example for Letter Spacing.


CSS Line Height

CSS Line Height examples.
<!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 of CSS Text Transform.

Example for Line Height.


CSS Word Spacing

CSS Word Spacing examples.
<!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 of CSS Text Transform.

Example for Word Spacing.


CSS Text Shadow

CSS Text Shadow examples.
<!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 of CSS Text Transform.

Example for Text Shadow.

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic