News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

CSS Tutorial – 12 – Text

CSS tutorials

The remainder of this tutorial will cover CSS properties and their values. In the upcoming lists of allowed property values the first value will always refer to the default value. Since all properties can use the “inherit” value it won’t be included unless it is the default value for a property.

When “inherit” is the default value there is also the question of what the initial value is for that property. For some properties CSS does not define this and instead leaves it up to the individual browsers to decide. However, when initial values are defined, or when most browsers use the same value, this will be pointed out, unless it’s an obvious initial value such as “none” or “normal”.

Color

The color property can set the color of text using one of the five different color notations. By default its value is set to inherit, meaning it will inherit the color of its parent element. The initial value is black for most browsers.

color : inherit | <color>

Text-transform

Text-transform controls the casing of text.

text-transform : inherit | none | uppercase | 
                 lowercase | capitalize

Text-decoration

Text-decoration can add one or more decorations to text.

text-decoration : none | underline + overline + 
                  line-through + blink

To add multiple decorations separate the values with spaces (indicated by the “+” sign above).

p { text-decoration: underline line-through; }

Text-indent

Text-indent indents the first line of text in a block element. It can be set to a unit of measure or a percentage of the parent element’s width. Text can also be indented backwards by using a negative value.

text-indent (block) : inherit | <length> | <percentage>

Text-align

The text content of a block element can be aligned using the text-align property. This property can replace usages of the deprecated align attribute in HTML.

text-align (block) : inherit | left | center | 
                     right | justify
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours