
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
Formatting Text in CSS
CSS allows us to format text to create visually appealing content. The following properties are used to style text using CSS.
color
This property helps us change the text color.
letter-spacing
This property is used to set the spacing between characters.
line-height
The height of a line is specified using this property.
text-align
The horizontal alignment of the text is controlled by text-align property.
text-decoration
To underline, strikethrough or overline and style it, text-decoration is used.
text-indent
The indentation of the first line of an element is set by the text-ident property.
text-shadow
To display a shadow around text, the text-shadow property is used.
text-transform
The case of text can be set with the text-transform property.
word-spacing
The space between words can be set with this property.
Syntax
The syntax of font-variant property is as follows −
Selector { font-variant: /*value*/ }
Example
The following examples illustrate text formatting in CSS.
<!DOCTYPE html> <html> <head> <style> h2::before { content: "DEMO "; text-align: center; text-decoration: line-through; color: orange; } article { width: 600px; text-align: justify; text-shadow: -10px -5px lightgreen; } </style> </head> <body> <h2>Example Heading</h2> <article>This is demo text. Here, we are displaying different ways to format text.</article> </body> </html>
Output
This gives the following output −
Example
<!DOCTYPE html> <html> <head> <style> div { margin: 10px; display: flex; float: left; word-spacing: 30px; box-shadow: inset 0 0 6px violet; } div::after { content: " "; border: 8px solid green; } div + div{ background-color: indianred; width: 200px; color: white; text-align: justify; } </style> </head> <body> <div>SAS stands for Statistical Analysis Software. It was created in the year 1960 by the SAS Institute.</div> <div>SAS is a leader in business analytics. Through innovative analytics it caters to business intelligence and data management software and services.</div> </body> </html>
Output
This gives the following output−
- Related Articles
- Formatting Text Using CSS
- Control the flow and formatting of text with CSS
- HTML Text Formatting
- Understanding CSS Visual Formatting
- CSS Visual Formatting Model
- Formatting Unordered and Ordered Lists in CSS
- Formatting Unordered and Ordered Lists Using CSS
- Text Decoration in CSS
- How to represent text that must be isolated from its surrounding for bidirectional text formatting in HTML?
- CSS Text Shadow
- Decorate a text in CSS
- text-justify Property in CSS
- Formatting text to add new lines in JavaScript and form like a table?
- Indent Text with CSS text-indent Property
- CSS text-emphasis property
