CSS Tutorial 5: CSS Text

CSS Tutorial 5: CSS Text

Formatting and including variety to textual content is a key issue for any net designer. In this lesson you are going to be offered to the strong opportunities CSS gives you to add design to text. The next residences can be described: CSS Text

  • text-indent
  • text-align
  • text-decoration
  • letter-spacing
  • text-transform

Text indention [text-indent]

The property textual content-indent enables you so as to add an stylish touch to text paragraphs by making use of an indent to the primary line of the paragraph. Within the illustration under a 30px is applied to all text paragraphs marked with <p>:

	p {
		text-indent: 30px;

Text alignment [text-align]

The CSS property text-align corresponds to the attribute align utilized in historical types of HTML. Textual content can both be aligned to the left, to the proper orcentred. Furthermore to this, the worth justify will stretch each line in order that both the right and left margins are straight. You realize this design from for illustration newspapers and magazines.

Within the illustration under the text in desk headings <th> is aligned to the correct while the desk knowledge <td> are centred. Additionally, usual text paragraphs are justified:

	th {
		text-align: right;

	td {
		text-align: center;

	p {
		text-align: justify;

Text decoration [text-decoration]

The property text-ornament makes it is possible to add distinctive “decorations” or “results” to text. For instance, you could underline the textual content, have a line by way of or above the text, etc. In the following instance, <h1> are underlined headlines, <h2> are headlines with a line above the text and <h3> are headlines with a line although the text.

	h1 {
		text-decoration: underline;

	h2 {
		text-decoration: overline;

	h3 {
		text-decoration: line-through;

Letter space [letter-spacing]

The spacing between text characters will also be certain making use of the property letter-spacing. The worth of the property is conveniently the preferred width. For instance, if you want a spacing of 3px between the letters in a text paragraph <p> and 6px between letters in headlines <h1> the code below could be used.

	h1 {
		letter-spacing: 6px;

	p {
		letter-spacing: 3px;

Text transformation [text-transform]

The textual content-alternate into property controls the capitalization of a textual content. That you can pick to capitalize, useuppercase or lowercase regardless of how the fashioned textual content is appears within the HTML code.

An illustration would be the phrase “headline” which may also be awarded to the character as “HEADLINE” or “Headline”. There are four plausible values for text-develop into:

Capitalizes the first letter of each word. For example: “john doe” will be “John Doe”.
Converts all letters to uppercase. For example: “john doe” will be “JOHN DOE”.
Converts all letters to lowercase. For example: “JOHN DOE” will be “john doe”.
No transformations – the text is presented as it appears in the HTML code.

As an instance, we will be able to use a record of names. The names are all marked with <li> (record-item). Let’s say that we want names to be capitalized and headlines to be presented in uppercase letters.

Try to take a seem at the HTML code for this instance and you’ll see that the textual content sincerely is in lowercase.

	h1 {
		text-transform: uppercase;

	li {
		text-transform: capitalize;


Within the final three classes you could have already learned a couple of CSS residences, but there is rather more to CSS. In the next lesson we can take a look at links.