The texts cover a large portion of Web pages. Styling the text may improve the appearance of web pages and can draw attention to certain elements of the text.
letter-spacing
The letter-spacing property controls the spacing of each character in a word.
- Values:
- normal , 0 - No adjustment is made.
- length_value - A fixed dimension (em, px) used as an adjustment to the default amount of space between letters.
- Syntax:
selector { letter-spacing: value; }
Example:
<style>
#idp { letter-spacing: 4px; }
</style>
<h4>Example letter-spacing</h4>
<p id='idp'>Web site: CoursesWeb.net</p>
word-spacing
The
word-spacing property increase or decrease the space between words.
- Values:
- normal , 0 - No adjustment is made.
- length_value - A fixed dimension (em, px) used as an adjustment to the default amount of space between words.
- Syntax:
selector { word-spacing: value; }
Example:
<style>
#idp { word-spacing: 0.5em; }
</style>
<h4>Example word-spacing</h4>
<p id='idp'>Free courses and tutorials.</p>
line-height
The
line-height property sets the distance between lines.
- Values:
- normal - The default value specified by the browser.
- a_number - A numeric multiplier applied to the font size to calculate the line-height.
- length - A specific length value (px, em).
- percentage - A percentage of the element's font-size.
- Syntax:
selector { line-height: value; }
Example:
<style>
#idp { line-height: 185%; }
</style>
<h4>Example line-height</h4>
<p id='idp'>First line text<br>
A second line ...<br>
Another line in the paragraph.</p>
text-transform
The
text-transform controls the capitalization of text.
- Values:
- capitalize - The first character of each word is forced to be uppercase.
- uppercase - All characters are forced to be uppercase.
- lowercase - All characters are forced to be lowercase.
- none - No adjustment is made (default).
- Syntax:
selector { text-transform: value; }
Example:
<style>
#idp { text-transform: capitalize; }
</style>
<h4>Example text-transform</h4>
<p id='idp'>free CSS course and lessons.</p>
text-align
The
text-align defines the horizontal alignment of text inside a containing block.
- Values:
- left - The text is left aligned (default).
- right - The text is right aligned.
- center - The lines of text are centered.
- justify - The lines of text are flush with both sides of the box, adjusting the spacing in between words as needed.
- Syntax:
selector { text-align: value; }
Example:
<style>
#idp1 { text-align: right; }
#idp2 { text-align: center; }
</style>
<h4>Example text-align</h4>
<p id='idp1'>Text with right align.</p>
<p id='idp2'>Paragraph with center align.</p>
vertical-align
The
vertical-align sets the alignment of text (or other inline content) in relation to the line box controlled via
line-height.
Because this property controls the positioning of an inline element in relation to a line box and not a block element, it is not suitable for aligning block elements in a layout grid.
- Values:
- baseline - Aligns the baseline of the box with the parent element's baseline (default)
- sub - Aligns the element as it was subscript
- super - Creates a superscript by raising the baseline of the box
- top - The top of the element is aligned with the top of the tallest element on the line
- text-top - The top of the element is aligned with the top of the parent element's font
- middle - The element is placed in the middle of the parent element
- bottom - The bottom of the element is aligned with the lowest element on the line
- text-bottom - The bottom of the element is aligned with the bottom of the parent element's font
- a_length - Raises or lower an element by the specified length.
- percentage - Raises or lower an element in a percent of the 'line-height' property.
- Syntax:
selector { vertical-align: value; }
Example:
<style>
.sp1 { vertical-align: sub; }
.sp2 { vertical-align: super; }
</style>
<h4>Example vertical-align</h4>
<p>Some text: <span class='sp1'>sub span</span> and a <span class='sp2'>super span</span> sub-string.</p>
text-indent
The
text-indent defines an indentation for the first line of text in a block.
- Values:
- length - A fixed measurement for the indentation (px, em).
- percentage - A percentage length (%) relative to the width property of the containing block.
- Syntax:
selector { text-indent: value; }
Example:
<style>
p { text-indent: 20px; }
</style>
<h4>Example text-indent</h4>
<p>The first line of the paragraph, with indentation,<br>
The second line ...</p>
text-decoration
Via the
text-decoration property you can set underlines, strikethrough, or other text decorations (even blink).
- Values:
- underline - Each line of text is underlined.
- overline - Each line of text has a line drawn above it.
- line-through - Each line of text has a line drawn through it.
- blink - The text blinks.
- Syntax:
selector { text-decoration: value; }
Example:
<style>
.sp1 { text-decoration: underline; }
.sp2 { text-decoration: overline; }
.sp3 { text-decoration: line-through; }
</style>
<h4>Example text-decoration</h4>
<p>Some text: <span class='sp1'>underline span</span>, a <span class='sp2'>overline text</span> and a <span class='sp3'>line-through</span> sub-string.</p>
white-space
The
white-space sets how white space inside an element is handled.
- Values:
- normal - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary (default).
- pre - Text is considered to be preformatted in the source markup document and whitespace, including newline characters, remains intact (similar with <pre> tag).
- nowrap - Whitespace is collapsed as normal, and all text is forced to the same line (The text continues on the same line until a <br /> tag is encountered).
- 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.
- Syntax:
selector { white-space: value; }
Example:
<style>
p { white-space: pre; }
</style>
<h4>Example white-space</h4>
<p>The first line of the paragraph with more spaces between words.
The second line, without BR tag.</p>
word-wrap
With
word-wrap you can allow browsers to break lines in the middle of words to prevent long strings of characters from overflowing a box.
- Values:
- break-word - Allows a browser to place a break within a word to prevent a long word with no whitespace characters from overflowing the box; words are broken by character, not syllables, and are not hyphenated.
- normal - Single words cannot be broken (default).
- Syntax:
selector { word-wrap: value; }
Example:
<style>
p {
width: 88px;
word-wrap: break-word;
}
</style>
<h4>Example word-wrap</h4>
<p>Short paragraph with looooooooonnnnnnggggg wwwoooooorrrrrddddddsssss.</p>
text-shadow
The
text-shadow property introduced in CSS3 allows for one or more shadow effects to be applied to the text of an element. This shadow is drawn around the letters themselves (not supported in Internet Explorer).
- Values:
- h-shadow - The position of the horizontal shadow
- v-shadow - The position of the vertical shadow
- blur - The blur distance
- color - The color of the shadow
- Syntax:
selector { text-shadow: h-shadow v-shadow blur color; }
Example:
<style>
h3 { text-shadow: 3px 5px 2px green; }
</style>
<h4>Example text-shadow</h4>
<h3>Web site: marplo.net</h3>
