CSS Text

  • CSS offers numerous text formatting features to developers. You can format text as desired, using the following:

    • Text colour
    • Text Alignment 
    • Text decoration
    • Text transformation
    • Text spacing and 
    • Text shadow

    Text Colour

    Set the colour of your text with this text property of CSS. To do so, you will need to specify the following:

    • Colour name
    • Its HEX value and 
    • RGB value
     .formatted-text {
        color: #2c7be5;                        /* Text Colour (HEX) */
        text-align: center;                   /* Text Alignment */
        text-decoration: underline overline;  /* Text Decoration */
        text-transform: uppercase;            /* Text Transformation */
        letter-spacing: 2px;                  /* Text Spacing */
        word-spacing: 8px;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);  /* Text Shadow */
    }

    Mind that you can set both the text and the background colour. Ensure the text contrast is high when applying colour to both the text and its background. So, it does not cause a problem for readers with low vision. 

    Text Alignment

    To set the horizontal alignment of the text, you can use this CSS property. It offers the following alignment options:

    • Left aligned
    • Right aligned
    • Center aligned
    • Justified
    .box {
        color: white;                  /* Text color */
        background-color: darkblue;   /* Background color */
        text-align: center;           /* Center alignment */
        padding: 10px;
    }

    To align the last line of the paragraph or any text, use “Text align last.”

    Text Direction

    With the text direction, the direction of an element’s text can be changed.

    .ltr {
        direction: ltr; /* Left to right */
        border: 1px solid #000;
        padding: 5px;
        margin-bottom: 10px;
    }
    .rtl {
        direction: rtl; /* Right to left */
        border: 1px solid #000;
        padding: 5px;
    }

    Vertical Alignment

    Like horizontal text alignment, its vertical alignment can also be changed with CSS.

    .baseline { vertical-align: baseline; }
    .top      { vertical-align: super; }
    .bottom   { vertical-align: sub; }
    .textTop  { vertical-align: text-top; }
    .textBottom { vertical-align: text-bottom; }

    Text Decoration

    A decoration line can be added to the desired text using CSS’s text-decoration-line property. Additionally, this property is not limited to applying a single value to the text. 

    You can add more than one value to make the text stand out. For example, underline and overline values can be used in combination.

    .single {
    	text-decoration-line: underline;
    }
    .multiple {
    	text-decoration-line: underline overline;
    }
    .none {
    	text-decoration-line: none;
    }

    Text Decoration Properties 

    • Text Decoration Colour : This property is used if you want to change the colour of any decoration line. 
    • Text Decoration Style: To set the style of your decoration line, use this. For example, dotted, dashed, underlined, solid, etc.
    • Text Decoration Thickness: The thickness of the decoration line can be changed. If you desire to do so, do it with this CSS property. 
    .custom-decoration {
      text-decoration-line: underline;
      text-decoration-color: red; /* Changes color of underline */
      text-decoration-style: dashed; /* Style can be solid, dotted, dashed, wavy, double */
      text-decoration-thickness: 3px; /* Sets line thickness */
    }

    Generally, when a link is added in HTML, it is underlined by default. If you don’t want the link to be underlined, set the text decoration style to ‘none’. 

    Text Transformation

    To define uppercase and lowercase letters within a text, this CSS text property is used. With this, you can set all the text to be in uppercase, lowercase, or only the first letters capitalized. The choice is yours.

    .uppercase {
      text-transform: uppercase;
    }
    .lowercase {
      text-transform: lowercase;
    }
    .capitalize {
      text-transform: capitalize;
    }

    CSS Text Spacing

    CSS text spacing has the following options:

    • Text indent
    • Letter spacing
    • Line height
    • Word spacing and 
    • White spacing

    Text Indentation

    This CSS spacing property specifies the first line’s indentation of the text.

    .indented {
      text-indent: 40px;
    }

    Letter Spacing

    Using this property, you can specify the space between the characters of a text. Increasing or decreasing this space is entirely up to a developer.

    .spaced {
      letter-spacing: 3px;
    }
    .tight {
      letter-spacing: -1px;
    }

    Line Height

    To add spacing between lines, the line-height property is used.

    .normal {
       line-height: normal;
    }
    .spaced {
      line-height: 2;
    }

    Word Spacing

    When specifying space between two words, the word spacing property is used. Like letter spacing, it can also be increased and decreased.

    .wide {
      word-spacing: 10px;
    }
    .tight {
      word-spacing: -2px;
    }

    White Space

    The CSS text white-space property controls the white space inside the element.

    .normal {
      white-space: normal;
      border: 1px solid #000;
      margin-bottom: 10px;
    }
    .pre {
      white-space: pre;
      border: 1px solid #000;
    }

    CSS Text Shadow 

    To add a shadow to any part of the text, the CSS text-shadow property is used. Whether horizontal or vertical text shadows, the lowest CSS text shadow value is 2px.

    .shadow {
      text-shadow: 2px 2px 4px gray;
      font-size: 24px;
      color: #000;
    }

    It lets you add colour and effects to the shadow. For example, the shadow can be red, white, or any colour with a blur or neon glow effect.

  • HTML
    CSS
    JS
  • Ad #1
    Ad #2
    Scroll to Top