Text Indent

Exercise

In the "index.html" file, replace the code with the following:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
  <h1>Text Indent</h1>
  <p>Indenting paragraphs is a common practice in writing to 
     improve readability and make the text more visually 
     appealing. It helps to distinguish the beginning of a new 
     paragraph and creates a natural separation between them. 
     Indenting also creates a visual cue that the reader is 
     moving on to a new thought or idea. Additionally, it can 
     help to organize the content and improve the overall 
     structure of the text. Indenting is particularly 
     important in longer pieces of writing, such as essays or 
     articles, as it can help the reader to follow the flow of 
     the text and understand the structure of the argument.</p>
</body>

</html>

Save.
If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
In the "styles.css" file, replace the code with the following:

body {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

h1 {
  font-family: 'Courier New', Courier, monospace;
}

p {
  text-indent: 50px;
}

Save.
In the browser, you should see the following:

Code Walkthrough and Explanation

`text-indent`

text-indent is a CSS property used to control the indentation of the first line of a block-level element. It specifies the distance between the left margin of the element and the beginning of the first line of text within that element. A positive value indents the text to the right, while a negative value moves the text to the left of the left margin. This property can be useful for creating hanging indents, where the first line is not indented but subsequent lines are, or for creating paragraphs with a flush left margin and an indented first line. The text-indent property can be applied to block-level elements such as paragraphs, list items, and headings.

Experiment with the Code

Try changing the text-indent value to a higher px value.
Try changing the text-indent value to a lower px value.

Video and Code References

Questions? Subscribe and ask in the video comments:

GitHub and Other References