CSS text styling

CSS text styling is one of the main ways to customize the look of a website or web application. With the various property and value options available, you can create amazing visual effects, from simple color and size changes to animations and transition effects.

Text styling properties in CSS

To style text in an HTML document, CSS provides several properties that can be applied to text elements. Some of the main ones are:

• color: sets the text color;
• font-family: defines the typeface used in the text;
• font-size: defines the font size used in the text;
• font-weight: defines the weight of the font used in the text;
• text-align: defines the alignment of the text within the element;
• text-decoration: defines the text decoration, such as underline or strikethrough;
• text-transform: defines the transformation of the text, as uppercase or lowercase;
• line-height: sets the height of the text line;
• letter-spacing: sets the spacing between letters in the text;
• word-spacing: sets the spacing between words in the text;

In addition to these properties, CSS also provides other options for text styling, such as shadows, borders, transitions, and animations.

CSS text styling examples

Here are some examples of how you can style text in CSS:

Changing the text color

To change the text color, just use the color property and define the desired color value in hexadecimal, RGB or name:

  
    P {
      color: #ff0000; /* red */
    }
  

Changing font size

To change the font size, just use the font-size property and define the desired value in pixels, em or rem:

  
    P {
      fontsize: 16px; /* default size */
    }

    h1 {
      fontsize: 32px; /* Big size */
    }

    small {
      font-size: 12px; /* small size */
    }
  

Changing the typeface

To change the typographic family used in the text, just use the font-family property and define the name of the desired font:

  
    P {
      font-family: Arial, sans-serif; /* default font */
    }

    h1 {
      font-family: "Helvetica Neue", sans-serif; /* different font */
    }
  

Applying shadow to text

To apply a shadow to the text, just use the text-shadow property and set the offset, blur and color values:

  
    h1 {
      text-shadow: 2px 2px 2px #000000; /* black shadow */
    }
  

Applying animation to text

To apply animation to the text, just use the animation property and define the duration, direction, padding and other values:

  
    h1 {
      animation: myanimation 2s linear infinite;
    }

    @keyframes myanimation {
      0% { color: #ff0000; }
      50% { color: #00ff00; }
      100% { color: #0000ff; }
    }
  

Conclusion

CSS text styling offers several options for customizing the look of a website or web application. With the right properties and values, you can create amazing visual effects and make your content stand out properly. It is important to remember, however, that styling should be used sparingly and always with usability and user accessibility in mind.

Next page of the Free Ebook:

12Link Styling in CSS

3 minutes