CSS Text Styles
color
Sets the forground color of an element. Color is represented by a combination of red, green, and blue brightness values. Colors may specified by name, by three or six digit hex values, or by decimal rgb values. See also background-color.
css syntax
color: color
The following examples would all set the color to a bright yellow.
examples
color: yellow
color: #ff0
color: #ffff00
color: rgb(255, 255, 0)
letter-spacing
Sets the spacing between letters. A positive value gives more spacing between letters and a negative value gives less.
css syntax
letter-spacing: length | normal
line-height
Sets the height of the box holding a line of content. Normally the tallest font in a line of text governs the line height. If specified as a number or percentage, the normal line height is multiplied by this number. If given as a length, it is set to that length. The value of normal prevents other values from being inherited from parent elements.
css syntax
line-height: length | normal | number | percentage
text-align
Sets the horizontal alignment of content within an element. In some older browsers, justify equates to left justification, but produces fully justified text in most modern browsers.
css syntax
text-align: center | justify | left | right
text-align-last
Sets the horizontal alignment of the last line of text within an element. The value of auto inherits the value of text-align.
css syntax
text-align-last: auto | center | justify | left | right
text-decoration
Sets the decoration of text content in the form of underlines, overlines, strikethroughs, and blink. Older browsers may not support blink and overline.
css syntax
text-decoration: blink | line-through | none | overline | underline
text-indent
Sets the indentation of the first line of text in a block element. You can see the effect on this paragraph. The first line is indented 15 pixels. Only the first line is affected. While negative values can be set, it is possible to run the text off the display or into an adjacent element.
css syntax
text-indent: length | percentage
example
text-indent: 15px
text-overflow
If an element has its' overflow style set to hidden and text content overflows a fixed box, this setting determines whether it is simply clipped or an ellipsis (...) is displayed at the end of the line.
css syntax
text-overflow: clip | ellipsis
text-shadow
This CSS3 attribute creates a drop shadow effect for text within the element for newer browsers supporting the CSS3 specification. Multiple shadows value sets may be specified, each comma delimited.
css syntax
text-shadow: [color] hLength vLenth blur, [[color] hLenth vLenth blur], ...
text-transform
This setting overrides the case of the letters within an element. A value of "capitalize" will transform the first character of every word into uppercase. A value of lowercase or uppercase will set all letters to those respective cases. See also font-variant.
css syntax
text-transform: capitalize | lowercase | none | uppercase
vertical-align
This sets the vertical alignment of text within the elements' line box or the elements' line box within the parent element.
The constant values "top" and "bottom" set the alignment of text within the elements line box to either the top or bottom of that box.
The constant values "baseline", "middle", "sub", "super", "text-bottom", and "text-top" set the vertical alignment of the elements line box relative to the surrounding text. A value of "baseline" sets the baseline of the line box even with that of the parent element. A value of "middle" aligns the vertical midpoint of the element with half the height of the parent elements' font. Values of "sub" and "super" shift the element into position for subscript and superscript but do not affect the font-size. A value of "text-bottom" aligns the bottom of the element with the bottom of the font line of the parent elements' text. A value of "text-top" aligns the top of the element with the top of the font line of the parents' text. A percentage value shifts the position of the element above or below the baseline by the specified percentage of the line height.
css syntax
vertical-align: alignType | length | percentage
example
vertical-align: super; font-size: .7em
word-spacing
Sets the spacing between words. A positive value gives more spacing between words and a negative value gives less.
css syntax
letter-spacing: length | normal
