Quick Reach
Working with text in CSS
CSS comes up with many properties related to managing text in your web documents to make it look beautiful, prominent, better in readability etc. The CSS text related properties include the color of text, text alignment, text decoration, indentation, letter spacing, shadow and more.
Note that, the text size comes under the font properties (font-size) that we covered in the CSS font chapter.
This chapter gives a brief about the text properties along with examples and links to the detailed chapters at the bottom.
Example of using alignment and color text properties
In this example, we will set the colors and alignment of headings and paragraph by using CSS text properties. The first heading is transformed to uppercase, second to the lowercase (just for illustration purpose) while paragraph remains as normal with other properties.
See the demo by clicking the link or image below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<html>
<head>
<style>
/*Using text*/
h1
{
text-align: left;
text-transform:uppercase;
background-color: #F0F0F0;
color: #355681;
}
h2
{
text-align: left;
text-transform:lowercase;
background-color: #355681;
color: #F0F0F0;
}
p
{
text-align: center;
background-color: #F0F0F0;
color: #355681;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is Paragraph</p>
</body>
</html>
|
CSS Text example with letter spacing
The example below uses the letter-spacing CSS property in headings and paragraph which is specified in pixels.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<html>
<head>
<style>
/*Using text*/
h1
{
text-align: left;
text-transform:uppercase;
background-color: #F0F0F0;
color: #355681;
letter-spacing:5px;
}
h2
{
text-align: left;
text-transform:lowercase;
background-color: #355681;
color: #F0F0F0;
letter-spacing:4px;
}
p
{
text-align: center;
background-color: #F0F0F0;
color: #355681;
letter-spacing:3px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is Paragraph</p>
</body>
</html>
|
An example of text decoration
The example below removes an underline in a link by using the CSS text-decoration property.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<html>
<head>
<style>
/*Using text properties*/
h1
{
text-align: left;
text-transform:uppercase;
background-color: #F0F0F0;
color: #355681;
letter-spacing:5px;
}
a
{
background-color: #F0F0F0;
color: #355681;
letter-spacing:5px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>This is text-decoration example without line in link:</h1>
<a href="http://www.exampletc.com">This is link</a>
</body>
</html>
|
Example of line-height text property
This example shows how to use line-height property in paragraph and heading.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<html>
<head>
<style>
/*Using text*/
h1
{
text-align: left;
text-transform:uppercase;
background-color: #F0F0F0;
color: #355681;
letter-spacing:5px;
line-height:normal;
}
h2
{
text-align: left;
text-transform:lowercase;
background-color: #355681;
color: #F0F0F0;
letter-spacing:4px;
line-height:3;
}
p
{
text-align: center;
background-color: #F0F0F0;
color: #355681;
letter-spacing:3px;
line-height:70px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is Paragraph</p>
</body>
</html>
|
Major text CSS properties
Following is the list of important CSS text related properties. Click on any link for its detailed chapter with demos.
- Text-align property
- CSS line-height property
- Text color property
- CSS letter-spacing property
- CSS vertical-align property
- Text-indent property
- CSS word-spacing property
- text-shadow property
Leave A Comment?