CSS Styling the Text
The most important part of a website is the text, because that is what HTML was build for, to markup the text to be shared on the Internet. Text is an integral part of every webpage. A webpage with excellent design but un-readable, ugly and unformatted text is very inappropriate.
Now that you have understood the basics of the CSS background properties, let's work towards having beautiful, well-formatted text on our webpage.
In this module, we are not going to discuss fonts, but we are going to discuss the representation of text.
Text properties are fun to experiment with and will surely add a dynamic edge to your webpage. Let's start with the most basic property of any text, color!
Text Color
The color property defines the color of your text. Introduced in CSS1, it is supported by almost all web browsers. While choosing a color for your text, do keep in mind the color of your background.
Just like in background-color, in this property too, color can be specified in any of the following three forms:
- a valid color name, like red, blue etc
- HEXA code, like for white color, it is #FFFFFF and for black, it is #000000
- an RGB value
Syntax:
selector {
color: red;
}
Live Example →
This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,
- IE 3+
- Firefox 1+
- Opera 3.5+
- Safari 1+
- Chrome 1+
Text Direction
The direction property of the text can be used to support multiple languages and in the same document. The default value is ltr i.e., Left To Right. Some languages such as Arabic, Persian, Urdu etc require a Right To Left text direction.
For example,
body {
direction: rtl;
}
Live Example →
Above CSS code will change the direction of every text on the webpage from Right to Left.
This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,
- IE 5.5+
- Firefox 1+
- Opera 9.2+
- Safari 1.3+
- Chrome 2+
Letter Spacing
This property defines the spacing between letters of the words in the text.
Syntax:
letter-spacing: normal | length | initial | inherit;
The length can be a positive or negative value. Initially, the property is set to its default value, that is, normal.
h1{
letter-spacing: 2px;
}
h2{
letter-spacing: -3px;
}
Live Example →
This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,
- IE 4+
- Firefox 1+
- Opera 3.5+
- Safari 1+
- Chrome 1+
Text Alignment
Ah, the more familiar text-align! This property specifies the horizontal alignment of the text in an element. The default value is according to the direction property. Alignment is right if direction is set to rtl and left if direction is set to ltr.
Syntax:
text-align: left | right | center | justify | inherit;
For example,
#text-center {
text-align: center;
}
Live Example →
This is compatible with CSS1, CSS2 and CSS3 along with following web browsers,
- IE 3+
- Firefox 1+
- Opera 3.5+
- Safari 1+
- Chrome 1+
Text Indentation
This property specifies the indentation(spacing) of the text from the first line of the holding block(top left corner). You can specify negative values to this property. As you can probably guess, the text will be indented towards left for a negative value, and away from left side for a positive value. The length can be specified in pixel, cm, pt etc. You can also specify a percentage value to this property as well.
Syntax:
text-indent: length;
For example,
#little_towards_right {
text-indent: 10px;
}
Live Example →
This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,
- IE 3+
- Firefox 1+
- Opera 3.5+
- Safari 1+
- Chrome 1+
Text Decoration
The text-decoration property specifies the decoration added to the text.
NOTE: In CSS3, the text-decoration property is a shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style, but this is currently not supported in any of the major browsers.
Syntax:
text-decoration: none | underline | overline | line-through;
For example,
#underlined {
text-decoration: underline;
}
Live Example →
This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,
- IE 3+
- Firefox 1+
- Opera 3.5+
- Safari 1+
- Chrome 1+
Text Shadow
The text-shadow property adds shadow to the text.
Syntax:
text-shadow: h-shadow v-shadow blur-radius color | none;
h-shadow and v-shadow are compulsory parameters. h-shadow specifies the horizontal distance between the actual text and its shadow, while h-shadow specifies the vertical distance between the text and its shadow.
If we do not specify any value for blur-radius then the shadow is an exact copy of the actual text, slightly displaced due to h-shadow and v-shadow. blur-radius make it blur, more value maks the shadow more blur.
For Example,
Live Example →
This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,
- IE 10+
- Firefox 3.5+
- Opera 9.6+
- Safari 4+
- Chrome 4+
Note: To add more than one shadow to the text, add a comma-separated list of shadows.
There are many more text properties you can work with. The properties mentioned above are among the most commonly used! Next up, Fonts!
