This lesson begins our discussions on text and font formatting. If you need filler text for sample paragraphs, visit Lorem Ipsum or Ungreek. I used Lorem Ipsum for the dummy paragraphs at the end of the lesson.
We all know what indentation is. It's the way we've seen most printed text all of our lives. This paragraph is indented, so the first word of the first line is to the right a bit.
The form for a text-indent declaration is
text-indent: value
value may be a percentage or a length
length may be expressed in px (pixels), pt (points) or em (a width proportional to the letter m)
values may be positive (indent to the right) or negative (indent to the left), but WebTV does not support negative values.
text-indent: 20%;
text-indent: 15px;
text-indent: 20pt;
text-indent: 2em;
.ind20 { text-indent: 20px; }
.indent { text-indent: 2em; }
style="text-indent: 2em;"
Text-indent can be used as a class applied to the body element, a div or a paragraph.
Text-indent class examples:
<body class="indent">
<div class="indent">
<p class="indent">
This dummy paragraph uses style="text-indent: 2em;". Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rhoncus nisl ut nunc. Curabitur et nisl. Fusce aliquam. Proin viverra porta leo. Suspendisse aliquet, odio in interdum accumsan, nisl turpis hendrerit nunc, ut consequat nulla elit vel diam. Vivamus risus.
This dummy paragraph uses style="text-indent: -1em;". Webtv does not support negative values. PC Users will see the first line starting in the margin. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rhoncus nisl ut nunc. Curabitur et nisl. Fusce aliquam. Proin viverra porta leo. Suspendisse aliquet, odio in interdum accumsan, nisl turpis hendrerit nunc, ut consequat nulla elit vel diam. Vivamus risus.
PC Screenshot (black page)
PC Screenshot (white page)
Make a sample page using text-indent. Post your page.
Happy coding!
Gnubee
