CSS Text

❮ Prev Next ❯

Text is a fundamental component of web design, and CSS provides a plethora of tools to style and manipulate it. Whether you're adjusting fonts, colors, spacing, or alignment, understanding CSS text properties is essential for creating visually appealing and readable content.

Let's dive into the world of CSS text styling step by step.

Font Properties

Fonts play a significant role in defining the appearance of text on a webpage. CSS offers several properties to control font styles, including:

  • font-family: Specifies the typeface or font family to be used.
  • font-size: Sets the size of the font, typically in pixels (px), ems (em), or percentages (%).
  • font-weight: Determines the thickness or boldness of the font.
  • font-style: Specifies whether the font should be italic, oblique, or normal.

Text Color and Decoration

Color and decoration can greatly impact the readability and visual appeal of text. CSS provides properties to control these aspects:

  • color: Sets the color of the text.
  • font-size: Sets the size of the font, typically in pixels (px), ems (em), or percentages (%).
  • text-decoration: Adds decoration to the text, such as underline, line-through, or overline.
  • text-transform: Alters the capitalization of the text, converting it to uppercase, lowercase, or capitalized.

Text Alignment and Spacing

Proper alignment and spacing are crucial for ensuring readability and aesthetics. CSS offers properties to adjust text alignment and spacing:

  • text-align: Specifies the horizontal alignment of the text, such as left, right, center, or justified.
  • line-height: Sets the height of each line of text, improving readability and aesthetics.
  • letter-spacing: Adjusts the spacing between characters.
  • word-spacing: Controls the spacing between words.

Text Shadow and Overflow

Adding subtle effects like shadows can enhance the visual appeal of text. Additionally, managing text overflow ensures that content remains within its designated space:

  • text-shadow: Creates a shadow effect behind the text, adding depth and dimension.
  • overflow: Determines how text behaves when it exceeds its container's boundaries, controlling whether it's clipped, hidden, or displayed with scrollbars.

Using CSS Units for Text Properties

CSS units provide flexibility and precision when specifying text-related properties:

  • Absolute Units: Include pixels (px) and points (pt) and offer fixed measurements.
  • Relative Units: Such as ems (em) and percentages (%), are relative to the font size of the parent element, providing scalability and adaptability.

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
        .box{
          color :green;
          text-align :center;
          letter-spacing :3;
          word-spacing :2;
          font-weight :bolder;
          text-transform :uppercase;
        } 
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <h3>welcome to Coding Koleji </h3>
      <p class="box">this is outline</p>
    </body>
  </html>

CSS text styling is a versatile toolset that allows you to customize the appearance and behavior of text on your webpage. By mastering font properties, color, alignment, spacing, and other text-related properties, you can create visually appealing and engaging content that enhances the overall user experience. Keep experimenting with different styles and techniques to unlock the full potential of CSS text styling.

❮ Prev Next ❯