To indent the first line of a paragraph, you create a class that uses text-indent. The value for text-indent can be either an absolute distance on the screen (measured in pixels) or a percent.

In general, I prefer to use percentages. People have different size monitors, and if you get into the habit of using absolute distance all of the time, the results can look silly on a monitor that is much smaller or much larger than the one that you use.

Also, if you decide to use a class within a restricted block, such as a table cell or box, the percentage will always work. In those cases, the absolute figure could push you outside of the block.

Here is the CSS code to create a paragraph with the first line indented by 5% of the width of the block:

I would invoke this class on an HTML page by using <div class = "indented">. Alternatively, you could say <p class = "indented">.

Sometimes, you want to indent an entire block of text, not just the first line. One way to do this using CSS is with the margin control.

This class will narrow a paragraph both on the left and on the right, which is good for setting off quotations. It can be invoked in the same way as the "indented" class that we created earlier.

We already have learned that in HTML the list-item tag, <li>, will create a left-indent for a block of text, until it is closed by a </li> tag.

If we embed list-item tags inside an unordered list block, <ul></ul>, then we get bullets. If we embed list-item tags inside an ordered list block, <ol></ol>, then we get numbers.

With the list-style-type control, we can over-ride the standard bullets and numbers. Here is some sample CSS and HTML code to produce list items without bullets or numbers: