CSS Text

One of the most fundamental aspects of web design is how text is presented. CSS offers a wide variety of properties and values to control the appearance of text on a webpage. In this documentation, we will cover the essential CSS text-related properties, their functions, and provide examples of how to use them.

1. Text Color (color)

The color property is used to specify the color of the text. It can take predefined color names, HEX codes, RGB values, RGBA (which allows for transparency), HSL, and HSLA.
Example:

<p style="color: blue;">This is blue text.</p>
<p style="color: #ff5733;">This is text with a HEX color (#ff5733).</p>
<p style="color: rgb(255, 99, 71);">This is text using an RGB value.</p>
<p style="color: rgba(255, 99, 71, 0.5);">This is semi-transparent text using RGBA.</p>

2. Text Alignment (text-align)

The text-align property specifies the horizontal alignment of text within an element. It can take values such as left, right, center, and justify.
Example:

<p style="text-align: left;">This text is left-aligned.</p>
<p style="text-align: center;">This text is centered.</p>
<p style="text-align: right;">This text is right-aligned.</p>
<p style="text-align: justify;">This text is justified. This means the text will spread out to align evenly on both the left and right sides of the container.</p>

3. Text Decoration (text-decoration)

The text-decoration property adds decorative effects to text, like underlining, overlining, or striking through text. It can also be used to remove the default underline on links.
Common Values:

• underline
• overline
• line-through
• none

Example:

<p style="text-decoration: underline;">This text is underlined.</p>
<p style="text-decoration: overline;">This text has an overline.</p>
<p style="text-decoration: line-through;">This text has a line-through (strikethrough).</p>
<p style="text-decoration: none;">This text has no decoration.</p>

4. Text Transform (text-transform)

The text-transform property controls the capitalization of text. It can be used to make text uppercase, lowercase, or capitalize the first letter of each word.
Common Values:

• uppercase
• lowercase
• capitalize
• none

Example:

<p style="text-transform: uppercase;">This text is uppercase.</p>
<p style="text-transform: lowercase;">THIS TEXT IS LOWERCASE.</p>
<p style="text-transform: capitalize;">this text is capitalized.</p>

5. Text Indentation (text-indent)

The text-indent property is used to specify the indentation of the first line of a block of text. It can take length values like px, em, %, etc.
Example:

<p style="text-indent: 50px;">This paragraph has the first line indented by 50px.</p>
<p style="text-indent: 5em;">This paragraph has the first line indented by 5em.</p>

6. Line Height (line-height)

The line-height property specifies the amount of space between lines of text. It can take a number, a length, or a percentage value.
Example:

<p style="line-height: 1.5;">This text has a line-height of 1.5, which increases the space between lines.</p>
<p style="line-height: 2em;">This text has a line-height of 2em.</p>

7. Text Shadow (text-shadow)

The text-shadow property adds shadow effects to text. It takes four values: horizontal shadow, vertical shadow, blur radius, and color.
Example:

<p style="text-shadow: 2px 2px 5px rgba(0,0,0,0.5);">This text has a shadow.</p>
<p style="text-shadow: 1px 1px 3px red;">This text has a red shadow.</p>

8. Letter Spacing (letter-spacing)

The letter-spacing property controls the space between characters in text. It can be set to any length value.
Example:

<p style="letter-spacing: 2px;">This text has a letter spacing of 2px.</p>
<p style="letter-spacing: -1px;">This text has a letter spacing of -1px, making the letters closer together.</p>

9. Word Spacing (word-spacing)

The word-spacing property controls the space between words in text.
Example:

<p style="word-spacing: 10px;">This text has a word spacing of 10px.</p>
<p style="word-spacing: -5px;">This text has a word spacing of -5px, making the words closer together.</p>

10. White Space (white-space)

The white-space property controls how white space inside an element is handled. This includes spaces, tabs, and newlines.
Common Values:

• normal: Collapses whitespace (default).
• nowrap: Prevents text from wrapping.
• pre: Preserves all white space and line breaks (like the <pre> element).
• pre-wrap: Preserves white space but allows wrapping.
• pre-line: Collapses extra whitespace but preserves line breaks.

Example:

<p style="white-space: nowrap;">This is a paragraph with no wrapping allowed, so it will stay on one line.</p>
<p style="white-space: pre;">   This is a paragraph with preserved whitespace
   and line breaks.  </p>
<p style="white-space: pre-wrap;">This is a paragraph with preserved whitespace and line breaks, but wrapping is allowed.</p>