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 */
}

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
Copy code
p {
  color: blue; /* Named color */
}
css
Copy code
h1 {
  color: #ff5733; /* Hexadecimal color */
}

2. text-align

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 */
}

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 */
}

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 */
}

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 */
}

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 */
}

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 */
}

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 */
}

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 */
}

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 */
}

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 */
}

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 */
}

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 */
}

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 */
}

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 */
}

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>

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.