CSS Text and Word Formatting

In this tutorial, I am going to be showing you everything you need to know and use in formatting your text contents in HTML using CSS.

Formatting Properties

Below are the properties you can use to format your text in CSS.

TEXT ALIGN

The text-align property in CSS is used to set the horizontal alignment of the text. Its values include:

• left
• right
• center
• justify
• start
• end
• justify-all
• match-parent

TEXT ALIGN LAST

The text-align-last property in CSS is used to set the horizontal alignment of the last line of the text. It takes same values with the text-align property.

TEXT DIRECTION

The direction property in CSS is used to specify or change the direction of the text. Its values include:

• rtl - right to left.
• ltr - left to right.

VERTICAL ALIGNMENT

The vertical-alignment property in CSS is used to align text vertically in an inline, inline-block or table cell. Its values include:

• baseline
• sub
• super
• top
• text-top
• middle
• bottom
• text-bottom
• absolute and relative unit values - 50%, 20px, 5em, etc.

TEXT DECORATION

The text-decoration property in CSS is used to remove or style default line of hyperlinks and other text elements.

text-decoration-line - This property in CSS is used to set the type of line to give to the text. Its values include:

• none
• underline
• overline
• line-through
• blink

text-decoration-color - This property in CSS is used to set the type of color for the line.

text-decoration-style - This property in CSS is used to set the style for the text-decoration-line value. Its values include:

• solid
• dashed
• dotted
• double
• wavy
• ridge
• inset
• outset

text-decoration-thickness - This property in CSS is used to set the thickness of the text-decoration-line.

text-underline-position - This property in CSS is used to specify the position at which the text-decoration-line value will be seen or located. Its values include:

• auto
• under
• left
• right
• under left
• right under

text-decoration-skip - This property in CSS is used to exclude the part of the content that you don't want the text-decoration to affect. Its values include:

• none - skip nothing.
• object - skip the margin box of the element.
• space - skip all spacing.
• leading-spaces - skip only leading spaces (same as space)
• trailing-spaces - skip only trailing spaces (same as space)
• edge - such as start and end of text inserts slightly, separate underlines for adjacent element.
• box-decoration - skip text decoration over margin, border and padding areas of the box.
• inherit - inherit text-decoration-skip value from parent element.
• unset - remove any previous text-decoration-skip value.

text-decoration-skip-ink - This property in CSS is used to set how the overline and underline text decoration values are drawn around the characters. Its values include:

• none
• auto
• all

TEXT TRANSFORM

The text-transform property in CSS is used to set whether the text contents should be in capital or small letters.

TEXT INDENT

The text-indent property in CSS is used to set spacing at the beginning of the first line of text.

TEXT EMPHASIS

The text-indent property in CSS is used to apply specific emphasis mark on a block of text.

text-emphasis-style - This property in CSS is used specify the emphasis style on the text. Its values include:

• none - no emphasis
• filled - fill element with solid color (Default Value)
• dot - dotted line
• circle - circle line
• double circle - double circle line
• triangle - triangle line
• sesame - ( ~ ) line

text-emphasis-color - This property in CSS is used set the color of the text-emphasis-style.

Text Emphasis Shorthand - The text-emphasis property in CSS is used as a shorthand for other properties. It follows this order.

• text-emphasis: text-emphasis-style | text-emphasis-color

LETTER SPACING

The letter-spacing property in CSS is used to set the amount of spacing between each character in the text.

WORD SPACING

The word-spacing property in CSS is used to set the amount of spacing between each word in the sentence, phrase or block of text.

LINE HEIGHT

The line-height property in CSS is used to set the amount of spacing between each line.

WHITE SPACE

The white-space property in CSS is used to set how white spaces in a text will be handled. Its values include:

• normal - multiple white spaces will collapse into a single white space. Text will wrap when necessary. (Default Value)
• nowrap - multiple white spaces will collapse into a single white space, but text will not wrap when necessary.
• pre - white space is preserved by browser and the text will only wrap on line breaks.
• pre-line - multiple white space will collapse into a single white space and text will wrap when necessary and also on line-break.
• initial - this sets the property value to its default value.
• inherit - this sets the property value to its parent element value.

WHITE SPACE COLLAPSE

The white-space-collapse property in CSS is used to control how white spaces should collapse inside an element. Its values include:

• collapse - collapse multiple white spaces.
• preserve - preserve multiple white spaces and line breaks.
• preserve-breaks - collapse multiple white spaces and preserve line breaks.
• preserve-spaces - preserve multiple white spaces and covert line breaks to white spaces.
• break-spaces - multiple spaces and line breaks will collapse into a single space, and single spaces will remain the same.

TEXT SHADOW

The text-shadow property in CSS is used to add shadow effect to the text element.

Text Shadow Format

Text shadow property values follow this format
text-shadow: h-shadow | v-shadow | blur-radius | color/none/initial/inherit.

