css text formatting


In addition to the properties that affect the font, there are several properties to affect the appearance or formatting of your text


Property Description
color Specifies the color of the text
text - align Specifies the horizontal alignment of the text within its containing element
vertical - align Specifies the vertical alignment of text within containing element
text - decoration Specifies whether the text should be underlined, overlined, strikethrough, or blinking text
text - indent Specifies an indent from the left border for the text
text - transform Specifies that the content of the element should all be uppercase, lowercase, or capitalized
text - shadow Specifies that the text should have a drop shadow
letter - spacing Controls the width between letters (known to print designers as tracking)
word - spacing Controls the amount of space between each word
white - space Specifies whether the white space should be collapsed, preserved, or prevented from wrapping
direction Specifies the direction of text (similar to the dir attribute)

color Property


The color property allows you to specify the color of the text. The value of this property can either be a hex code for a color or a color name.


p {color:#ff0000;}


text - align Property


The text - alig n property works like the deprecated align attribute would with text. It aligns the text within its containing element or the browser window. The table that follows displays possible values.


Property Description
left Aligns the text with the left border of the containing element
right Aligns the text with the right border of the containing element
center Centers the content in the middle of the containing element
justify Spreads the width across the whole width of the containing element

		  	.leftAlign {text-align:left;}
			.rightAlign {text-align:right;}
			.center {text-align:center;}
			.justify {text-align:justify;}
		  


vertical - align Property


The vertical - align property is useful when working with inline elements, in particular images and portions of text. It allows you to control their vertical positioning within the containing element, for example:


span.footnote {vertical-align:sub;}


Value Description
baseline Everything should be aligned on the baseline of the parent element (this is the default setting).
sub Makes the element subscript. With images, the top of the image should be on the baseline. With text, the top of the font body should be on the baseline.
super Makes the element superscript. With images, the bottom of the image should be level with the top of the font. With text, the bottom of the descender (the parts of letters such as g and p that go beneath the line of text) should align with the top of the font body.
top The top of the text and the top of the image should align with the top of the tallest element on the line.
text - top The top of the text and the top of the image should align with the top of the tallest text on the line.
middle The vertical midpoint of the element should be aligned with the vertical midpoint of the parent.
bottom The bottom of the text and the bottom of the image should align with the bottom of the lowest element on the line.
text - bottom The bottom of the text and the bottom of the image should align with the bottom of the lowest text on the line.

This property may also accept a length and a percentage value.


text - decoration Property


The text - decoration property allows you to specify the values shown in the following table.


Value Description
underline Adds a line under the content.
overline Adds a line over the top of the content.
line - through Adds a line through the middle of the content, such as strikethrough text. In general, this should be used only to indicate text that is marked for deletion.
blink Creates blinking text (which is generally frowned upon and considered annoying).

		  	p.underline {text-decoration:underline;}
			p.overline {text-decoration:overline;}
			p.line-through {text-decoration:line-through;}
			p.blink {text-decoration:blink;}
		  


text - indent Property


The text - indent property allows you to indent the first line of text within an element. In the following example it has been applied to the second paragraph:


	      	<p> This paragraph should be aligned with the left-hand side of the browser. </p>
			<p class="indent"> Just the first line of this paragraph should be indented by
			3 em, this should not apply to any subsequent lines in the same paragraph. </p>	
	      

.indent {text-indent:3em;}


text - shadow Property


The text - shadow property is supposed to create a drop shadow , which is a dark version of the word just behind it and slightly offset. This has often been used in print media, and its popularity has meant that is has gained its own CSS property. The value for this property is quite complicated because it can take a color followed by three lengths:


.dropShadow {text-shadow: #999999 10px 10px 3px;}


After the color has been specified, the first two lengths specify how far from the original text the drop shadow should fall (using X and Y coordinates), while the third specifies how blurred the drop shadow should be.


text - transform Property


The text - transform property allows you to specify the case for the content of an element. The possible values are shown in the table that follows.


Value Description
none No change should take place.
capitalize The first letter of every word should be capitalized.
uppercase The entire content of the element should be uppercase.
lowercase The entire content of the element should be lowercase.

		  	<p class="none"> This text has not been transformed </p>
			<p class="capitalize"> The first letter of each word will be capiltalized </p>
			<p class="uppercase"> All of this text will be uppercase </p>
			<p class="lowercase"> ALL OF THIS TEXT WILL BE LOWERCASE </p>

			------ css style -----
			p.none {text-transform:none;}
			p.capitalize {text-transform:capitalize;}
			p.uppercase {text-transform:uppercase;}
			p.lowercase {text-transform:lowercase;}
		  


letter - spacing Property


The letter - spacing property controls something that print designers refer to as tracking : the gap between letters. Loose tracking indicates that there is a lot of space between letters, whereas tight tracking refers to letters being squeezed together. No tracking refers to the normal gap between letters for that font.


If you want to increase or decrease the spacing between letters, you are most likely to specify this in pixels or something known as an em


If you have a section of text where letter spacing has been altered, then you can specify that an element should have no tracking using the keyword normal .


	      	.two {letter-spacing:3px;}
			.three {letter-spacing:0.5em;}
			.four {letter-spacing:-1px;}
	      

word - spacing Property


The word - spacing property sets the gap between words, and its value should be a unit of length. In the example that follows , in the first paragraph there is a standard gap between each of the words. In the second paragraph the gap is 10 pixels between each of the words. In the final paragraph the gap has been cut to 1 pixel less than normal spacing:


	      	.two {word-spacing:20px;}
			.three {word-spacing:-1px;}
	      

white - space Property


The white - space property controls whether or not white space is preserved, offering the same results as the XHTML < pre > element where white space is preserved and the nowrap attribute where text is only broken onto a new line if explicitly told to.


Value Description
normal Normal white space collapsing rules are followed.
pre White space is preserved just as in the < pre > element of XHTML, but the formatting is whatever is indicated for that element (it is not a monospaced font by default like the < pre > element).
nowrap Text is broken onto a new line only if explicitly told to with a < br> element; otherwise text does not wrap.

		   	.pre {white-space:pre;}
			.nowrap {white-space:nowrap;}
		   


direction Property


The direction property is rather like the dir attribute and specifies the direction in which the text should flow. The following table shows the possible values.


Value Description
ltr The text flows from left to right.
rtl The text flows from right to left.
inherit The text flows in the same direction as its parent element.

		   	p.ltr {direction:ltr;}
			p.rtl {direction:rtl;}