 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome back to KTL's HTML and CSS tutorial. Today we will study Lesson 24.
In previous lesson we have studied CSS measurements.
Today we will study CSS text properties.
CSS text properties
CSS text properties are used to apply styles to text. We can specify color of text, text alignment, distance between letters, distance between words and so on using CSS text properties. We can also specify text decoration, indentation, or apply shadow using these text properties. Thus text properties play important role in displaying text in a web page. Today we will learn these text properties.
We will begin to write code in our file and understand these properties one by one.
Open a new Notepad file. In this copy code from lesson-22-2. We have written this code to demonstrate id selector.
Now let us see text properties.
1. CSS Color property:
#header {
color: red;
}
We have already used this style in our coding.
2. CSS text alignment property:
#header {
text-align:center;
}
We have also used this property.
3. CSS letter spacing property:
This property specifies space between two letters/characters. This is given in number, for example, 1.5vw. This number can also be a negative number. This is written as follows:
#header {
letter-spacing 1.6vw;
}
Copy this code in our script.
Important Point: After giving you save the file as "Lesson-24" and "Lesson-24.html". Then see output. So that you will clearly observe the function of each property.
4. CSS text decoration property:
#header {
text-decoration underline;
}
We are familiar with underline. Underline draws a line under the text whereas overline draws a line above text. Line-through is used to draw a line on the text itself.
text-decoration: none
is used to remove the line displayed for an hyperlink.
Copy the above code in our script.
5. CSS text indentation property:
This property is used to specify indent of text. This displays some space between the first line of a paragraph and browser border. This distance can be mentioned in any unit of measurement of length like cm, mm, px, vw, vh or this can be mentioned in percentage. For example,
#para1 {
text-indent: 8vw;
}
In above example, first line of paragraph will begin after 8vw. Copy this code in our script.
6. CSS text shadow property:
We can apply shadow to text using this property. This property has 3 values. First value is horizontal shadow, second value is vertical shadow, and third value is color of shadow. This is written as follows:
#header {
text-shadow: 0.2vw 0.4vw blue;
}
In this example, horizontal shadow is 0.2vw and vertical shadow is 0.4vw. Color of text shadow displayed is blue. Values of horizontal shadow and vertical shadow are required.
7. CSS text transform property:
This property is used for following purposes.
1. Display all letters in uppercase.
2. Display all letters in lowercase.
3. Display first letter of all words in capital letters.
Thus this property has 3 values namely uppercase, lowercase, and capitalize.
Write the following code in our script.
#para3 {
text-transform: uppercase;
color:yellow;
background-color:rgb(0,0,255);
}
We have written this style for "para3". Therefore, move last 2 lines in second paragraph and create a new paragraph. This is our 3rd paragraph. For this paragraph write <p id="para3">.
8. CSS word spacing property:
This property is used to specify space between two words. This property is written as follows:
#para3 {
text-transform: uppercase;
color:yellow;
background-color:rgb(0,0,255);
word-spacing: 2vw;
}
We have given a space of 2vw in words. Copy this code in our script. Now we have added many lines of style to our code. Make sure that you write code correctly. This is shown in the following figure.
 |
| Figure 24-1. CSS text properties |
Save this file as "Lesson-24" and "Lesson-24.html". Click on the above figure for PDF file of source code. Double click on HTML file. See the output. Click on the following figure to see actual output in a web page.
 |
| Figure 24-2. CSS text properties |
We can see all properties that we have mentioned in our script.
Apart from these properties there are some more CSS text properties like text-overflow, white-space, line-height and so on. Now you have understood how to use text properties in HTML scripts. You can use other text properties as per requirement.
Important Points:
1. CSS text properties are used to apply various style to text.
2. "Color" property is used to apply color to text.
3. "align" property is used to align text to left, right, center or justified.
4. We can specify the space in letters or space in words.
5. We can apply shadow to text, apply styles like underline or overline by using text properties.
Lesson-23 Lesson-25
