Mastering typography is crucial for creating visually appealing and readable web content. CSS offers powerful properties to control text alignment and add decorative styles.
The text-align property is used to control the horizontal alignment of text within its containing element.
text-align: left; (Default)This paragraph text is aligned to the left. This is the default alignment in most browsers for left-to-right languages.
text-align: center;This paragraph text is centered. Centered text can be effective for headings or short blocks of text, but can be harder to read for long paragraphs.
text-align: right;This paragraph text is aligned to the right. Right alignment is less common for body text in left-to-right languages but can be used for specific design choices or in right-to-left languages.
text-align: justify;This paragraph text is justified. Justified text is aligned to both the left and right edges, creating clean lines. However, it can sometimes introduce large spaces between words, especially with narrow columns, which can impact readability.
The text-decoration property is a shorthand for setting individual text decoration properties like text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness.
text-decoration: none;This text has no decoration. This is commonly used to remove underlines from links.
text-decoration: underline;This text has a standard underline.
text-decoration: overline;This text has an overline.
text-decoration: line-through;This text has a line through it.
You can customize the appearance of text decorations extensively.
text-decoration: underline wavy var(--accent-color);This text has a wavy underline with a custom color.
text-decoration: underline dotted var(--primary-color); with text-decoration-thickness: 2px;This text has a thick, dotted underline.
text-decoration: underline dashed var(--secondary-color);This text has a dashed underline.
text-decoration: underline; and text-decoration-thickness: 3px;This text has a thick underline.
The vertical-align property affects how an element's content is aligned vertically within its line box. It's most commonly used on inline, inline-block, and table-cell elements.
Here are some examples using vertical-align on inline-block elements:
vertical-align: baseline; (Default for inline elements)vertical-align: top;vertical-align: middle;vertical-align: bottom;vertical-align: text-top;vertical-align: text-bottom;By combining these properties, you can achieve sophisticated text layouts and styles that enhance user experience and aesthetic appeal.
Experiment with different combinations to see how they affect your design!