CSS text formatting styles and controls text appearance, improving readability and visual appeal. By adjusting spacing, alignment, decoration, and casing, you can completely transform how your web page communicates with users.
<!DOCTYPE html>
<html>
<head>
<style>
.intro-text {
font-size: 40px;
font-weight: bold;
color: navy;
text-transform: uppercase;
font-family: Arial, sans-serif;
text-align: center;
}
</style>
</head>
<body>
<p class="intro-text">IntricateDevo</p>
</body>
</html>
In this example:
40px, making it large and prominent.navy), giving it a professional look.CSS offers a wide array of properties to control text. Here is a quick reference table:
| Property | Description |
|---|---|
color |
Sets the color of the text using color names, hex values, or RGB/HSL values. |
text-align |
Specifies the horizontal alignment of text in a block or table-cell element. |
text-align-last |
Sets the alignment of the last line occurring in a text block. |
text-decoration |
Shorthand for decorating text content (underline, overline, etc.). |
text-decoration-color |
Sets the color of text decorations. |
text-decoration-line |
Sets the kind of text decoration (underline, overline, line-through). |
text-decoration-style |
Specifies the style of the decoration line (solid, dashed, wavy, etc.). |
text-indent |
Indents the first line of a paragraph. |
text-justify |
Justifies text by spreading words or characters into complete lines. |
text-overflow |
Specifies how hidden overflow text is signaled to the user. |
text-transform |
Controls the capitalization of text. |
text-shadow |
Adds a shadow effect to the text. |
letter-spacing |
Specifies the space between characters in text. |
word-spacing |
Specifies the space between words in a line. |
line-height |
Sets the space between lines of text (leading). |
direction |
Sets the text direction (left-to-right or right-to-left). |
Let's dive into these CSS text formatting properties with syntax structures and live examples.
This property helps set the color of text on your web page. It applies to child text if no parent overrides it.
Syntax:
element {
color: color-name | rgb | rgba | hsl | hsla | hex;
}
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: navy;
font-size: 30px;
font-family: sans-serif;
}
</style>
</head>
<body>
<p>This text is styled with a navy color.</p>
</body>
</html>
This property aligns the text within its container element horizontally. Common values include left, right, center, and justify.
Syntax:
element {
text-align: left | right | center | justify | start | end;
}
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: lightblue;
text-align: center;
color: navy;
border: 2px solid navy;
font-size: 18px;
padding: 15px;
}
</style>
</head>
<body>
<p>This text is perfectly centered inside its blue box!</p>
</body>
</html>
This property aligns the very last line of a text block. It is extremely useful for paragraphs with justified text where you want the final line to behave differently.
Syntax:
element {
text-align-last: left | right | center | justify;
}
<!DOCTYPE html>
<html>
<head>
<style>
.justified-text {
width: 300px;
border: 2px solid navy;
padding: 10px;
text-align: justify;
text-align-last: center; /* The last line will be centered */
}
</style>
</head>
<body>
<p class="justified-text">
CSS formatting allows for highly precise control. Here, the text is fully justified to create straight edges on both the left and right sides. However, the last line is centered.
</p>
</body>
</html>
The text-decoration property is a shorthand used to add decorative lines to text, such as underlines, overlines, or line-throughs.
Syntax:
element {
text-decoration: none | underline | overline | line-through;
}
<!DOCTYPE html>
<html>
<head>
<style>
.decorated {
text-decoration: underline;
font-size: 20px;
color: navy;
}
</style>
</head>
<body>
<p class="decorated">This text is underlined.</p>
</body>
</html>
You can split text decoration into three granular properties for advanced styling:
text-decoration-line: underline, overline, line-through.text-decoration-color: The color of the line.text-decoration-style: solid, dashed, dotted, wavy, double.
<!DOCTYPE html>
<html>
<head>
<style>
.fancy-text {
font-size: 24px;
text-decoration-line: underline overline; /* Both top and bottom */
text-decoration-color: red;
text-decoration-style: wavy;
}
</style>
</head>
<body>
<p class="fancy-text">I am highly decorated text!</p>
</body>
</html>
This property adds an indentation (blank space) to the very first line of a block of text. It is commonly used in traditional paragraph formatting.
Syntax:
element {
text-indent: length (px, em) | percentage;
}
<!DOCTYPE html>
<html>
<head>
<style>
.indented {
width: 300px;
text-indent: 50px;
border: 1px solid navy;
padding: 10px;
}
</style>
</head>
<body>
<p class="indented">
This paragraph has a 50px indent on the very first line. The rest of the lines in this paragraph will flow normally without any indentation on the left side.
</p>
</body>
</html>
This property works in conjunction with text-align: justify; to specify how the browser should distribute the space.
Syntax:
element {
text-justify: auto | inter-word | inter-character;
}
inter-word: Increases the space between words.inter-character: Increases the space between individual letters.This property decides how hidden, overflowing text is presented to the user (e.g., clipping it or showing an ellipsis ...).
Note: To work, it must be paired with overflow: hidden; and white-space: nowrap;.
Syntax:
element {
text-overflow: clip | ellipsis;
}
<!DOCTYPE html>
<html>
<head>
<style>
.overflow-text {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Adds the "..." */
border: 2px solid navy;
font-size: 20px;
padding: 5px;
background-color: lightblue;
}
</style>
</head>
<body>
<p class="overflow-text">This is a very long sentence that will not fit inside the box.</p>
</body>
</html>
This property alters the capitalization of text automatically, without needing to modify the original HTML content.
Syntax:
element {
text-transform: capitalize | lowercase | uppercase | none;
}
<!DOCTYPE html>
<html>
<head>
<style>
.caps { text-transform: uppercase; }
.lower { text-transform: lowercase; }
.cap-first { text-transform: capitalize; }
</style>
</head>
<body>
<p class="caps">this was typed lowercase.</p>
<p class="lower">THIS WAS TYPED UPPERCASE.</p>
<p class="cap-first">capitalize the first letter of every word.</p>
</body>
</html>
Adds shadow effects directly to text, enhancing visual appeal or readability against complex backgrounds.
Syntax:
element {
/* horizontal-offset vertical-offset blur-radius color */
text-shadow: 2px 2px 5px red;
}
<!DOCTYPE html>
<html>
<head>
<style>
.shadowed {
font-size: 40px;
font-weight: 900;
color: navy;
text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<p class="shadowed">3D Shadow Effect</p>
</body>
</html>
The direction property in CSS sets the text writing direction. By default, it is Left-to-Right (ltr), but for languages like Arabic or Hebrew, it should be changed to Right-to-Left (rtl).
(Note: If you need to strictly override text behavior inline within HTML, you can use the <bdo dir="rtl"> tag. However, using the CSS direction property is standard for controlling overall layout flow).
Syntax:
element {
direction: ltr | rtl;
}
<!DOCTYPE html>
<html>
<head>
<style>
.rtl-text {
direction: rtl;
/* unicode-bidi is often needed to force exact character reversal */
unicode-bidi: bidi-override;
font-size: 20px;
color: navy;
}
</style>
</head>
<body>
<p>Standard Left-to-Right Text.</p>
<p class="rtl-text">This text flows from Right-to-Left.</p>
</body>
</html>
Which of the following property combinations correctly creates an ellipsis (...) for text that overflows its container?