Tutorials
Learn web design and programming with our free video and text tutorials.
Web Designer? Design and market your own professional website with easy-to-use tools.
CSS Font and Text Tutorials
CSS allows you to manipulate the presentation of text in a variety of ways such as the size of the text, the spacing between words, the spacing between characters of a sentence, the spacing between lines in a text, the size of the text, the face of the text and more.
How To Set the Color of Text with CSS
The color property is used to set the foreground property of an element. The color property is follewed by a color (:) which is followed by the color value.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.green
{
color: #008000;
}
.blue
{
color: #0000ff;
}
</style>
</head>
<body>
<p>
This is some text.
</p>
<p class="green">
This text is green.
</p>
<p class="blue">
This text is blue.
</p>
<p>
This is some text.
</p>
</body>
</html>
The code above produces the paragraphs below.
This is some text.
This text is green.
This text is blue.
This is some text.
How To Specify the Letter Spacing of Text with CSS
The letter-spacing property specifies the spacing between characters.
You can use any length value that is supported by CSS, not specify the letter spacing and leave the letter spacing as the default value or have the property inherit the value.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.one
{
letter-spacing: 0.1cm;
}
.two
{
letter-spacing: 1cm;
}
</style>
</head>
<body>
<p>
This is some text.
</p>
<p class="one">
This text has a letter spacing of "0.1cm".
</p>
<p class="two">
This text has a letter spacing of "1cm".
</p>
<p>
This is some text.
</p>
</body>
</html>
The code above produces the paragraphs below.
This is some text.
This text has a letter spacing of "0.1cm".
This text has a letter spacing of "1cm".
This is some text.
How To Specify the Word Spacing of a Text with CSS
The word-spacing property specifies the spacing between words.
You can use any length value that is supported by CSS, not specify the letter spacing and leave the word spacing as the default value or have the property inherit the value.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.one
{
word-spacing: 5px;
}
.two
{
letter-spacing: 30px;
}
</style>
</head>
<body>
<p>
This is some text.
</p>
<p class="one">
This text has a word spacing of "5px".
</p>
<p class="two">
This text has a word spacing of "30px".
</p>
<p>
This is some text.
</p>
</body>
</html>
The code above produces the paragraphs below.
This is some text.
This text has a word spacing of "5px".
This text has a word spacing of "30px".
This is some text.
How To Indent the First Line of a Paragraph with CSS
The text-indent property inserts a specified length before the first line of text in a paragraph.
You can use any length value that is supported by CSS as the property value.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.one
{
text-indent: 50px;
}
.two
{
text-indent: 200px;
}
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
</p>
<p class="one">
This text has a word spacing of "50px". This text has a word spacing of "50px".
This text has a word spacing of "50px". This text has a word spacing of "50px".
This text has a word spacing of "50px". This text has a word spacing of "50px".
</p>
<p class="two">
This paragraph has an indention of "200px". This paragraph has an indention of "200px".
This paragraph has an indention of "200px". This paragraph has an indention of "200px".
This paragraph has an indention of "200px". This paragraph has an indention of "200px".
</p>
<p>
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
</p>
</body>
</html>
The code above produces the paragraphs below.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This paragraph has an indention of "50px". This paragraph has an indention of "50px". This paragraph has an indention of "50px". This paragraph has an indention of "50px". This paragraph has an indention of "50px". This paragraph has an indention of "50px".
This paragraph has an indention of "200px". This paragraph has an indention of "200px". This paragraph has an indention of "200px". This paragraph has an indention of "200px". This paragraph has an indention of "200px". This paragraph has an indention of "200px".
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
How To Align Text with CSS
The text-align property allows you to align text either to the left, right or in the center and you can also use the justify value.
The justify value aligns both the left and right margins and adds blank spaces to make up for varying line lengths on either side of each line.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.left
{
text-align: left;
}
.center
{
text-align: center;
}
.right
{
text-align: right;
}
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
</p>
<p class="left">
This text is aligned to the left. This text is aligned to the left. This text is aligned to the left.
This text is aligned to the left. This text is aligned to the left. This text is aligned to the left.
</p>
<p class="center">
This text is aligned in the center. This text is aligned in the center.
This text is aligned in the center. This text is aligned in the center.
</p>
<p class="right">
This text is aligned to the right. This text is aligned to the right. This text is aligned to the right.
This text is aligned to the right. This text is aligned to the right. This text is aligned to the right.
</p>
<p>
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
</p>
</body>
</html>
The code above produces the paragraphs below.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This text is aligned to the left. This text is aligned to the left. This text is aligned to the left. This text is aligned to the left. This text is aligned to the left. This text is aligned to the left.
This text is aligned in the center. This text is aligned in the center. This text is aligned in the center. This text is aligned in the center.
This text is aligned to the right. This text is aligned to the right. This text is aligned to the right. This text is aligned to the right. This text is aligned to the right. This text is aligned to the right.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
How To Decorate Text with CSS
The text-decoration property allows you to apply the values, none, underline, overline, line-through and also the blink values to text, however, the blinking effect is not supported by IE or Safari web browsers.
One common use of the text-decoration property is to apply the "none" value to links that you do not want to have an underline under them.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.underline
{
text-decoration: underline;
}
.overline
{
text-decoration: overline;
}
.strikethrough
{
text-decoration: line-through;
}
.blink
{
text-decoration: blink;
}
</style>
</head>
<body>
<p>
This is some text.
</p>
<p class="underline">
This text has a line under it.
</p>
<p class="overline">
This text has a line over it.
</p>
<p class="line-through">
This text has a line through it.
</p>
<p class="blink">
This text is blinking, unless you are viewing this page with an IE or Safari browser, which do not support the
blink value.
</p>
</body>
</html>
The code above produces the paragraphs below.
This is some text.
This text has a line under it.
This text has a line over it.
This text has a line through it.
This text is blinking, unless you are viewing this page with an IE or Safari browser, which do not support the blink value.
To specify more than one effect, seperate each value keyword with a blank space.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.combo
{
text-decoration: underline overline line-through;
}
</style>
</head>
<body>
<p>
This is some text.
</p>
<p class="combo">
This text has more than one text decoration effect applied to it.
</p>
</body>
</html>
This is some text.
This text has more than one text decoration effect applied to it.
How To Manupilate the Case of Text with CSS
The text-transform property can have the values capitalize, uppercase, lowercase and none.
The capitalize value will make the first letter of each word in a text uppercase.
The uppercase value will make all of the letters of a text uppercase. The lowercase value will make all of the letters of a text lowercase.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.capitalize
{
text-transform: capitalize;
}
.uppercase
{
text-transform: uppercase;
}
.lowercase
{
text-transform: lowercase;
}
</style>
</head>
<body>
<p>
This is some text.
</p>
<p class="capitalize">
This text has the text-transform property with the capitalize value applied to it.
</p>
<p class="uppercase">
This text has the text-transform property with the uppercase value applied to it.
</p>
<p class="lowercase">
This text has the text-transform property with the lowercase value applied to it.
</p>
</body>
</html>
The code above produces the paragraphs below.
This is some text.
This text has the text-transform property with the capitalize value applied to it.
This text has the text-transform property with the uppercase value applied to it.
This text has the text-transform property with the lowercase value applied to it.
How To Control the White-Space of a Text with CSS
The white-space property specifies how white-space inside an element is handled.
The values that can be applied to the white-space property are listed below.
| Value | Description |
|---|---|
| normal | The normal value causes the browser to automatically add white space and line breaks in the text. |
| nowrap | The nowrap value prevents text from wrapping onto new line automatically , unless an XHTML line break (<br />) is included in the text. |
| pre | Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the <pre> tag in HTML |
| pre-line | Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks |
| pre-wrap | Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks |
| inherit | Specifies that the value of the white-space property should be inherited from the parent element |
NOTE: No version of Internet Explorer does not support the value inherit.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.normal { white-space: normal; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre; }
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
</p>
<p class="normal">
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
</p>
<p class="nowrap">
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
</p>
<p class="pre">
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
</p>
</body>
</html>
The code above produces the paragraphs below.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
How To Specify the Font Family of a Text with CSS
The font-family property specifies the font family of a text.
NOTE: If you specify a font family value that is more than word, the value must be in either single or double quotation marks, for example: "Times New Roman".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.times { font-family: times; }
.arial { font-family: arial; }
</style>
</head>
<body>
<p class="times">
This text has a "times" font.
</p>
<p class="arial">
This text has an "arial" font.
</p>
</body>
</html>
The code above produces the paragraphs below.
This text has a "times" font.
This text has an "arial" font.
How To Specify the Style of a Font with CSS
The font-style property allows you to specify the style of a font to be either italic or oblique and can also have a normal value, however, in real world practice, only the italic value is used.
For the majority of fonts, the italic and the oblique styles are displayed almost identically. Also, some fonts do not have neither an italic nor an oblique style.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.italic { font-style:italic; }
.oblique { font-style:oblique; }
</style>
</head>
<body>
<p>
This is some text.
</p>
<p class="italic">
This font has an "italic" style.
</p>
<p class="oblique">
This font has an "oblique" style.
</p>
</body>
</html>
The code above produces the paragraphs below.
This is some text.
This font has an "italic" style.
This font has an "oblique" style.
How To Make a Font Bold with CSS
The font-weight property allows you to set font formatting to bold and also specify how bold a font is.
The values that the font-weight property can have are normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700 and 800, however, the only 2 value keywords that are typically used in real world web design are normal and bold. That means that font-weight property is either set to bold, normal or it is not specified at all.
To remove the bold formatting from an element that is bold by default, for example the <h4> through <h6> elements, set the value of the font-weight property to normal.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.normal { font-weight:normal; }
.bold { font-weight:bold; }
</style>
</head>
<body>
<p class="normal">
This font has a weight of normal.
</p>
<p class="bold">
This font has a weight of bold.
</p>
</body>
</html>
The code above produces the paragraphs below.
This font has a weight of normal.
This font has a weight of bold.
How To Set the Size of a Text with CSS
The font-size property allows you to set the size of a font.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.one { font-size:12px; }
.two { font-size:20px; }
.three { font-size:1.5em; }
.four { font-size:150%; }
</style>
</head>
<body>
<p class="one">
This text as a font size of 12px.
</p>
<p class="two">
This text has a font size of 20px.
</p>
<p class="three">
This text has a font size of 1.5em which is equivalent to a font size of 150%.
</p>
<p class="four">
This text has a font size of 150%.
</p>
</body>
</html>
The code above produces the paragraphs below.
This text as a font size of 12px.
This text has a font size of 20px
This text has a font size of 1.5em which is equivalent to a font size of 150%.
This text has a font size of 150%.
How To Set the Line-Height of a Text with CSS
The line-height property allows you to set the height of a line of text with CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.one { line-height:30px; font-size:15px; }
.two { line-height:15px; font-size:15px; }
.three { line-height:1.5em; font-size:15px; }
.four { line-height:150%; font-size:15px; }
</style>
</head>
<body>
<p class="one">
This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px.
This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px.
This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px.
</p>
<p class="two">
This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px.
This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px.
This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px.
</p>
<p class="three">
This line has a line a line height of 1.5em which is equivalent to a line height of 150%.
This line has a line a line height of 1.5em which is equivalent to a line height of 150%.
This line has a line a line height of 1.5em which is equivalent to a line height of 150%.
</p>
<p class="four">
This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%.
This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%.
This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%.
</p>
</body>
</html>
The code above produces the paragraphs below.
This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px.
This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px.
This line has a line a line height of 1.5em which is equivalent to a line height of 150%. This line has a line a line height of 1.5em which is equivalent to a line height of 150%. This line has a line a line height of 1.5em which is equivalent to a line height of 150%.
This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%.