CSS Text Formatting

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Text Formatting

CSS Text Formatting is a powerful tool used to customize the appearance of text on a website. It is used to set the font size, font family, font color, line height, letter spacing, text alignment, and other text-related properties. It can also be used to format text boxes, lists, tables, and other elements.

Text Color

The color property is used to change the color of the text.

p {
   color: blue;   
}

Background Color

The background color property is used to change the background color of the text.

p{
   background-color: #797876;  
}

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

This property can take the following values:

text-align: start | end | left | right | center | justify | match-parent

h1{
   text-align: center;  
} 

Text Direction

The direction property is used to set the direction of the text.

This property takes two values:

rtl: set the direction for languages ​​written from right to left.

ltr: set the direction for languages ​​written from left to right.

h1{
   direction: rtl;  
}

Vertical Alignment

The vertical-align property is used for the vertical alignment of an element.

this property can take following values:  vertical-align: baseline |length |sub |super |top |text-top |middle|bottom |text-bottom |initial |inherit;

h1{
   vertical-align: text-top;  
} 

Text Decoration

The text-decoration property is used to set or remove decorations from the text.

a {
  text-decoration: none;  
}

Text Transformation

The text-transform CSS property specifies how to capitalize an element’s text.

This property can take the following values:

none | capitalize | uppercase | lowercase | full-width | full-size-kana

h1{
   text-transform: lowercase ;  
}

Text Indentation

The text-indent CSS property sets the length of empty space (indentation) that is put before the first lines of text in a block.

p{
   text-indent: 20px;  
}

Letter Spacing

The letter-spacing CSS property sets the horizontal spacing behavior between text characters.

p{
   letter-spacing: 5em;  
} 

Line Height

The line-height property is used to set the height between lines.

p{
   line-height: 2.5;  
} 

Word Spacing

The word-spacing CSS property sets the length of space between words and between tags.

h1{
   word-spacing: 5px;  
}

White Space

The white-space CSS property sets how white space inside an element is handled.

This property can take the following values:

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

p{
   white-space: nowrap;  
} 

Word Wrapping

The word-wrap property allows long words to be able to be broken and wrap onto the next line. This property can take the following values:

word-wrap: normal|break-word|initial|inherit;

div, p {
   word-wrap: break-word;  
}

Word Breaking

The word-break property specifies how the words at the end of the line are broken.

This property can take the following values:

normal | break-all | keep-all | break-word

div,p{
   word-break: break-all;   
}

Writing Mode

The CSS property determines whether the text is horizontal or vertical, as well as the direction of the blocks. This property can take the following values :

horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

li{
   writing-mode: vertical-lr;  
}