In this blog post, we will explore various CSS properties that can be used to style and enhance text in web design. These properties can help you transform text, add decorations, align text, modify spacing, apply shadows, and control line breaks and wrapping. Let’s dive in!
Text Transform
The text-transform
property allows you to change the case of an element’s text. There are four valid values:
capitalize
: Uppercases the first letter of each word.uppercase
: Uppercases all the text.lowercase
: Lowercases all the text.none
: Disables transforming the text, preventing inheritance.
Example:
p {
text-transform: uppercase;
}
Text Decoration
The text-decoration
property is used to add decorations to text, such as underlines, overlines, line-throughs, or blinking effects. You can also customize the style and color of the decoration.
Example:
p {
text-decoration: underline;
}
Customizing the style and color:
p {
text-decoration: underline dashed yellow;
}
Alternatively, you can use the specific properties text-decoration-line
, text-decoration-color
, and text-decoration-style
to accomplish the same effect.
Text Alignment
The text-align
property controls the horizontal alignment of text within its container. The default value is start
, which aligns the text based on the language direction. Other possible values include end
, left
, right
, center
, and justify
.
Example:
p {
text-align: right;
}
Vertical Alignment
The vertical-align
property determines how inline elements are vertically aligned. You can set length or percentage values to align the text higher or lower than the baseline of the parent element. Alternatively, you can use keywords like baseline
, sub
, super
, top
, text-top
, middle
, bottom
, or text-bottom
.
Line Height
The line-height
property allows you to adjust the vertical spacing between lines of text. This property affects the space between baselines, not the actual font size.
Example:
p {
line-height: 0.9rem;
}
Text Indentation
The text-indent
property is used to indent the first line of a paragraph. You can specify a length or percentage value to determine the indentation amount.
Example:
p {
text-indent: -10px;
}
Controlling the Last Line Alignment
By default, the last line of a paragraph is aligned following the text-align
value. You can use the text-align-last
property to change this behavior.
Example:
p {
text-align-last: right;
}
Adjusting Word and Letter Spacing
The word-spacing
property modifies the spacing between words. You can use the normal
keyword to reset inherited values or specify a length value.
The letter-spacing
property modifies the spacing between letters. Similarly, you can use the normal
keyword or a length value.
Example:
p {
word-spacing: 2px;
}
span {
word-spacing: -0.2em;
}
Similarly for letter-spacing
.
Adding Text Shadows
The text-shadow
property allows you to apply a shadow effect to the text. You can specify the X and Y offset of the shadow, the blur radius, and the color (optional).
Example:
p {
text-shadow: 0.2px 2px;
}
span {
text-shadow: yellow 0.2px 2px 3px;
}
Handling White Space
The white-space
property controls how white space, new lines, and tabs are handled within an element. Valid values that collapse white space are normal
, nowrap
, and pre-line
. Valid values that preserve white space are pre
and pre-wrap
.
Customizing Tab Sizes
The tab-size
property sets the width of the tab character. You can set an integer value to define the number of character spaces or specify a length value.
Example:
p {
tab-size: 2;
}
span {
tab-size: 4px;
}
Adjusting Text Writing Mode
The writing-mode
property defines whether lines of text are laid out horizontally or vertically, and the direction in which blocks progress.
Handling Line Breaks and Wrapping
The hyphens
property determines if hyphens should be automatically added when going to a new line. You can choose between none
, manual
, or auto
.
The word-break
property specifies how to break lines within words. Values like normal
, break-all
, and keep-all
control the line break behavior.
The overflow-wrap
property controls what happens when a word is too long to fit a line. You can use break-word
to break the word at the line’s exact length or anywhere
to break it when there is a soft wrap opportunity.
And that covers the major CSS properties related to typography! By harnessing these properties, you can create visually appealing and well-structured text in your web designs.
Tags: CSS, Typography, Text Styles, Line Height, Text Alignment, Vertical Alignment, Indentation, Word Spacing, Letter Spacing, Text Shadows, White Space Handling, Tab Sizes, Writing Mode, Line Breaks, Overflow-Wrap