Text Properties in CSS: A Comprehensive Reference Guide

Text is the backbone of any web page, and CSS offers a powerful toolkit to control its visual presentation. This guide dives deep into text properties, empowering you to craft elegant and engaging user experiences.

Text Alignment: Setting the Stage

text-align

This essential property dictates how text flows within its container. Common values include left, center, right, and justify.

                        
.text-center {

  text-align: center;

}



.text-justify {

  text-align: justify;

}

                        
                    

text-indent

Indent the first line of a paragraph for emphasis. Use positive values for indenting and negative for outdenting.

                        
p {

  text-indent: 2em;

}
                            
                        
                    

text-align-last

Control the alignment of the last text line in a block. Useful for centering or right-aligning headings.

                        
h1 {

  text-align: center;

  text-align-last: right;

}
                            
                        
                    

Text Decoration: Adding Style and Flair

text-decoration

Add underlines, overlines, or strikethroughs to your text. Values include underline, overline, line-through, and none.

                        
.link:hover {

  text-decoration: underline;

}



.error {

  text-decoration: line-through;

}
                            
                        
                    

text-decoration-style

Customize the style of the underline. Options like dotted, dashed, and wavy offer creative possibilities.

                        
.fancy-link {

  text-decoration: underline;

  text-decoration-style: dotted;

}
                            
                        
                    

text-decoration-color

Define a unique color for the decoration, independent of the text color.

                        
.call-to-action {

  text-decoration: underline;

  text-decoration-color: #ff0000;

}
                    
                        
                    

Line-Height: Breathing Space for Readability

line-height

Adjust the vertical spacing between lines of text. Optimal values depend on font size and desired reading experience.

                        
p {

  line-height: 1.5em;

}



h1 {

  line-height: 1.2em;

}
                            
                        
                    

letter-spacing

Control the horizontal spacing between individual letters. Use sparingly to avoid excessive gaps or cramped text.

                        
.title {

  letter-spacing: 2px;

}
                   
                        
                    

word-spacing

Adjust the space between words within a line. Useful for specific layouts or emphasizing keywords.

                        
.important-text {

  word-spacing: 5px;

}
                            
                        
                    

Advanced Techniques for Text Mastery

Font Shorthand:

Combine several font properties like font-family, font-size, and font-weight for concise styling.

                        
h2 {

  font: 2em Arial, sans-serif;

}
                       
                        
                    

Text Transform:

Capitalize, lowercase, or uppercase specific characters. Use with caution to avoid confusing users.

                        
.brand-name {

  text-transform: uppercase;

}

                        
                    

Hyphenation:

Control how words are broken at line breaks. Use hyphenate: auto for automatic hyphenation or hyphenate: none to disable it.

                        
body {

  hyphenate: auto;

}

                        
                    

By mastering the art of text properties in CSS, you unlock the potential to elevate your designs from functional to captivating. From precise alignment and vibrant decorations to optimal spacing and subtle typographic nuances, each property offers a powerful tool to craft experiences that inform, engage, and resonate with your users.