About CSS Styles 2

CSS text

CSS Text properties Define the appearance of text.

With text properties, you can change the color of the text, the spacing of characters, the alignment text, the decoration, the indentation of the text, and so on.

Indent text

Indents the first line of a paragraph on a Web page, which is the most commonly used text formatting effect.

CSS provides the Text-indent property, which makes it easy to indent text.

By using the Text-indent property, the first line of all elements can be indented to a given length, even the length can be negative.

The most common use of this property is to indent the first line of a paragraph, and the following rule indents the first line of all paragraphs by 5 em:

p {text-indent:5em;}

Note: In general, you can apply text-indent to all block-level elements, but you cannot apply the attribute to inline elements, and you cannot apply the Text-indent property on substitution elements such as images. However, if there is an image in the first row of a block-level element (such as a paragraph), it moves with the rest of the text on the line.

Tip: If you want to "indent" the first line of an element in a row, you can create this effect with the left padding or margin.

Use negative values

Text-indent can also be set to a negative value. With this technique, many interesting effects can be achieved, such as "hanging Indent", where the first line hangs on the left side of the remaining part of the element:

P {text-indent: -5em;}

Be careful when setting negative values for text-indent, however, if you set a negative value on a paragraph, some text in the first line may go beyond the left edge of the browser window. To avoid this display problem, we recommend that you set a margin or some padding for negative indents:

P {text-indent: -5em; padding-left:5em;}

Use Percent value

Text-indent can use all length units, including percent values.

The percentage is relative to the width of the parent element of the indent element. In other words, if you set the indent value to 20%, the first row of the affected element is indented 20% of its parent element's width.

In the following example, the indent value is 20% of the parent element, which is 100 pixels:

div {width:500px;} p {text-indent:20%;} <div><p>this is a paragragh</p></div>

Inherited

Text-indent attributes can be inherited, consider the following markup:

Div#outer {width:500px;} Div#inner {text-indent:10%;} p {width:200px;} <div id= "outer" ><div id= "inner" >some text. Some text. Some text.<p>this is a paragragh.</p></div></div>

The paragraph in the above tag is also indented 50 pixels, because this paragraph inherits the indent value of the DIV element with ID inner.

Horizontal alignment

Text-align is a basic property that affects the alignment of lines of text in an element with each other. Its first 3 values are fairly straightforward, but the 4th and 5th are slightly more complex.

The values left, right, and center cause the text in the element to align, align, and center separately.

Western languages are all read from left to right, and the default value for all Text-align is ieft. The text is aligned on the left, and the right border is jagged (called left-to-right text). For languages such as Hebrew and Arabic, text-align defaults to right, because these languages are read from the left. As expected, center causes each line of text to be centered within the element.

Tip: Center A block-level element or table element by setting the left and right margins appropriately on these elements.

Text-align:center and <CENTER>

You might think that Text-align:center is the same as the <CENTER> element, but it's actually very different.

<CENTER> not only affects text, it also centers the entire element. Text-align does not control the alignment of elements, but only internal content. The element itself does not move from one segment to the other, except that the text in it is affected.

Justify

The last horizontal alignment property is justify.

In justified text, the left and right ends of the line of text are placed on the inner bounds of the parent element. Then, adjust the spacing between the words and the letters so that the lengths of the lines are exactly equal. You may have noticed that justified justification is common in the printing world.

Note that it is up to the user agent (not CSS) to determine how the justified justification stretches to fill the space between the left and right boundaries of the parent element. For more information, see the CSS text-align Property Reference page.

Word interval

The Word-spacing property can change the standard interval between words (words). Its default value, Normal, is the same as setting a value of 0.

The Word-spacing property accepts either a positive length value or a negative length value. If you provide a positive length value, the interval between words increases. Setting a negative value for word-spacing will bring it closer:

P.spread {word-spacing:30px;} p.tight {word-spacing: -0.5em;} <p class= "Spread" >this is a paragraph. The spaces between words would be increased.</p><p class= "Tight" >this is a paragraph. The spaces between words'll be decreased.</p>

About CSS Styles 2