WDVL: Putting Style Sheets in Perspective: text-indent

Initial Value:: 0
Allowed Values:: length; percentage; inherit
Applies to:: block-level elements
Inherited?:: yes

Using the text-indent property gives you the ability to create your own distinctive style. Combined with a negative value text- indent generates a different flavor of paragraph. Be sure to set a large enough margin on your entire document or you may find your first line runs completely off the left side of the screen!

P.negindent { text-indent: -6%;}

Creating a Different Look with text-indent and Margins

Combine the text-indent and margin properties to lend character to your documents. Take a look at the example page to see how the following style sheet displays. If your browser doesn't display CSS, check out the image.

	BODY.summary {
		margin-left	: 10%;
		margin-right	: 10%;
		font-family	: Arial, Helvetica, sans-serif;
		font-size	: small; }

	H1.header {
		font-size	: larger;
		color		: #000000;
		background	: #FFFFCC;
			 }

	
	H2.subsection {
		font-size	: larger;
		margin-left	: -2em;
		color		: #000000;
		background	: #FFFFCC;
		 }
	
	p.lineindent {
		text-indent	: 2em;
		margin-top	: 15px;
		margin-bottom	: 15px;
		}
	
	P.negindent {
		text-indent	: -6%;
		}
	
	.negindent2 {
		text-indent	: -6%; 
		margin		: 75px;
		}

Of course, normal indents can be done as well simply by specifying a positive value.

Additional Resources:

W3C: 16.1 Indentation: the 'text-indent' property

Putting Style Sheets in Perspective: margin-property
Putting Style Sheets in Perspective: Marginally Speaking
Putting Style Sheets in Perspective: Summary Part 3