DEV Community

Ranjith srt
Ranjith srt

Posted on • Updated on

Bootcamp 2 - CSS text

CSS text properties help you style and format the text in your webpage. These properties control things like alignment, decoration, transformation, spacing, and more. Let's go over some of the most common CSS text properties:

1. color

The color property sets the color of the text. You can use color names, hexadecimal values, RGB, RGBA, HSL, or HSLA.

Example:
css

p {
  color: blue; /* Named color */
}
css

h1 {
  color: #ff5733; /* Hexadecimal color */
}
Enter fullscreen mode Exit fullscreen mode

CSS text properties help you style and format the text in your webpage. These properties control things like alignment, decoration, transformation, spacing, and more. Let's go over some of the most common CSS text properties:

 1. color 
Enter fullscreen mode Exit fullscreen mode

The color property sets the color of the text. You can use color names, hexadecimal values, RGB, RGBA, HSL, or HSLA.

Example:
css
Copy code
p {
  color: blue; /* Named color */
}
css
Copy code
h1 {
  color: #ff5733; /* Hexadecimal color */
}
Enter fullscreen mode Exit fullscreen mode
2. text-align
Enter fullscreen mode Exit fullscreen mode

The text-align property controls the horizontal alignment of the text inside its container. Common values are:

-left: Aligns text to the left (default for most elements).
-center: Aligns text to the center .

-right: Aligns text to the right.
-justify: Stretches the text so that each line has equal width (spaces between words are adjusted).

Example:
css

p {
  text-align: center;  /* Centers the text */
}

Enter fullscreen mode Exit fullscreen mode

3. text-decoration
The text-decoration property adds decorations to text, such as underlines, overlines, or strikethroughs. Common values are:

-underline: Adds a line below the text.
-overline: Adds a line above the text.
-line-through: Adds a line through the text (strikethrough).
-none: Removes any decoration (e.g., removing underline from links).

Example:
css

a {
  text-decoration: none;  /* Removes underline from links */
}

h2 {
  text-decoration: underline; /* Underlines the text */
}
Enter fullscreen mode Exit fullscreen mode

4. text-transform
The text-transform property controls the capitalization of text. Common values are:

-uppercase: Transforms all text to uppercase.
-lowercase: Tr ansforms all text to lowercase.
-capitalize: Capitalizes the first letter of each word.

Example:
css

h1 {
  text-transform: uppercase;  /* Converts the text to uppercase */
}

p {
  text-transform: capitalize; /* Capitalizes each word */
}
Enter fullscreen mode Exit fullscreen mode

5. letter-spacing
The letter-spacing property controls the space between individual characters (also called tracking). You can increase or decrease the space between letters.

Example:
css

h1 {
  letter-spacing: 2px; /* Adds 2px space between characters */
}

p {
  letter-spacing: -1px; /* Reduces the space between characters */
}
Enter fullscreen mode Exit fullscreen mode

6. word-spacing
The word-spacing property controls the space between words in a sentence.

Example:
css

p {
  word-spacing: 5px; /* Adds 5px space between words */
}
Enter fullscreen mode Exit fullscreen mode

7. line-height
The line-height property sets the space between lines of text (vertical spacing). It is important for readability, especially in paragraphs of text.

Example:
css
 p {
  line-height: 1.6; /* Sets the line height to 1.6 times the font size */
}
Enter fullscreen mode Exit fullscreen mode

8. font-family
The font-family property specifies the font to be used for the text. You can list multiple fonts as fallbacks, in case the first font isn’t available on the user's device.

Example:

css

p {
  font-family: Arial, sans-serif;  /* Uses Arial, or if unavailable, a sans-serif font */
}
Enter fullscreen mode Exit fullscreen mode

9. font-size

The font-size property sets the size of the text. You can use different units like px (pixels), em, rem, %, or predefined size keywords like small, large, etc.

Example:
css

h1 {
  font-size: 24px;  /* Sets the font size to 24 pixels */
}

p {
  font-size: 1.5em;  /* 1.5 times the base font size */
}
Enter fullscreen mode Exit fullscreen mode

10. font-weight
The font-weight pr operty controls the thickness (boldness) of the text. Common values are:

-normal: Regular font weight.
-bold: Bold font weight.
-lighter: Lighter than the normal text.
-bolder: Heavier than the normal text.
-You can also use numeric values like 100 (thin) to 900 (extra bold).

Example:
css

p {
  font-weight: bold;  /* Makes the text bold */
}

h1 {
  font-weight: 700;  /* Uses numeric value for bold */
}
Enter fullscreen mode Exit fullscreen mode

11. font-style
The font-style property is used to make the text italic or oblique (slanted).

-normal: Regular, non-italic text.
-italic: Italic text.
-oblique: Slightly slanted text.

Example:
css

p {
  font-style: italic;  /* Makes the text italic */
}

em {
  font-style: oblique;  /* Makes the text oblique */
}
Enter fullscreen mode Exit fullscreen mode

12. text-indent
The text-indent property controls the indentation of the first line of text in a block.

Example:
css

p {
  text-indent: 40px;  /* Indents the first line by 40px */
}

Enter fullscreen mode Exit fullscreen mode

13. white-space
The white-space property controls how whitespace (spaces, tabs, newlines) inside an element is handled. Common values are:

-normal: Collapses multiple spaces into one.
-nowrap: Prevents text from wrapping to the next line.
-pre: Preserves whitespace and line breaks (like in <pre> tag).

Example:
css

p {
  white-space: nowrap;  /* Prevents text from wrapping */
}

Enter fullscreen mode Exit fullscreen mode

14. text-shadow

The text-shadow property adds shadow effects to text. You can specify the horizontal and vertical offsets, blur radius, and color of the shadow.

Example:
css

h1 {
  text-shadow: 2px 2px 5px gray;  /* Adds a gray shadow with 2px offset and 5px blur */
}

Enter fullscreen mode Exit fullscreen mode

15. direction

The direction property sets the text direction (useful for languages that read right-to-left like Arabic and Hebrew).

-ltr: Left-to-right (default for most languages like English).
-rtl: Right-to-left.

Example:
css

p {
  direction: rtl;  /* Text will be displayed right-to-left */
}

Enter fullscreen mode Exit fullscreen mode

Example Putting It All Together:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    h1 {
      font-family: 'Arial', sans-serif;
      font-size: 24px;
      font-weight: bold;
      color: #ff5733;
      text-align: center;
      text-transform: uppercase;
      text-shadow: 2px 2px 5px gray;
    }

    p {
      font-family: 'Verdana', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      text-align: justify;
      text-indent: 40px;
      letter-spacing: 1px;
      word-spacing: 3px;
      color: #333;
    }
  </style>
</head>
<body>

  <h1>CSS Text Properties Example</h1>
  <p>
    This is an example paragraph demonstrating various text properties in CSS. The text is justified, has custom spacing between words and letters, and the first line is indented. Using CSS text properties, you can control the appearance of text on a webpage to enhance readability and style.
  </p>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

In this example:

-The heading (h1) uses text-shadow, text-align, text-transform, and more.
-The paragraph (p) uses line-height, text-indent, letter-spacing, and more.

Top comments (0)