
- 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
Text Indentation Working with CSS
The CSS text-indent property helps us set the indentation of first line of an element.
Syntax
The syntax of CSS text-indent property is as follows −
Selector { text-indent: /*value*/ }
Example
The following examples illustrate CSS text-indent property.
<!DOCTYPE html> <html> <head> <style> div { display: flex; float: left; margin: auto; padding: 10px; } article { text-indent: 25%; background-color: darkseagreen; padding: 15px; font-size: 1.3em; } h3 { text-indent: -0.8em; } </style> </head> <body> <div> <h3>Doing it our way. Nothing gonna turn us back now.</h3> <article> This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. </article> </div> </body> </html>
Output
This gives the following output −
Example
<!DOCTYPE html> <html> <head> <style> ul { list-style: none; display: flex; float: left; text-indent: 23px; background-image: url("https://www.tutorialspoint.com/angular4/images/angular-4.jpg"); font-size: 1.5em; } li { border: thin solid; } </style> </head> <body> <ul> <li>This is demo text. This is demo text.</li> <li>Angular 4 is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript. </li> <li>Angular provides built-in features for animation, http service, and materials which in turn has features such as auto-complete, navigation, toolbar, menus, etc</li> <li>This is demo text. This is demo text.</li> </ul> </body> </html>
Output
This gives the following output −
- Related Articles
- Text Indentation using CSS
- Text Transformation Working with CSS
- Setting Text Color Working with CSS
- Set Text Alignment Working with CSS
- Working with Inline CSS
- Working with CSS Units
- How to set the indentation of the first line of text with JavaScript?
- Working with element for CSS
- Working with CSS Overflow Property
- Working with CSS Pseudo Classes
- Display Inline Working with CSS
- Word Spacing Working with CSS
- Styling Links Working with CSS
- Styling Tables Working with CSS
- Working with CSS Display Property

Advertisements