Loading

CSS Text

  • In CSS  text can be styled in a variety of ways to control its appearance on a web page. 
  • We can change properties such as font size, color, and alignment,  to achieve the desired visual effect. 

Text properties and their usage

Font Properties:

  • font-family: Indicates the font family for text.
  • font-size: Sets the size of the text.
  • font-weight: Controls the thickness of the text.
  • font-style: Defines the style of the text (italic, oblique, normal).
p {
 font-family: Arial, sans-serif;
 font-size: 16px;
 font-weight: bold;
 font-style: italic;
}

Text Color:

  • Sets the color of the text.
p {
color: #333;
}

Text Alignment:

  • text-align: Aligns text within its container (left, center, right, justify).
p {
text-align: center;
}

Text Decoration:

  • text-decoration: Adds or removes text decorations (underline, overline, line-through, none).
a {
 text-decoration: underline;
}

Line Height:

  • line-height: Sets the vertical space between lines of text.
p {
 line-height: 1.5;
}

Text Transform:

  • text-transform: Transform the text (uppercase, lowercase, capitalize).
h1 {
 text-transform: uppercase;
}

Letter Spacing:

  • letter-spacing: Adjusts the space between characters.
h2 {
 letter-spacing: 2px;
}

Text Shadow:

  • text-shadow: Adds a shadow effect to the text.
h3 {
 text-shadow: 2px 2px 4px #000;
}

Example:

<html>

<head>
</head>

<body>
        <h2>Text Color</h2>
        <p style="color: blueviolet;"> Color Name </p>
        <p style="color: rgb(255,124,100);"> RGB value </p>
</body>

</html>

Output:

Text Color

Color Name

RGB value