- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
Updated on 08-Jan-2020 12:51:54
- Related Questions & Answers
- 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
- Working with CSS Display Property
- 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
- Underline text with CSS
- Strikethrough text with CSS
Advertisements