Guide to Format Text in CSS

When designing a website, formatting text is an important aspect of creating an appealing and readable interface.

CSS provides several properties that allow you to customize various elements of text, including font color, size, family, alignment, spacing, and more.

Below is a detailed guide on each text formatting property, along with examples for each property.


Font Color

Parameter: A color value, which can be a color name (e.g., red), hex code (e.g., "#FF0000"), RGB value (e.g., "rgb(255, 0, 0)"), or RGBA value (e.g., "rgba(255, 0, 0, 0.5)").

p {
  color: blue;


Font Size

Parameter: A size value, which can be in pixels (e.g., "16px"), em units (e.g., "1em"), rem units (e.g., "1.2rem"), viewport width units (e.g., "10vw"), viewport height units (e.g., "5vh"), or other units.

h1 {
  font-size: 24px;


Font Family

Parameter: A font family list, specified in the preferred order. You can specify the font name (e.g., Arial) or enclose font names containing special characters in double quotes (e.g., "Times New Roman).

body {
  font-family: Arial, sans-serif;


Font Weight and Style

Parameter font-weight: normal (default), bold, bolder, lighter, or numeric values from 100 to 900.

Parameter font-style: normal (default), italic.

em {
  font-style: italic;

strong {
  font-weight: bold;


Text Decoration

Parameter: "none" (default), "underline", "overline", "line-through" or a combination of values separated by spaces.

a {
  text-decoration: underline;

del {
  text-decoration: line-through;


Text Alignment

Parameter: "left" (default), "right", "center" or "justify".

p {
  text-align: center;


Line Height and Margins

Parameter line-height: A numeric value or a percentage of the current font size.

Parameter margin: A measurement value, such as pixels (px), em units (em), rem units (rem), etc.

p {
  line-height: 1.5;
  margin-bottom: 10px;


Multicolumn Text Layout

Parameter: A positive integer or "auto" (default).

.container {
  column-count: 2;


Text Color Change on Hover

No specific parameter, only use the pseudo-class :hover.

a:hover {
  color: red;


Text Color Change on State (active, visited)

No specific parameter, only use the pseudo-classes :active and :visited.

a:visited {
  color: purple;


We hope that the above explanations and examples have helped you understand how to use and customize text formatting properties in CSS to create a visually appealing and engaging text interface on your website.