CSS Texts Formatting


HTML texts can be formatted in many ways using number of CSS properties which are listed below. All of these CSS properties are used in text formatting to create visually pleasing appearance.

Property Description
color Sets the color of text
direction Specifies the text writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a paragraph
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
text-overflow Specifies what to do with overflowed text content
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text

Text Color

The color property is used to set the color of the text. The color is specified by either the color name or its HEX, HSL or RGB value.

h1{
  color: red;
}

Text Alignment

The text-align property is used to set the horizontal alignment of a text. A text can be aligned to the left, right or center of the element width as well as justified i.e. stretched to equal width.

p {
  text-align: justify;
}

Text Decoration

The text-decoration property is used to set decorations on texts. The acceptable values for CSS text-decoration property are overline, underline, line-through and none. The value none is often used to remove underlines from HTML link texts which is added by browsers by default.

a {
  text-decoration: none;
}

Text Transformation

The text-transform property is used to specify the capitalization of the texts and make convert them to all uppercase or lowercase letters or capitalize the first letter of each word.

p{
  text-transform: uppercase;
}

Text Indentation

The text-indent property is used to specify the indentation of the first line of a paragraph. The value can be in any form of length or percetage of the width of the element itself.

p {
  text-indent: 50px;
}

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text. The default letter spacing value is 0 pixel which can be increased or decreased using letter-spacing property and accepts negative value too. The value can be any form of length values.

h1 {
  letter-spacing: 3px;
}

Line Height

The line-height property is used to specify the space between lines in a paragraph. The value can be in any form of length values as well as percentage.

p{
  line-height: 1.6em;
}

Text Direction

The direction property is used to change the text direction of an element. The default value is ltr that makes the texts printed from the normal left to right direction while value rtl makes it the opposite.

p {
  direction: rtl;
}

Word Spacing

The word-spacing property is used to specify the space between the words in a text. The value can be any form of length values.

h1 {
  word-spacing: 10px;
}

Text Shadow

The text-shadow property adds shadow to text. The shadow accepts four values where the first value defines the position of the horizontal shadow, second defines the position of the vertical shadow, third value defines the blurness of the shadow and the final calue defines the color of the shadow. You can skip the third value if you do not want the blur effect.

h1 {
  text-shadow: 3px 2px 5px red;
}

White-space

The CSS property white-space is used to specify the way text blocks should be displayed in the browser. The default value is normal which collapse all contiguous white spaces into one while displaying in the browser while the text is broken into multiple lines wherever needed. The values accepted by white-space are as follows.

Value Description
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. (Default)
nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line until a <br> tag is added to the text.
pre Identical to <pre> tag in HTML where whitespace is preserved by the browser. Text will only wrap on line breaks.
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
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
p{
  width: 300px;
  height: 20px;
  white-space: nowrap; 
  overflow: hidden;
}

Text-overflow

CSS text-overflow is used along with CSS overflow property to hide the overflowing text or replace them with ellipsis using the ellipsis value. You can also replace overflowing text with some string but that works on firefox only. White-space property with value no-wrap can also be used together to prevent overflowing content to prevent getting them rearranged and appear in the next line.

p{
  width: 300px;
  height: 20px;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

Vertical-align

CSS property vertical-align can be used to set vertical alignment on an HTML element. It is highly useful when adding and aligning small images or some inline-contents within the text blocks. The values accepted by CSS property vertical-align are as follows.

Value Description
baseline The element is aligned with the baseline of the parent. (Default)
length Raises or lower an element by the specified length. Negative values are allowed.
% Raises or lower an element in a percent of the line-height property. Negative values are allowed
sub The element is aligned with the subscript baseline of the parent
super The element is aligned with the superscript baseline of the parent
top The element is aligned with the top of the tallest element on the line
text-top 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 element is aligned with the lowest element on the line
text-bottom The element is aligned with the bottom of the parent element's font
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
img{
  vertical-align: middle;
}