Text Styling Properties

In creating a Web site, how your text looks is as important as what you say. HTML is the skeleton and Text Styling properties in CSS are wardrobe which align, decorate your clothes means content as well given space to breathe.

In this guide, we will break down crucial CSS Text Styling properties you need for your website to remain readable, professional and aesthetically captivating.

1. Text Alignment (text-align)

The text-align property specifies how text is horizontally aligned inside an element.

left: The default setting. Text is aligned to the left.

right: Places text on the right of the line (This is commonly used for dates or signatures).

center: Adds text to the centre of it’s containing element. Perfect for headlines.

justify: Stretches the lines to make them equal width (like in newspapers).

2. Text Decoration (text-decoration)

This property is mostly used to give “extra” lines underneath your text for emphasis or guiding purposes.

none: Removes all decorations. It’s most frequently used to clear the default link underline.

underline: Draw a line under the text.

overline: Draws a line across the text.

line-through: Draws a line through the middle of it (good for displaying ”sale” prices).

3. Text Transformation (text-transform)

Instead of copying and pasting your HTML to change the “case” of your words, you can change it dynamically using CSS.

uppercase: everything is in upper case.

lowercase: Transform everything to lowercase.

capitalize: Turns the first character of each word to upper-case.

4. Spacing and Readability

Kerning is the “secret sauce” of professional typography. It’s one of the mechanisms that stops your designs from appearing “cluttered.”

Line Height (line-height)

This controls the space between lines of text vertically. A line-height of 1.5 or 1.6 is the “magic number” for web reads.

Letter Spacing (letter-spacing)

This, referred to as “tracking,” is the horizontal space between each character. Small increments such as these can result in large text headings appearing more up-to-date.

Word Spacing (word-spacing)

It’s like letter spacing, but for the space in between words.

5. Creating Depth with Text Shadow (text-shadow)

One way to make your text “pop” is to give it a shadow. This property takes four values:

Horizontal Offset: Distance the shadow is shifted to the left or right.

Vertical Offset: The distance shadow moves up or down.

Blur Radius: How much blur or sharpness there is to the shadow.

Color: The color of the shadow.

Example: text-shadow : 2px 2px 4px rgba(0,0,0,0.3);

Comprehensive Code Example

Here’s how you will put these properties in action to design a blog card.

HTML

HTML 
<div class="styled-box">
 <h2 class="title">latest news</h2>
 <p class="content">CSS gives the power of designing beautiful and readable content without the use of images, through properties for text. </p> 
<a href="#" class="link">Read More</a>
</div>

CSS

CSS

.styled-box {
border: 1px solid #ddd;
padding: 20px;
max-width: 400px;
}

.title {
text-align: center; /* Centered header /
text-transform: uppercase; / Upper case the text for impact /
letter-spacing: 3px; / Space wide for style purposes /
text-shadow: 1px 1px 2px #888; / Some depth */
color: #333;
}

.content {
/* Improved readability – (Better spacing) / line-height: 1.6;
text-align: justify;  / Neat edges /
word-spacing: 1px; / Small increases between words */
}

.link {
text-decoration: none; /* No underlines on the link /
text-transform: capitalize; / “Read More” */
font-weight: bold;
color: #007bff;
}

.link:hover {
text-decoration: underline; /* Underline on hover only */
}

Check out our resources!

• Bootstrap Templates: Explore our Bootstrap Projects section.
• Free E-Books: Download your Free E-Books here.