The Text properties are given below:
- color : → used to specify the color of a text
- text-indent : → indents the first line of a text
- text-align : → Aligns the text in an element
- text-decoration : → Adds decoration to text
- text-transform : → Controls the letter in an element
- line-height : → Sets the distance between lines
- letter-spacing : → Increase or decrease the spacing between Characters
- vertical-align : → Sets the vertical alignment of an element
- white-space : → Sets how white space in an element is handled
- word-spacing : → Increase or decrease the space between words
- direction : → Sets the direction of the text
Example 1 : Color
We’re going to try to style our HTML document, so it will have a formatted text that we instructed it to use.
we’re going to show you some value that can be used with each of the text properties. using the color property, you can specify any value in this format:
- name – a color name, like “blue”
- RGB – an RGB value, like “rgb(0,0,255)”
- Hex – a hex value, like “#0000ff”
E.g color : blue;
<html>
<head>
<style type="text/css">
body {
color: blue;
}
</style>
</head>
<body>
<h1>This is a Text</h1>
</body>
</html>
It will look like this on your browser
This is a Text
Example 2: Text Indent
Text indent, gives an indent to the first letter of a text or sentence depending on how you’ve written the text to flow in your document. The values of text indent are:
text-indent: (length[can be in pixels or any unit of measurement] or %) → E.g text-indent: 5px; or 10%;
<html>
<head>
<style type="text/css">
body {
color: blue;
text-indent: 10%;
}
</style>
</head>
<body>
<p>This is a Text, As you can see, the text of the first letter was indented,
look at the space given, it determines the length or % value in your code</p>
</body>
</html>
it will look like this on your browser
This is a text, As you can see, the text of the first letter was indented, look at the space given, it determines the length or % value in your code
Example 3: Text Align
Text align property is very easy to understand and remember, for most of you who uses Office or any office package on your PC, when typing you can assign the direction you want the text to flow in.
Text align property values are:
text-align: (left, right, center or justify) → E.g text-align: left;
<html>
<head>
<style type="text/css">
body {
color: blue;
text-indent: 10%;
text-align: justify;
}
</style>
</head>
<body>
<p>This is a Text, As you can see, the text of the first letter was indented,
look at the space given, it determines the length or % value in your code.
like wise, you can see that this whole text has been justified</p>
</body>
</html>
it will look like this on your browser
This is a text, As you can see, the text of the first letter was indented, look at the space given, it determines the length or % value in your code.like wise, you can see that this whole text has been justified
Example 4: Text decoration
Normally, your browser will try to render an effect on your text especially if none were specified initially. take for example, a link on web page made of a text, if you hover your mouse around it will underline prompt you that this is a link. well you can hide or remove or make a text behave in a certain way with the text decoration property, the values are :
text-decoration: (none, underline, overline,line-through, blink)
E.g text-decoration: underline;
<html>
<head>
<style type="text/css">
body {
color: blue;
text-indent: 10%;
text-align: justify;
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a Text, As you can see, the text of the first letter was indented,
look at the space given, it determines the length or % value in your code.
like wise, you can see that this whole text has been justified.
using the text decoration all the text here becomes underline.</p>
</body>
</html>
it will look like this on your browser
This is a text, As you can see, the text of the first letter was indented, look at the space given, it determines the length or % value in your code.like wise, you can see that this whole text has been justified.using the text decoration all the text here becomes underline.
Example 5: Text transform
One way you can have a text effect using CSS, is to call up the text transform property, if you sometimes don’t want all you text to be in small letter while not transform any small letters to big letters.
text transform property values are :
text-transform: (none,capitalize,uppercase,lowercase)
E.g text-transform: uppercase;
try the other values to see what it does.
<html>
<head>
<style type="text/css">
body {
color: blue;
text-indent: 10%;
text-align: justify;
text-decoration: underline;
text-transform: capitalize;
}
</style>
</head>
<body>
<p>This is a Text, As you can see, the text of the first letter was indented,
look at the space given, it determines the length or % value in your code.
like wise, you can see that this whole text has been justified.
using the text decoration all the text here becomes underline.
can you see that only the first letter of each word is capitalize?</p>
</body>
</html>
it will look like this on your browser
This is a text, As you can see, the text of the first letter was indented, look at the space given, it determines the length or % value in your code.like wise, you can see that this whole text has been justified.using the text decoration all the text here becomes underline.can you see that only the first letter of each word is capitalize?
Example 6: Line Height
This simple sets the distance between the line height of a sentence from another sentence, it kind of gives the space between a line from another. the property values of line height are:
line-height: (normal, length(unit of measurement),number, %)
E.g line-height: 2;
<html>
<head>
<style type="text/css">
body {
color: blue;
text-indent: 10%;
text-align: justify;
text-decoration: underline;
text-transform: capitalize;
line-height: 3;
}
</style>
</head>
<body>
<p>This is a Text, As you can see, the text of the first letter was indented,
look at the space given, it determines the length or % value in your code.
like wise, you can see that this whole text has been justified.
using the text decoration all the text here becomes underline.
can you see that only the first letter of each word is capitalize?
can you see the distance between the lines?</p>
</body>
</html>
it will look like this on your browser
This is a text, As you can see, the text of the first letter was indented, look at the space given, it determines the length or % value in your code.like wise, you can see that this whole text has been justified.using the text decoration all the text here becomes underline.can you see that only the first letter of each word is capitalize? can you see the distance between the lines?
Example 7: Letter spacing
This is used to give space between letters, that means the actual space given to each written or typed character on your document. the property values of letter spacing are :
letter-spacing : (normal or length[unit of measurement])
E.g letter-spacing: 2px;
<html>
<head>
<style type="text/css">
body {
color: blue;
text-indent: 10%;
text-align: justify;
text-decoration: underline;
text-transform: capitalize;
line-height: 3;
letter-spacing: 2px;
}
</style>
</head>
<body>
<p>This is a Text, As you can see, the text of the first letter was indented,
look at the space given, it determines the length or % value in your code.
like wise, you can see that this whole text has been justified.
using the text decoration all the text here becomes underline.
can you see that only the first letter of each word is capitalize?
can you see the distance between the lines?the space
between letters, are they now obvious?</p>
</body>
</html>
it will look like this on your browser
This is a text, As you can see, the text of the first letter was indented, look at the space given, it determines the length or % value in your code.like wise, you can see that this whole text has been justified.using the text decoration all the text here becomes underline.can you see that only the first letter of each word is capitalize? can you see the distance between the lines? the space between letters, are they now obvious?
Example 8:vertical align
This is used to set the vertical alignment of an element. in case you want your text to display in a certain position or manner, this is the property to use. the values are :
vertical-align: (baseline, sub, super, top, text-top, middle, bottom, text-bottom, length[unit of measurement], %)
E.g vertical-align: baseline;
try the other values to see the result for yourself.
<html>
<head>
<style type="text/css">
body {
color: blue;
text-indent: 10%;
text-align: justify;
text-decoration: underline;
text-transform: capitalize;
line-height: 3;
letter-spacing: 2px;
}
i {
vertical-align: super;
}
</style>
</head>
<body>
<p>This is a Text, As you can see, the text of the first letter was indented,
look at the space given, it determines the length or % value in your code.
like wise, you can see that this whole text has been justified.
using the text decoration all the text here becomes underline.
can you see that only the first letter of each word is capitalize?
can you see the distance between the lines?the space
between letters, are they now obvious?</p>
<strong>The root of 9<i>3</i> is ?</strong>
</body>
</html>
it will look like this on your browser
This is a text, As you can see, the text of the first letter was indented, look at the space given, it determines the length or % value in your code.like wise, you can see that this whole text has been justified.using the text decoration all the text here becomes underline.can you see that only the first letter of each word is capitalize? can you see the distance between the lines? the space between letters, are they now obvious?
The root of 93 is?
Example 9: White Space
This is used to set the amount of white space that is used up in an element, for example if you enclosed an image in a <div> box and specified a width and a height to it, and have written some text below the image, you can see the amount of white space in between the image, text and the div box in case it’s invisible.
The property values for white space are:
white-space: (normal, pre, nowrap)
E.g white-space: nowrap;
using the nowrap value, it can erase any bit of write space in between elements.
<html>
<head>
<style type="text/css">
body {
color: blue;
text-indent: 10%;
text-align: justify;
text-decoration: underline;
text-transform: capitalize;
line-height: 3;
letter-spacing: 2px;
white-space: normal;
}
i {
vertical-align: super;
}
</style>
</head>
<body>
<p>This is a Text, As you can see, the text of the first letter was indented,
look at the space given, it determines the length or % value in your code.
like wise, you can see that this whole text has been justified.
using the text decoration all the text here becomes underline.
can you see that only the first letter of each word is capitalize?
can you see the distance between the lines?the space
between letters, are they now obvious?
can you see any white space in between the text again?</p>
<strong>The root of 9<i>3</i> is ?</strong>
</body>
</html>
it will look like this on your browser
This is a text, As you can see, the text of the first letter was indented, look at the space given, it determines the length or % value in your code.like wise, you can see that this whole text has been justified.using the text decoration all the text here becomes underline.can you see that only the first letter of each word is capitalize? can you see the distance between the lines? the space between letters, are they now obvious?can you see any white space in between the text again?
The root of 93 is?
Example 10: Word Spacing
As the name implies it is used to give space between words, it can increase or decrease the space.
The property values are:
word-spacing: (normal, length[unit of measurement])
E.g. word-spacing: 4px;
<html>
<head>
<style type="text/css">
body {
color: blue;
text-indent: 10%;
text-align: justify;
text-decoration: underline;
text-transform: capitalize;
line-height: 3;
letter-spacing: 2px;
white-space: normal;
word-spacing: 4px;
}
i {
vertical-align: super;
}
</style>
</head>
<body>
<p>This is a Text, As you can see, the text of the first letter was indented,
look at the space given, it determines the length or % value in your code.
like wise, you can see that this whole text has been justified.
using the text decoration all the text here becomes underline.
can you see that only the first letter of each word is capitalize?
can you see the distance between the lines?the space
between letters, are they now obvious?
can you see any white space in between the text again?
can you notice the space between each word now?</p>
<strong>The root of 9<i>3</i> is ?</strong>
</body>
</html>
it will look like this on your browser
This is a text, As you can see, the text of the first letter was indented, look at the space given, it determines the length or % value in your code.like wise, you can see that this whole text has been justified.using the text decoration all the text here becomes underline.can you see that only the first letter of each word is capitalize? can you see the distance between the lines? the space between letters, are they now obvious?can you see any white space in between the text again?can you notice the space between each word now?
The root of 93 is?
Example 11: Direction
This simply set the text direction, it gives it an order to follow, there are only two values, “left-to-right’ and “right-to-left”.
direction: (ltr or rtl)
E.g. direction: ltr;
<html>
<head>
<style type="text/css">
body {
color: blue;
text-indent: 10%;
text-align: justify;
text-decoration: underline;
text-transform: capitalize;
line-height: 3;
letter-spacing: 2px;
white-space: normal;
word-spacing: 4px;
direction: rtl;
}
i {
vertical-align: super;
}
</style>
</head>
<body>
<p>This is a Text, As you can see, the text of the first letter was indented,
look at the space given, it determines the length or % value in your code.
like wise, you can see that this whole text has been justified.
using the text decoration all the text here becomes underline.
can you see that only the first letter of each word is capitalize?
can you see the distance between the lines?the space
between letters, are they now obvious?
can you see any white space in between the text again?
can you notice the space between each word now? what can you notice?
</p>
<strong>The root of 9<i>3</i> is ?</strong>
</body>
</html>
it will look like this on your browser
This is a text, As you can see, the text of the first letter was indented, look at the space given, it determines the length or % value in your code.like wise, you can see that this whole text has been justified.using the text decoration all the text here becomes underline.can you see that only the first letter of each word is capitalize? can you see the distance between the lines? the space between letters, are they now obvious?can you see any white space in between the text again?can you notice the space between each word now? what can you notice?
The root of 93 is?
You’ve gone so far, practice some more with the rest of the values in each text property in CSS to improve your skills.
| Back | Main: CSS Programming | Previous Lesson: Backgrounds & Colors | Next Lesson: Fonts |
cool its really easy