The CSS uses the text properties for text alignment and text visualization inside an element. This property is also used in the HTML document.
color
The color property is used to set the color of the text inside an element. You can specify the color using color names, hexadecimal codes, RGB values, or HSL values. RGBA and HSLA allow you to specify an alpha channel for opacity.
/* Using a color name */
h1 {
color: DarkCyan; /* */
}
/* Using a hexadecimal code */
h2 {
color: #ee3e80; /* */
}
/* Using an RGB value */
p {
color: rgb(100,100,90); /* */
}
/* Using an RGBA value with transparency */
.transparent-text {
color: rgba(0, 0, 0, 0.6); /* */
}text-align
The text-align property controls the horizontal alignment of text within an element. Possible values include left, right, center, justify, start, end, and match-parent. justify makes every line in a paragraph (except the last) take up the full width.
/* Align text to the left */
h1 {
text-align: left; /* */
}
/* Center text */
.center {
text-align: center; /* */
}
/* Justify text */
p {
text-align: justify; /* */
}
/* Align text to the right */
.credits {
text-align: right; /* */
}text-decoration
You can set or remove decorations from text using the text-decoration property. You can set it to none, underline, overline, line-through, initial, or inherit. You can also use it as a shorthand property alongside text-decoration-style and text-decoration-color options. Note that text-decoration-color, text-decoration-line, text-decoration-style, and text-decoration-skip are only supported in Firefox.
/* Remove underline from a link */
a {
text-decoration: none; /* */
}
/* Add an overline to text */
h2 {
text-decoration: overline; /* */
}
/* Add a line through text */
h3 {
text-decoration: line-through; /* */
}
/* Add an underline to text */
h4 {
text-decoration: underline; /* */
}
/* Shorthand for underline, dotted, and blue */
.title {
text-decoration: underline dotted blue; /* */
}text-transform
The text-transform property controls the capitalisation of the text. Possible values are none, uppercase, lowercase, and capitalise.
/* Convert text to uppercase */
h2 {
text-transform: uppercase; /* */
}
/* Convert text to lowercase */
p.lowercase {
text-transform: lowercase; /* */
}
/* Capitalize the first letter of each word */
.capitalize {
text-transform: capitalize; /* */
}
/* No transformation */
.normal {
text-transform: none; /* */
}letter-spacing
The letter-spacing property specifies the spacing between characters (letters) in a text. You can use normal (default) or a length value (e.g., pixels, ems, percentage). Positive values increase the spacing, while negative values decrease it.
/* Increase letter spacing */
h2 {
letter-spacing: 0.4em; /* */
}
/* Decrease letter spacing */
.tight {
letter-spacing: -1px; /* (negative values are possible) */
}
/* Using a percentage value */
.spaced {
letter-spacing: 3%; /* */
}
/* Default letter spacing */
.normal {
letter-spacing: normal; /* */
}word-spacing:
The word-spacing property specifies the spacing behaviour between words. Possible values include normal (default) and a length value (e.g., pixels, ems, vh, cm) or a percentage. Positive values increase the spacing, and negative values can be used.
/* Increase word spacing */
p.spaced {
word-spacing: 3pt; /* */
}
/* Decrease word spacing */
.tight-words {
word-spacing: -2px; /* (negative values are possible) */
}
/* Default word spacing */
.normal {
word-spacing: normal; /* */
}
/* Using an em value */
.extra-space {
word-spacing: 1em; /* */
}CSS3 Topics