In general, text is a communication medium composed of a collection of characters or words that humans can easily read and understand. It is used to convey messages to others with the help of digital devices such as computers, smartphones, etc.
In web design, CSS properties can be used to decorate text. Web designers use these properties to transform plain text into amazing-looking and engaging text.
There are various text properties in CSS that you can use to enhance the appearance of the text on your web page. In this article, we will learn about several text properties that are used to make web pages look attractive and capture the attention of the users.
CSS Text Properties
CSS text properties are as follows:
1. Text Color
This property is used to give the color to the text of the HTML element.
Syntax:
Color: color_name:
The property for text color can accept different color formats to specify the color of text. Various color formats include:
- Keyword: Refers to the color's name in CSS, like pink, coral, etc.
Syntax:
color: violet;
- RGB: This acronym stands for red, green, and blue, which serve as the primary colors of light. These values are whole numbers between 0 and 255.
Syntax:
color: rgb(0, 0, 255);
- RGBA stands for red, green, blue, and alpha channels.
Syntax:
color: rgba(100, 250, 0, 0.5);
- HSL stands for hue, saturation, and lightness.
Syntax:
color: hsl(0, 60%, 50%);
- HSLA stands for hue, saturation, lightness, and alpha.
Syntax:
color: hsla(45, 50%, 75%, 0.5);
- HEX: This is employed to specify the color by utilizing a hexadecimal value.
Syntax:
color: #FFA500;
An example showcasing the CSS color property utilizing various color formats:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Color</title>
<style>
.keyword {
color: violet;
}
.rgb {
color: rgb(0, 0, 255);
}
.rgba {
color: rgba(100, 250, 0, 0.5);
}
.hsl {
color: hsl(0, 60%, 50%);
}
.hsla {
color: hsla(45, 50%, 75%, 0.5);
}
.hex {
color: #FFA500;
}
</style>
</head>
<body>
<h1>Example of CSS Color Property</h1>
<p class="keyword">The text in this paragraph is colored using the color keyword.</p>
<p class="rgb">The text in this paragraph is colored using the RGB value.</p>
<p class="rgba">The text in this paragraph is colored using the RGBA value.</p>
<p class="hsl">The text in this paragraph is colored using the HSL value.</p>
<p class="hsla">The text in this paragraph is colored using the HSLA value.</p>
<p class="hex">The text in this paragraph is colored using the hexadecimal value.</p>
</body>
</html>
Output:
As demonstrated in the resulting content, the color of the text is set by employing the CSS color attribute on the HTML element.
2. Text Background Color
This attribute is utilized to assign a color to the background of the text within the HTML element.
Syntax:
background-color: color_name:
An example showcasing the CSS background-color attribute utilizing various color formats:
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Color</title>
<style>
.keyword {
background-color: orange;
}
.rgb {
background-color: rgb(215, 231, 31);
}
.rgba {
background-color: rgba(220, 182, 215, 0.5);
}
.hsl {
background-color: hsl(0, 60%, 50%);
}
.hsla {
background-color: hsla(202, 68%, 72%, 0.5);
}
.hex {
background-color: #49d939;
}
</style>
</head>
<body>
<h1>Example of CSS Background-Color Property</h1>
<p class="keyword">The background color of this text in the paragraph is given using the keyword.</p>
<p class="rgb">The background color of this text in the paragraph is given using the RGB value.</p>
<p class="rgba">The background color of this text in the paragraph is given using the RGBA value.</p>
<p class="hsl">The background color of this text in the paragraph is given using the HSL value.</p>
<p class="hsla">The background color of this text in the paragraph is given using the HSLA value.</p>
<p class="hex">The background color of this text in the paragraph is given using the hexadecimal value.</p>
</body>
</html>
Output:
The CSS background-color property is responsible for applying the background color to the text within the HTML element, as demonstrated in the following output.
3. Font Family:
This attribute is utilized to modify the typeface of the content within the HTML element.
Syntax:
font-family: font_family_name;
An example showcasing the functionality of the CSS font-family property:
<!DOCTYPE html>
<html>
<head>
<title>CSS Font Family</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
font-family: 'Georgia', serif;
}
p {
font-family: 'Helvetica', sans-serif;
font-size: 16px;
line-height: 1.6;
}
.monospace {
font-family: 'Courier New', monospace;
}
.cursive {
font-family: 'Brush Script MT', cursive;
}
.fantasy {
font-family: 'Impact', fantasy;
}
</style>
</head>
<body>
<div class="container">
<h1>Example of CSS Font-Family Property</h1>
<p>This is a sample text using various font families for styling.</p>
<p class="monospace">This text uses a "monospace" font family.</p>
<p class="cursive">This text uses a "cursive" font family.</p>
<p class="fantasy">This text uses a "fantasy" font family.</p>
</div>
</body>
</html>
Output:
The CSS font-family property is employed to apply a specific font style to the text, as demonstrated below.
4. Font Size
This attribute is utilized to specify the font size of the text within an HTML element.
Syntax:
font-size: length| xx-small| x-small| small| xx-large| x-large| large| larger| medium| smaller| initial| inherit;
An example showcasing the application of the CSS font-size property:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Font Size</title>
<style>
.large-font {
font-size: large;
}
.small-font {
font-size: small;
}
.font1 {
font-size: 20px;
}
.font2 {
font-size: 50px;
}
</style>
</head>
<body>
<div>
<h1>Example of CSS Font-Size Property</h1>
<p class="large-font">The size of this text is large.</p>
<p class="small-font">The size of this text is small.</p>
<p class="font1">The size of this text is 20px.</p>
<p class="font2">The size of this text is 50px.</p>
</div>
</body>
</html>
Output:
The text size has been adjusted by utilizing the CSS font-size property as demonstrated below.
5. Font Style
This attribute is utilized to specify the appearance of the text within the HTML element, like oblique, italic, and so forth.
Syntax:
font-style: italic| normal| oblique| initial| inherit;
An illustration showcasing the CSS font-style attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Font Style</title>
<style>
.italic-style {
font-style: italic;
}
.normal-style {
font-style: normal;
}
.oblique-style {
font-style: oblique;
}
</style>
</head>
<body>
<h1>Example of CSS Font-Style Property</h1>
<p class="italic-style">The style of this text is italic.</p>
<p class="normal-style">The style of this text is normal.</p>
<p class="oblique-style">The style of this text is oblique.</p>
</body>
</html>
Output:
By examining the resulting content displayed underneath, you can observe that the appearance of the text has been altered through the implementation of the CSS font-style attribute.
6. Font Weight
This attribute is employed to specify the thickness of the text within the HTML element, including options like bold, light, extra bold, extra light, and more.
Syntax:
font-weight: normal| 100 (thin)| 200 (extra light)| 300 (light)| 400 (normal)| 500 (medium)| 600 (semi bold)| 700 (bold)| 800 (extra bold)| 900 (black)| initial| inherit;
An illustration showcasing the application of the CSS font-weight attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Font Weight</title>
<style>
.thin-weight {
font-weight: 100;
}
.light-weight {
font-weight: light;
}
.bold-weight {
font-weight: bold;
}
.extra-bold-weight {
font-weight: 800;
}
</style>
</head>
<body>
<h1>Example of CSS Font-Weight Property</h1>
<p class="thin-weight">The weight of this text is 100 (thin).</p>
<p class="light-weight">The weight of this text is light.</p>
<p class="bold-weight">The weight of this text is bold.</p>
<p class="extra-bold-weight">The weight of this text is 800 (extra-bold).</p>
</body>
</html>
Output:
As evident from the result displayed, the font boldness of the HTML element has been set through the CSS font-weight attribute.
7. Font Variant
This attribute is utilized to specify the appearance of the text characters within the HTML element.
Syntax:
font-variant: small-caps| normal| initial| inherit;
An illustration showcasing the application of the CSS font-variant attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Font Variant</title>
<style>
.normal-variant {
font-variant: normal;
}
.small-caps-variant {
font-variant:small-caps;
}
</style>
</head>
<body>
<h1>Example of CSS Font-Variant Property</h1>
<p class="normal-variant">The variant of this text is normal.</p>
<p class="small-caps-variant">The variant of this text is small-caps.</p>
</body>
</html>
Output:
As demonstrated in the result displayed, the version of the content within the HTML tag has been modified utilizing the CSS font-variant attribute.
8. Text Decoration
This attribute is utilized to embellish the text within the HTML element. It serves as a condensed version encompassing text-decoration-line, text-decoration-style, and text-decoration-color properties.
Syntax:
text-decoration: text-decoration-line text-decoration-style text-decoration-color;
Example showcasing the utilization of the text-decoration property:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Text Decoration</title>
<style>
.underline {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}
.dotted-double-line {
text-decoration: underline double;
}
.dashed-red-overline {
text-decoration: overline dashed red;
}
</style>
</head>
<body>
<h1>Example of CSS Text-Decoration Property</h1>
<p class="underline">The text of this paragraph is underlined.</p>
<p class="line-through">The text of this paragraph has a line-through.</p>
<p class="dotted-double-line">The text of this paragraph has a dotted double line.</p>
<p class="dashed-red-overline">The text of this paragraph has a red dashed overline.</p>
</body>
</html>
Output:
As illustrated in the result displayed below, the content of the HTML tag is styled using the CSS text-decoration property.
9. Text Shadow
This attribute is employed to incorporate a shadow effect to the text within the HTML element.
Syntax:
text-shadow: horizontal-shadow vertical-shadow blur-radius color;
Example to demonstrate the text-shadow property:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Text Shadow</title>
<style>
.shadow1 {
font-size: 25px;
text-shadow: 2px 2px 3px red;
}
.shadow2 {
font-size: 25px;
text-shadow: 4px 4px 2px purple;
}
</style>
</head>
<body>
<h1>Example of CSS Text-Shadow Property</h1>
<p class="shadow1">The text of this paragraph shows a red shadow.</p>
<p class="shadow2">The text of this paragraph shows a purple shadow.</p>
</body>
</html>
Output:
In the displayed result, the shadow effect is implemented on the text within the HTML element by utilizing the CSS text-shadow attribute.
10. Text Align
This attribute is employed to adjust the alignment of text within an HTML element to the right, left, center, or justify.
Syntax:
text-align: left| right| center| justify;
An illustration showcasing the functionality of the CSS text-align attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Text Align</title>
<style>
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
}
</style>
</head>
<body>
<h1>Example of CSS Text-Align Property</h1>
<p class="left">The text of this paragraph is aligned to the left.</p>
<p class="right">The text of this paragraph is aligned to the right.</p>
<p class="center">The text of this paragraph is aligned to the center.</p>
<p class="justify">The text of this paragraph is aligned to the justified.</p>
</body>
</html>
Output:
As demonstrated in the result displayed below, the content of the HTML element is arranged using the CSS text-align attribute.
11. Letter Spacing
This attribute is utilized to adjust the spacing between characters within the content of an HTML element.
Syntax:
letter-spacing: length| normal| initial| inherit;
An example illustrating the application of the CSS letter-spacing property:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Letter Spacing</title>
<style>
.spacing1 {
letter-spacing: 2px;
}
.spacing2 {
letter-spacing: 6px;
}
</style>
</head>
<body>
<h1>Example of CSS Letter-Spacing Property</h1>
<p class="spacing1">The text in this paragraph has 2px of space between letters.</p>
<p class="spacing2">The text in this paragraph has 6px of space between letters.</p>
</body>
</html>
Output:
In the displayed result, the characters within the content of the HTML tag are adjusted for spacing through the CSS letter-spacing attribute.
12. Word Spacing
This attribute is utilized to add spacing between words within the content of an HTML element.
Syntax:
word-spacing: length| normal| initial| inherit;
An illustration showcasing the functionality of the CSS word-spacing property:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Word Spacing</title>
<style>
.spacing1 {
word-spacing: 4px;
}
.spacing2 {
word-spacing: 10px;
}
</style>
</head>
<body>
<h1>Example of CSS Word-Spacing Property</h1>
<p class="spacing1">The text in this paragraph has 4px of space between words.</p>
<p class="spacing2">The text in this paragraph has 10px of space between words.</p>
</body>
</html>
Output:
As demonstrated in the following result, the text within the HTML tag is adjusted for spacing using the CSS word-spacing attribute.
13. Line Height
This attribute is utilized to add spacing between lines of content within an HTML element.
Syntax:
line-height: length| normal| initial| inherit;
An illustration showcasing the CSS line-height property in action:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Line Height</title>
<style>
.height1 {
line-height: 15px;
}
.height2 {
line-height: 20px;
}
</style>
</head>
<body>
<h1>Example of CSS Line-Height Property</h1>
<p class="height1">
This text is the line 1 of the paragraph 1. <br>
This text is the line 2 of the paragraph 1.
</p>
<p class="height2">
This text is the line 1 of the paragraph 2. <br>
This text is the line 2 of the paragraph 2.
</body>
</html>
Output:
As evident in the displayed results, the vertical spacing between lines of text within the HTML element has been set using the CSS line-height property.
14. Text Transform
This attribute is utilized to specify the letter case of text within an HTML element.
Syntax:
text-transform: capitalize| lowercase| uppercase| none| initial| inherit;
An example showcasing the application of the CSS text-transform property is illustrated below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Text Transform</title>
<style>
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>Example of CSS Text-Transform Property</h1>
<p class="uppercase">The text of this paragraph is in uppercase.</p>
<p class="lowercase">The text of this paragraph is in lowercase.</p>
<p class="capitalize">The first letter of each word in the text of this paragraph is capitalized.</p>
</body>
</html>
Output:
As evident from the displayed result, the content of the HTML tag undergoes a change through the application of the CSS text-transform attribute.
15. Text Indent
This attribute is employed to define the offset of the initial line within a body of text within an HTML element.
Syntax:
text-indent: length| initial| inherit;
An illustration showcasing the application of the CSS text-indent property:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Text Indent</title>
<style>
.para1 {
text-indent: 40px;
}
.para2 {
text-indent: 50%;
}
.para3 {
text-indent: -2em;
}
.para4 {
text-indent: 4em;
}
</style>
</head>
<body>
<h1>Example of CSS Text-Indent Property</h1>
<div>
<p class="para1">The first line of this paragraph is intended by 40px.</p>
</div>
<div>
<p class="para2">The first line of this paragraph is intended by 50%. </p>
</div>
<div>
<p class="para3"> The first line of this paragraph is intended by -2em. </p>
<p class="para4"> The first line of this paragraph is intended by 4em. </p>
</div>
</body>
</html>
Output:
As demonstrated in the output above, the initial line of text within the HTML element is formatted using the CSS text-indent attribute.
16. Text Justify
This property defines the type of justification when text-align is set to justify.
Syntax:
text-justify: inter-character| inter-word| auto| none| initial| inherit;
An example showcasing the application of the CSS text-justify property:
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Text Justify</title>
<style>
p {
width: 100px;
border: 2px solid #e27272;
padding: 12px;
}
.none {
text-align: justify;
text-justify: none;
}
.inter-word {
text-align: justify;
text-justify: inter-word;
}
.inter-character {
text-align: justify;
text-justify: inter-character;
}
</style>
</head>
<body>
<h1>Example of CSS Text-Justify Property</h1>
<div>
<p class="none">The text of this paragraph is none justified.</p>
</div>
<div>
<p class="inter-word">The text of this paragraph is inter-word justified.</p>
</div>
<div>
<p class="inter-character">The text of this paragraph is inter-character justified.</p>
</div>
</body>
</html>
Output:
As evident in the displayed output, the text alignment is set using the CSS text-justify property.
17. Text Emphasis
This attribute is employed to highlight the content of an HTML element by applying a distinctive marker to it.
Syntax:
text-emphasis: dot| sesame| double-circle| open| circle| triangle| filled| none;
text-emphasis: "any_character"; /* Use this syntax when you want to create a mark of the character of your choice to emphasize the text. */
text-emphasis: emphasis_name color_name; /* Use this syntax to create a colored mark on text to emphasize it. */
An illustration showcasing the application of the CSS text-emphasis property:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Text Emphasis</title>
<style>
.dot {
text-emphasis: dot;
}
.circle {
text-emphasis: circle red;
}
.double-circle {
text-emphasis: double-circle;
}
.triangle {
text-emphasis: triangle pink;
}
.character {
text-emphasis: "z";
}
</style>
</head>
<body>
<h1>Example of CSS Text-Emphasis Property</h1>
<div>
<p class="dot">The text of this paragraph is emphasized using dots.</p>
</div>
<div>
<p class="circle">The text of this paragraph is emphasized using colored circles.</p>
</div>
<div>
<p class="double-circle">The text of this paragraph is emphasized using double-circle.</p>
</div>
<div>
<p class="triangle">The text of this paragraph is emphasized using colored triangles.</p>
</div>
<div>
<p class="character">The text of this paragraph is emphasized using the character "z".</p>
</div>
</body>
</html>
Output:
In the displayed result, the content within the HTML tag gets highlighted through the CSS text-emphasis attribute.
18. White Space
This attribute is employed to manage the spacing within the text, including tabs, spaces, line breaks, and other similar elements.
Syntax:
white-space: pre-wrap| pre-line| nowrap| pre| normal| initial| inherit;
An illustration showcasing the application of the CSS white-space property:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS White Space</title>
<style>
p {
width: 350px;
height: 60px;
white-space: pre;
background-color: rgb(243, 245, 133);
}
.white-space-normal {
white-space: normal;
}
.white-space-no-wrap {
white-space: nowrap;
}
.white-space-pre {
white-space: pre;
}
</style>
</head>
<body>
<h1>Example of CSS White-Space Property</h1>
<div>
<p class="white-space-normal">
The text in this paragraph is set to "normal" white space.
The text in this paragraph is set to "normal" white space.</p>
</div>
<div>
<p class="white-space-no-wrap">
The text in this paragraph is set to "nowrap" white space.
The text in this paragraph is set to "nowrap" white space.</p>
</div>
<div>
<p class="white-space-pre">
The text in this paragraph is set to "pre" white space.
The text in this paragraph is set to "pre" white space.</p>
</div>
</body>
</html>
Output:
As demonstrated in the output provided below, the spacing within the content of the HTML element is managed.
19. Text Overflow
This attribute is employed to manage the presentation of text when the text exceeds the boundaries of an element's content area.
When utilizing text-overflow, it is crucial to include two mandatory CSS properties: white-space: nowrap; and overflow: hidden;
Syntax:
text-overflow: ellipsis| clip| initial| inherit;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Text Overflow</title>
<style>
p {
white-space: nowrap;
overflow: hidden;
border: 2px solid purple;
width: 100px;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1>Example of CSS Text-Overflow Property</h1>
<div>
<p class="clip">
The text of this paragraph is the clip.
</p>
<p class="ellipsis">
The text of this paragraph is the ellipsis.
</p>
</div>
</body>
</html>
Output:
As demonstrated in the following result, the text-overflow attribute is utilized on the content of the HTML element.