codescracker


css

CSS Text



« Previous Tutorial Next Tutorial »


CSS Text Formatting Demo

This is CSS texts handling tutorial. You will learn all about text in this tutorial. CSS text formatting plays an important role to format text to create some interactive written paragraphs. Here you will learn about text properties, text color, text direction, letter spacing, word spacing, text indentation, text alignment, text decoration, text transformation, white spaces, and line height.

CSS allows you to apply as well as modify the styles already applied on the text of a Web page. For instance, you can change the color and direction of the text.

CSS properties also allow you to change the indentation of the first line of text to give it a paragraph look. Moreover, you can also underline, over line, or strike out the text, as per the requirement.

CSS Text Properties

The following table describes CSS properties used to customize the appearance of the text in a Web page.

Properties Description
color Specifies the color of the text in a Web page. The value of the color property can be the name of the color or the hex code for the color, such as #ff0000 is the hex code of red color.
direction Specifies the direction of the text. The following are the possible values that are used with the direction property :
(i) ltr - Changes the flow of the text from left to right.
(ii) inherit - Changes the flow of the text in the same direction as that of the parent element.
(iii) rtl - Changes the flow of the text from right to left.
hanging-punctuation Defines whether or not the punctuation marks are defined outside the line box. The possible values to be used with the hanging-punctuation property are none, first, last, allow-end, and force-end.
letter-spacing Specifies the space between characters
line-break Defines a set of line breaking rules to be used with text
line-height Specifies the height of a line
text-indent Shifts the first line of a block text to create a paragraph look. This property is not applicable to all the elements. It is applicable only to the element of the block type, such as heading, paragraph, and div. It is not applicable to elements, such as table and list. It also allows negative values. In case of negative values, the first line of the text will be indented to the left.
punctuation-trim Specifies whether to trim the punctuation marks at the start or at the end of a line.
text-align Sets the horizontal alignment of the text. The following are the four possible values that are used with the text-align property :
(i) center - Changes the text in the middle of the containing element
(ii) justify - Fits the text in the containing element
(iii) left - Aligns the text at the left side of the containing element
(iv) right - Aligns the text at the right side of the containing element
text-align-last Specifies the alignment of the last line of a text. The possible values are start, end, center, left, right, justify, and size.
text-autospace Controls the left and right side spacing of the text
text-decoration Performs various actions on the text, such as underlining the text, over lining the text, striking out the text, and making the text to blink. The different values of the text-decoration property are as follows:
(i) Underline - Underlines the text
(ii) Overline - Draws a line over the text
(iii) Line-through - Strikes out the text
(iv) Blink - Makes the text to blink
(v) None - Does not alter the original text
text-decoration-line Defines the decoration for the lines of an element. The following are the possible values :
(i) none - Provides no decoration
(ii) underline - Underlines the text
(iii) overline - Provides a line above the text
(iv) line-through - Provides a line in the middle of the text
text-decoration-color Defines the color of the text decoration line that is specified using the text-decoration-line property.
text-decoration-style Defines the style of the text decoration line specified using the text-decoration-line property
text-decoration-skip Specifies the elements content to skip the text decoration. The following are the possible values:
(i) none - Skips nothing
(ii) images - Skips all images
(iii) spaces - Skips all white spaces
(iv) ink - Skips the drawn glyphs
(v) all - Skips all the content of the element
text-emphasis-style Specifies the style of the emphasis marks on the text of an element
text-emphasis-color Specifies the color of the emphasis mark on the text of an element
text-emphasis Provides the emphasis mark on the text of an element. In this property, you can define the style and color of the emphasis mark.
text-emphasis-position Specifies the position to draw the emphasis mark. The possible values are over and under
text-justify Specifies the method of justifying the text when the text-align property is set to justify.
text-shadow Specifies a list of shadow effects to be applied on the text
text-transform Transforms the characters of a text. The following are the four possible values that are used with the text-transform property :
(i) Capitalize - Transforms the first letter of each word in the text into upper case letter
(ii) Lowercase - Transforms the text into lower case
(iii) Uppercase - Transforms the text into upper case
(iv) None - Does not make any change in the original text
text-outline Provides an outline on the text
text-overflow Specifies the behaviour of the text when it overflows the containing element
text-stroke Provides the outlining on the text. This property takes two value: text-stroke-color and text-stroke-width
text-underline-position Sets the position of the underline specified on the text. The possible values are auto, over, under, and alphabetic
text-wrap Specifies the way of wrapping the text in an element
white-space-collapsing Specifies the way of collapsing white spaces in an element
white-space Specifies the handling of white spaces in an element. The possible values are normal, nowrap, pre, pre-line, pre-wrap, and inherit
word-break Defines a rule that allows a word to break into the next line.
word-spacing Defines the minimum and maximum space between words
word-wrap Allows long words to break and wrap in the next line

CSS Text Color

Here is an example, shows how to set text color using CSS.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Text Example</title>
	<style>
		body { color: red; }
		h2 { color: blue; }
		p.ex { color: green; }
	</style>
