Text in CSS Language

Cascading Style Sheets (CSS) is a fundamental technology for web development that empowers developers to control the presentation of web content. One crucial aspect of web design is m

anipulating text, from adjusting fonts and colors to handling alignment and spacing. In this post, we will explore the various ways you can work with text in CSS, using practical examples to illustrate each concept.

1. Changing Font Family and Size:
   One of the most common text-related tasks in CSS is modifying the font family and size. You can use the font-family property to specify the font, and font-size to set the text size. Here’s an example:

/* CSS */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

2. Changing Text Color:
   To change the color of text, you can use the color property. You can specify colors using names, hex codes, or RGB values:

/* CSS */
p {
  color: #FF5733; /* Hex code for a red color */
}

3. Text Alignment:
   To control text alignment within an element, you can use the text-align property. Here’s how you can align text to the center of a container:

/* CSS */
.center-text {
  text-align: center;
}

4. Text Decoration:
   CSS allows you to add various decorations to text, such as underlines, overlines, and more. You can use the text-decoration property to apply these styles:

/* CSS */
a {
  text-decoration: underline;
}

5. Letter Spacing and Line Height:
   You can adjust the space between letters and lines using the letter-spacing and line-height properties, respectively:

/* CSS */
h1 {
  letter-spacing: 2px;
  line-height: 1.5;
}

6. Text Shadow:
   To create a shadow effect behind your text, you can use the text-shadow property. The following example adds a shadow to the text:

/* CSS */
h2 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

7. Text Transformation:
   CSS allows you to change the capitalization of text using the text-transform property. For example, you can transform text to uppercase:

/* CSS */
button {
  text-transform: uppercase;
}

8. Text Overflow and Wrapping:
   To control how text overflows its container and how it wraps to the next line, you can use properties like overflow and white-space:

/* CSS */
.ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}