Español

 

English

Tutorial of the properties of text in CSS.	HTML Document.
Tutorial CSS properties: TEXT, TEXT-ALIGN, TEXT-DECORATION, TEXT-INDENT, LETTER-SPACING, WORD-SPACING y TEXT-TRANSFORM.
Autor: Wmasterfacil	www.wmasterfacil.com

NOTE: Many of the definitions are derived wholly or simplified on the recommendation of the W3C Cascading Style Sheets, Level 2 Revision 1 (CSS2.1), which are in Section HTML / CSS, this site, whose original is http://www.w3.org/TR/1998/REC-CSS2-19980512/.

In this small tutorial I will explain the rules to apply CSS to the texts. There are few, and I will concentrate on the most used, but I did not want to skip them.

TEXT-INDENT < valor > This property allows us to specify the indentation of the first line of text in a block (the space that exists to the left of the first line, regarding the others). The values that can take are:   < measure > In this way, it specifies a set amount, either in pt, px, em ...   < percentage > So the space will depend on the size of the block containing it, ie if we apply a rate of 20%, that means the first line will move to the left 20% regarding its block container.

This property is very well understood in the following example.

Take a html file with the following structure:

In this case, if we execute the code EXAMPLE , We will see two paragraphs in white and two yellow. So far everything seems normal. But if we put the browser in windowed mode, and reducing it and expand the right side with the mouse, dragging the left button pressed, you can clearly verify that the indentation of white paragraphs is always the same (fixed measure) and the yellow paragraphs varies. This is because each time you vary the size of the browser, the text-indent property recalculates the percentage of indentation regarding the new size of the object that contains the paragraphs.

NOTE: This property is inherited from parents to children, and so if you do not want this indentation to appear in blocks children, you must place a TEXT-INDENT: 0px; in the blocks children.

---

^ Top

TEXT-ALIGN < valor > With this property we aligned the text with respect to the block that contains it. The values that can take are the following:   left, right, center, justify I believe that it is very clear. In case there are doubts with justify,what it does is to justify the text on both sides of the block that contains it, inserting between the words of each line the spaces that are necessary to it.

The best explanation is the following example. We put a file HTML with the following structure:

In this case, if we execute the code EXAMPLE , we will see clearly the effect of each value. The first block is aligned to the left, because it is the default mode. It is also interesting to test in windowed mode with the width of your browser to see how it the text will adjust.

NOTE: This property is inherited from father to son.

---

^ Top

TEXT-DECORATION < valor > This property describe the decoration of the text. This decoration will be always in the same color of the text, specified with the property 'color'. Images and blank space will not be decorated. The values that can take are the following:   none Without decoration.   underline Underline the lines of text.   overline Each line of text is covered with a top line.   line-through Strikeout.   blink The text flashes.

The following example illustrates its use. Take a html file with the following structure:

In this case, if we execute the code EXAMPLE, we will see the behavior of the different values of this property. Blinking IExplorer does not work (at least until 7). In Mozilla and Opera it does works. Note that I have inserted some blanks in the middle and end of each paragraph so it looks like the decorations include these blank spaces. Note also that the color of the lines is identical to the respective texts.

---

^ Top

LETTER-SPACING < value > y WORD-SPACING < value > Letter-spacing specifies the spacing between characters, and word-spacing specifies the spacing between words. The values that can take are the following:   normal Normal spacing.   < measure > Indicates the default space that exists between words or characters (depending on one or other property), plus what we indicate. Ie the value that we give him added to that comes by default in normal mode. Here I will use negative values to decrease the distance between characters or words, and positive values to increase.

The following example illustrates its use. Take a html file with the following structure:

See the result of EXAMPLE. The paragraph is a white background is in normal mode, so that the differences are seen.

---

^ Top

TEXT-TRANSFORM < value > This property controls the transformation between uppercase and lowercase. It is called Capitalization of characters. The values that can take are the following:   none Shows the normal appearance, ie, exactly as written.   capitalize Represents the first character of each word capitalized.   uppercase Represents all uppercase characters.   lowercase Otherwise. Represents all lowercase.

Take a html file with the following structure:

The implementation of the EXAMPLE shows its operation very clearly.

With this I end this simple tutorial. If you have doubts, write them in the link below.

---

^ Top

Policies