CSS Text - CodeGK

♦ CSS Text

♣ About CSS Text

The Text has many modifiable properties.
Below is a listing of Text Properties

Color
Alignment
Decoration
Spacing
Transformation
Shadow

♣ Example1: CSS Text Color

In this example, Various text Colors are illustrated.

Example

Input:

Output:

♣ Example2: CSS Text Alignment

In this example, various types of text-alignment are illustrated.
To be specific right, center, left(default) and justify.
right, center, left are self-explanatory.
justify keyword makes the words of textual-content to spread out evenly on the line by providing equal spacing throughout that line.

Example

Input:

Output:

♣ Example3: CSS Text Decoration

In this example, various decoration keywords are illustrated for text.
To be specific underline, overline, line-through, none.
Tip: none can be used for hyperlinks for removing the default underline as text-decoration.

Example

Input:

Output:

♣ Example4: CSS Text Spacing

In this example, various types of spacing techniques will be seen for text.
To be specific text-indent, letter-spacing, line-height, word-spacing and white-space.

Example

Input:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">

h2{
text-indent: 50px;
}

h3{
letter-spacing: 4px;
}

h4{
letter-spacing: -2px;
}

p.tiny {
  line-height: 0.6;
}

p.large {
  line-height: 2.2;
}

.far_word {
  word-spacing: 8px;
}

.close_word {
  word-spacing: -3px;
}

</style>

<body>

<h2>Shifted Right</h2>
<hr>

<h3>Far Letters</h3>
<hr>

<h4>Iam aligned to Close</h4>
<hr>

<p class="tiny">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<hr>

<p class="large">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>

<div class="far_word">
Lorem ipsum dolor sit amet
</div>
<hr>

<div class="close_word">
Lorem ipsum dolor sit amet
</div>
<hr>

</body>
</html>

Output:

♣ Example5: Transformation

In this example, various types of text-transformation properties are illustrated.
To be specific lower-case, upper-case, and capital.

Example

Input:

Output:

♣ Example6: CSS Text Shadow

In this example, Various text-shadow method are illustrated.

Example

Input:

Output:

Prev_Lesson Next_Lesson