HTML texts can be formatted in many ways using number of CSS properties which are listed below. All of these CSS properties are used in text formatting to create visually pleasing appearance.
| Property | Description |
|---|---|
| color | Sets the color of text |
| direction | Specifies the text writing direction |
| letter-spacing | Increases or decreases the space between characters in a text |
| line-height | Sets the line height |
| text-align | Specifies the horizontal alignment of text |
| text-decoration | Specifies the decoration added to text |
| text-indent | Specifies the indentation of the first line in a paragraph |
| text-shadow | Specifies the shadow effect added to text |
| text-transform | Controls the capitalization of text |
| text-overflow | Specifies what to do with overflowed text content |
| vertical-align | Sets the vertical alignment of an element |
| white-space | Specifies how white-space inside an element is handled |
| word-spacing | Increases or decreases the space between words in a text |
The color property is used to set the color of the text. The color is specified by either the color name or its HEX, HSL or RGB value.
h1{
color: red;
}
The text-align property is used to set the horizontal alignment of a text. A text can be aligned to the left, right or center of the element width as well as justified i.e. stretched to equal width.
p {
text-align: justify;
}
The text-decoration property is used to set decorations on texts. The acceptable values for CSS text-decoration property are overline, underline, line-through and none. The value none is often used to remove underlines from HTML link texts which is added by browsers by default.
a {
text-decoration: none;
}
The text-transform property is used to specify the capitalization of the texts and make convert them to all uppercase or lowercase letters or capitalize the first letter of each word.
p{
text-transform: uppercase;
}
The text-indent property is used to specify the indentation of the first line of a paragraph. The value can be in any form of length or percetage of the width of the element itself.
p {
text-indent: 50px;
}
The letter-spacing property is used to specify the space between the characters in a text. The default letter spacing value is 0 pixel which can be increased or decreased using letter-spacing property and accepts negative value too. The value can be any form of length values.
h1 {
letter-spacing: 3px;
}
The line-height property is used to specify the space between lines in a paragraph. The value can be in any form of length values as well as percentage.
p{
line-height: 1.6em;
}
The direction property is used to change the text direction of an element. The default value is ltr that makes the texts printed from the normal left to right direction while value rtl makes it the opposite.
p {
direction: rtl;
}
The word-spacing property is used to specify the space between the words in a text. The value can be any form of length values.
h1 {
word-spacing: 10px;
}
The text-shadow property adds shadow to text. The shadow accepts four values where the first value defines the position of the horizontal shadow, second defines the position of the vertical shadow, third value defines the blurness of the shadow and the final calue defines the color of the shadow. You can skip the third value if you do not want the blur effect.
h1 {
text-shadow: 3px 2px 5px red;
}
The CSS property white-space is used to specify the way text blocks should be displayed in the browser. The default value is normal which collapse all contiguous white spaces into one while displaying in the browser while the text is broken into multiple lines wherever needed. The values accepted by white-space are as follows.
| Value | Description |
|---|---|
| normal | Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. (Default) |
| nowrap | Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line until a <br> tag is added to the text. |
| pre | Identical to <pre> tag in HTML where whitespace is preserved by the browser. Text will only wrap on line breaks. |
| pre-line | Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary and on line breaks |
| pre-wrap | Whitespace is preserved by the browser. Text will wrap when necessary and on line breaks |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
p{
width: 300px;
height: 20px;
white-space: nowrap;
overflow: hidden;
}
CSS text-overflow is used along with CSS overflow property to hide the overflowing text or replace them with ellipsis using the ellipsis value. You can also replace overflowing text with some string but that works on firefox only. White-space property with value no-wrap can also be used together to prevent overflowing content to prevent getting them rearranged and appear in the next line.
p{
width: 300px;
height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
CSS property vertical-align can be used to set vertical alignment on an HTML element. It is highly useful when adding and aligning small images or some inline-contents within the text blocks. The values accepted by CSS property vertical-align are as follows.
| Value | Description |
|---|---|
| baseline | The element is aligned with the baseline of the parent. (Default) |
| length | Raises or lower an element by the specified length. Negative values are allowed. |
| % | Raises or lower an element in a percent of the line-height property. Negative values are allowed |
| sub | The element is aligned with the subscript baseline of the parent |
| super | The element is aligned with the superscript baseline of the parent |
| top | The element is aligned with the top of the tallest element on the line |
| text-top | The element is aligned with the top of the parent element's font |
| middle | The element is placed in the middle of the parent element |
| bottom | The element is aligned with the lowest element on the line |
| text-bottom | The element is aligned with the bottom of the parent element's font |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
img{
vertical-align: middle;
}
Leave a comment