• h-shadow - horizontal position (x-axis) of the shadow.
• v-shadow - vertical position (y-axis) of the shadow.
• blur-radius - degree of sharpness or dullness of the radius color.
• color - color of the shadow.
• none - no color
• initial - This sets the property value to its default value.
• inherit - This sets the property value to its parent element value.

Multiple text shadows can be used for one or more elements. Its declaration is separated by a comma.

LINE BREAK

The line-break property in CSS is used specify how line breaks should be handled. Its values include:

• auto - default line break rule.
• loose - least restrictive rule.
• normal - most common line break rule.
• strict - most stringent line break line.
• anywhere - allow browsers to apply the line break rule anywhere.
• initial - this sets the property value to its default value.
• inherit - this sets the property value to its parent element value.

WORD BREAK

The word-break property in CSS is used specify how words should be broken or wrap in a block of text. Its values include:

• normal - default rule
• break-all - used between any two characters to prevent overflow.
• keep-all - do not use word break (same as normal).
• break-word - break is applied to any word.
• anywhere - same as break-word.

TEXT ORIENTATION

The text-orientation property in CSS is used specify how the text content is being displayed vertically. Its values include:

• mixed - rotates the characters 90degree clockwise direction (Default Value)
• upright - characters are turned upright but not rotated.
• sideways - characters are orientated same as the text lines are oriented with writing-mode vertical, 90 degrees clockwise direction.
• sideways-right - Takes the property value of sideways (compatibility purposes).
• use-glyph-orientation - Use in SVG elements, so that text inherits deprecated SVG properties glyph-orientation-vertical and glyph-orientation-horizontal.
• initial - sets the property value to its default value.
• inherit - sets the property value to its parent element value.

WORD WRAP

The word-wrap property in CSS is used to allow long words to be broken and wrap onto the next line. Its values include:

• normal - break words only at break points.
• break-word - break unbreakable words.
• initial - sets the property value to its default value.
• inherit - sets the property value to its parent element value.

WRITING MODE

The writing-mode property in CSS is used specify whether lines of text should be flow vertically or horizontally. Its values include:

• horizontal-tb - text should flow horizontally from right to left and vertically from top to bottom.
• vertical-rl - text should flow vertically from top to bottom and horizontally right to left.
• vertical-lr - text should flow vertically from top to bottom and horizontally left to right.

TEXT UNDERLINE OFFSET

The text-underline-offset property in CSS is used to set the amount of distance between the underline text decoration and the content.

TEXT OVERFLOW

The text-overflow property in CSS is used to specify how overflown text content are being handled. Its values include:

• clip - overflown text will not be visible.
• ellipsis - ellipsis ( ... ) is added to represent overflown text
• string - type a string to represent overflown text.
• initial - sets the property value to its default value.
• inherit - sets the property value to its parent element value.

TEXT COMBINE UPRIGHT

The text-combine-upright property in CSS is used to specify the combination of multiple typographic character units into the space of a single typographic character unit. Its values include:

• none
• all

PROPERTY	DESCRIPTION
text-align	Sets the horizontal alignment of the text.
text-align-last	Sets the horizontal alignment of the last line of the text.
direction	Sets the direction of the text
vertical-alignment	Used to align text vertically.
text-decoration	Removes/add or style default line of hyperlinks.
text-decoration-line	Sets the type of line to give to the text.
text-decoration-color	Sets the type of color for the line.
text-decoration-style	Sets the style for the text-decoration-line value.
text-decoration-thickness	Sets the thickness of the text-decoration-line.
text-underline-position	Specifies the position at which the text-decoration-line value will be located.
text-decoration-skip	Excludes the part of the content that you don't want the text-decoration to affect.
text-decoration-skip-ink	Sets how the overline and underline text decoration values are drawn around the characters.
text-transform	Set whether the text contents should be in capital or small letters.
text-indent	Sets spacing at the beginning of the first line of text.
text-emphasis	Used to apply specific emphasis mark
text-emphasis-style	Specifies the emphasis style on the text.
text-emphasis-color	Sets the color of the text-emphasis-style.
letter-spacing	Sets the amount of spacing between each character.
word-spacing	Sets the amount of spacing between each word.
line-height	Sets the amount of spacing between each line.
white-space	Sets how white spaces in a text will be handled.
white-space-collapse	Controls how white spaces should collapse.
text-shadow	Adds shadow effect to the text element.
line-break	Specifies how line breaks should be handled.
word-break	Specifies how words should be broken or wrap.
text-orientation	Specifies how the text content is being displayed vertically.
word-wrap	Allows long words to be broken and wrap onto the next line.
writing-mode	Specifies whether lines of text should be flow vertically or horizontally.
text-underline-offset	Sets the amount of distance between the underline text decoration and the content.
text-overflow	Specifies how overflown text content are being handled.
text-combine-upright	Specifies the combination of multiple typographic character units into the space of a single typographic character unit.