</head>
<body>

<h2>CSS Text Color Example</h2>
<p>This is an ordinary paragraph. The text color of this text is red.
The default text-color for a web page is defined in the body selector.</p>
<p class="ex">The text color of this text is green.</p>

</body>
</html>

Here is the sample output produced by the above CSS text color example code:

CSS Text Color Properties

CSS Text Direction

Here is an example demonstrates CSS text direction.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Text Example</title>
	<style>
		div.ex1 { direction: rtl; unicode-bidi: bidi-override; }
	</style>
</head>
<body>

<div>This text is in the default text direction.</div>
<div class="ex1">This is in right-to-left text direction.</div>

</body>
</html>

Here is the sample output of the above CSS text direction example code:

css text direction

CSS Letter Spacing

Here is an example illustrates CSS letter spacing.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Text Example</title>
	<style>
		p.p1 { letter-spacing: 5px; }
		p.p2 { letter-spacing:3px; }
		p.p3 { letter-spacing:-1px; }
	</style>
</head>
<body>

<p class="p1">This text with 5px letter spacing</p>
<p class="p2">This text with 3px letter spacing</p>
<p class="p3">This text with -1px letter spacing</p>

</body>
</html>

Below is the sample output of the above CSS letter spacing example code:

CSS letter-spacing Property

CSS Word Spacing

Here is an example demonstrates word spacing in CSS.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Text Example</title>
	<style>
		p.p1 { word-spacing: 25px; }
		p.p2 { word-spacing:10px; }
		p.p3 { word-spacing:-1px; }
	</style>
</head>
<body>

<p class="p1">This text with 25px word spacing</p>
<p class="p2">This text with 10px word spacing</p>
<p class="p3">This text with -1px word spacing</p>
<h1>

</body>
</html>

Here is the sample output of the above CSS word spacing example code:

CSS word-spacing Property

CSS Text Indentation

Here is an example demonstrates CSS text indentation.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Text Example</title>
	<style>
		p { text-indent: 60px; }
		h2{ text-align:center; color:green; }
	</style>
</head>
<body>

<h2>CSS Text Indentation</h2>
<p>This text with text-indent: 60px</p>

</body>
</html>

Here is the sample output of the above CSS text indentation example code:

CSS Text Indentation Property

CSS Text Alignment

Here is an example demonstrates CSS text alignment.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Text Example</title>
	<style>
		h2 { text-align: center; }
		p.quote { text-align: right; }
		p.content { text-align: justify; }
	</style>
</head>
<body>

<h2>CSS Text Align</h2>
<p class="quote">This is CSS Text Handling Tutorial</p>
<p class="content">Here you will learn all about text with examples
 and their respective outputs.</p>

</body>
</html>

Here is the sample output produced by the above CSS text alignment example code:

CSS text-align Property

CSS Text Decoration

Here is an example illustrating CSS text decoration.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Text Example</title>
	<style>
		a { text-decoration: none; }
	</style>
</head>
<body>

<p>This is <a href="http://codescracker.com/css/css-text.htm">CSS Text</a> tutorial
on <a href="http://codescracker.com">codescracker.com</a> with examples.</p>

</body>
</html>

Underline removed from the link after setting the text-decoration as none. Following is the sample output of the above CSS text decoration example code:

CSS Text Decoration

CSS Text Transformation

Here is an example demonstrates CSS text transformation.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Text Example</title>
	<style>
		p.uppercase { text-transform: uppercase; }
		p.lowercase { text-transform: lowercase; }
		p.capitalize { text-transform: capitalize; }
	</style>
</head>
<body>

<p class="uppercase">This text is transformed into uppercase</p>
<p class="lowercase">This text is transformed into lowercase</p>
<p class="capitalize">This text is transformed into capitalize</p>

</body>
</html>

Below is the output of the above CSS text transformation example code:

CSS Text Transformation

CSS White Space

Here is an example shows how to use white space in CSS.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Text Example</title>
	<style>
		p { white-space: nowrap; }
	</style>
</head>
<body>

<h2>Paragraph without wrap</h2>
<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>

Here is the sample output of the above CSS white space example code:

CSS White Space

As you can see from the above output, all the texts are written in only single line without any wrap.

CSS line-height

Here is an example demonstrates CSS line-height property.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Text Example</title>
	<style>
		p.small { line-height: 60%; }
		p.big { line-height: 210%; }
	</style>
</head>
<body>

<h2>Standard/Default line-height</h2>
<p>
	This is written with a standard line height.<br/>
	The default line height in most browsers is about 110% to 120%.
</p>

<h2>Small line-height (60%)</h2>
<p class="small">
	This is written with a smaller line-height<br>
	using the CSS property, line-height: 60%.
</p>

<h2>Big line-height (210%)</h2>
<p class="big">
	This is written with a bigger line-height<br>
	using the CSS property, line-height: 210%.
</p>

</body>
</html>

Here is the sample output of the above CSS line height example code:

CSS line-height Property

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test