The text properties serve to format the visual appearance of text content.
color
The color property
sets the color of text by using either one of the color notations. By default, its value is set to inherit, meaning that it inherits the color of its parent element.
color : inherit | <color>
The initial value is black for all major browsers. In the following example rule, paragraphs are colored blue:
p { color: #00f; }
text-transform
text-transform
controls
text casing. Possible values are listed as follows, with none as the initial value:
text-transform : inherit | none | uppercase | lowercase | capitalize
This property enables text to be converted into either uppercase or lowercase letters. The capitalize value capitalizes the first letter of each word. This property inherits by default, so the none value can be used to remove an inherited text-transform effect.
text-transform: none; /* remove effect */
text-decoration
One or more visual effects to text can be added with the
text-decoration property
.
text-decoration : none | underline + overline + line-through + blink
To add multiple decorations, separate the values with spaces (indicated by the “+” sign, shown previously). The following rule adds a line above and below text content that is affected by this class:
.highlight { text-decoration: underline overline; }
This property does not inherit, but its effect renders across descendent inline elements in a way that is similar to inheritance.
text-indent
The first line of text in a block element can be indented with the text-indent property
. It can be set to a unit of measure or a percentage of the parent element’s width. Text can also be indented backward by using a negative value.
text-indent (block) : inherit | <length> | <percentage>
Note that this property can only be set for block elements, such as the paragraph element <p>. The following example indents the first line of paragraph elements by one em:
p { text-indent: 1em; }
text-align
The text content of a block element can be aligned with the text-align property
. This property can replace usages of the deprecated align attribute in HTML.
text-align (block) : inherit | left | center | right | justify
Text and inline elements can be aligned to the left, aligned to the right, or centered. The justify value also stretches each line so that both the right and left margins appear straight.
p { text-align: justify; }
The text-align property inherits, so it needs to be explicitly changed in child elements to restore default left alignment.
direction
The writing direction of text can be switched with the direction property
.
direction (block) : inherit | ltr | rtl
The default value is ltr, meaning left-to-right. It can be changed to rtl to make text content within a block element flow to the right. It indicates that the text is supposed to be read from right-to-left, as in Hebrew or Arabic text, for example.
<p style="direction: rtl">
Aligned from right-to-left
</p>
This property does inherit, so it can be set once for the <body> element to apply to the whole web page.
text-shadow
A shadow effect can be added to text with the text-shadow property
.
text-shadow : inherit | none | <offset-x> <offset-y> [<blur-radius>] [<color>]
The shadow is defined using two offset values, followed by two optional values for the blur radius and color. The x and y offsets are specified as length values relative to the text. Positive values move the shadow right and down; negative values move it left and up.
A blur effect can be added by setting a blur radius, which makes the shadow stretch and fade at the edges. The final optional value for the property is the color of the shadow. If no color value is specified, most browsers render the shadow in the same color as the text. The following example style causes a slightly blurred gray shadow to appear at the top right of <h1> elements:
h1 { text-shadow: 1px -1px 1px gray; }
text-shadow is a CSS 3 property that is supported by most major browsers, including Chrome 2+, Firefox 3.5+, Safari 1.2+, Opera 9.5+, and, IE 10+.
box-shadow
In addition to text, a shadow effect can be added to block elements with the box-shadow property
.
box-shadow (block) : inherit | none | [inset] <offset-x> <offset-y> [<blur-radius>] [<spread-radius>] [<color>]
The values for the box shadow are the same as for text-shadow—with two exceptions. A fourth length value, spread-radius, can be specified to grow or shrink the shadow. This value is optional and is 0 if left unspecified, rendering the shadow in the same size as the element. As an example, the following class rule displays a blurry gray shadow to the bottom right of any block element using this class:
.drop-shadow { box-shadow: 3px 3px 3px 6px #ccc; }
The second value unique to the box-shadow property is the inset keyword. If present, the shadow displays inside the box instead of as a drop shadow on the outside
.
.inset-shadow { box-shadow: inset 3px 3px 3px 6px #ccc; }
box-shadow is a CSS 3 property and is implemented in Chrome 10+, Firefox 4+, Safari 5.1+, Opera 10.5+, and, IE 9+. Support can be expanded using the -webkit and -moz prefixes, as shown here:
.drop-shadow
{
/* Chrome 1-5, Safari 2-5.1+ */
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
/* Firefox 3.5-3.6 */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
text-rendering
By default, browsers
will automatically decide whether to optimize for speed, legibility or geometric precision when rendering text. This behavior can be changed using the text-rendering property.
text-rendering (text elements) : inherit | auto | optimizeSpeed | optimizeLegibility | geometricPrecision
Optimizing for legibility is often desirable, but keep in mind this can have a negative impact on performance, particularly when applied to text heavy pages and viewed on mobile devices.
p.legibility {
text-rendering: optimizeLegibility;
}
p.speed {
text-rendering: optimizeSpeed;
}
The text-rendering property is not defined by any CSS standard but is supported by WebKit and Gecko browsers, including Chrome 4+, Firefox 3+, Safari 5+, and Opera 15+ .