-->

CSS text tutorial

CSS text tutorial

CSS text tutorial

CSS text tutorial:

You can't bring all the beauty in the text with just the font. So CSS has a number of other properties that can be used to sort text.

The value of text-align and text-transform properties has already been discussed.

The text-indent property allows the first line of text in an element to be moved horizontally. Can give pixels or percentage values. E.g.


text-indent : 200px;

 Minus (-) value can also be given. If you give minus, you will continue to move to the left.

It is most commonly used to move text inside an element. Because the text is removed and the picture is usually given. Since there must be some text between the start and end tags of a, the value of the text-indent is used to hide from the window with a lot more value.

The line-height determines the height of the lines.

line-height: 2; /* or */ line-height:20px;


20px This means that the height of the line will be 20 pixels. line-height: 2 means that the height of one line will be 2 times the height of the text.

% Its value can be given with. By default the value is normal.

letter-spacing Can increase the distance between characters.

letter-spacing : 20px;

By default its value is also normal.

Word-spacing will work just like letter-spacing, only it can reduce the distance between words.

word-spacing: 20px;

The explanation is like letter-spacing.


text-decoration A work property, it is used to draw lines under the text, to draw lines in the middle, and so on.

Its value is none by default. If it is, it will be normal.

If you underline the value, it will show the bottom line of all the text of that element.

Overline will show the top line

If you give line-through, the line will go through the middle

text-decoration : line-through;

The anchor tag (<a> </a>) has a line by default. You will see a line below all the links. To remove it text-decoration: none; Widely used.

It can be fixed by twisting the text with white-space or it will look exactly like it was typed in the document.

white-space : nowrap; /* or */white-space : pre;

By default its value is normal.

If there is nowrap, the text will show in one line and if pre, it will show exactly as written in the document.



A new property called CSS3 text-shadow has been introduced to give special effects to the text.

text-shadow: 2px 3px 3px #555;

The first 3 pixel values ​​are horizontal shadows, vertical shadows and blur, respectively. Finally I painted with # 555. You can color as you wish.

Together examples of all properties

<!DOCTYPE html>
<html>
<head>
<style> p{text-indent: 200px;
line-height:2;
word-spacing:2px;
letter-spacing:2px;
text-decoration: overline;}
h1{text-shadow: 2px 3px 3px #555;}
</style>
</head>
<body>
<h1>Myhtmlcode</h1>
<p>Myhtmlcode</p>
</body>
</html>

CSS3 Another property is text-overflow. When the text will be larger than the volume of the container (where the texts are). This only works if the value of the overflow property in the container is hidden, auto or scroll and the value of white-space is nowrap.

p{overflow:hidden; white-space:nowrap; text-overflow: ellipsis;}

See application

<!DOCTYPE html>
<html>
<head>
<style>
p{overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;}
</style>
</head>
<body>
<h1>Myhtmlcode</h1>
<p>Myhtmlcode</p>
</body>
</html>

Giving ellipsis will show dot dot (...) sign without showing extra text anymore. If you want to give another sign without showing the dot sign then text-overflow: "-" This is the sign inside the quotation.

If you give the value clip then the rest of the text will not show and no dot mark will show.

These are the most used. Apart from these, CSS3 has some other properties as well

Details on text-wrap, word-wrap, text-emphasis, text-outline etc. will be given later.
Facebook Comments

Follow by Email