Formatting and styling text in CSS

Text styling in CSS

CSS provides various text formatting properties which let you allow to style text in different ways. Any website which is under development needs various text styles to look more attractive and effective. Text style properties make your website more revealing and perfectly readable. There are some properties which are commonly used in text styling.

  • text-color and background-color
  • text-align
  • text-decoration
  • text-transform
  • letter-spacing
  • word-spacing
  • text-shadow

Text-color and background-color in CSS

The color of the text is defined by “color” property. The color is specified by color name like “red, green etc”, a hex value like #00fabf and an RGB value like RGB(255, 0, 0).

The background color of any text can be applied using background-color property. Let us write a small code for styling text color and its background color.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:2px solid red;
            width:30%;
            padding:5px;
        }
        p#one{
            color:rgb(211, 92, 7);
            background-color:rgb(207, 193, 138);
        }
        p#two{
            color:rgb(12, 153, 7);
            background-color:rgb(163, 211, 233);
        }   
    </style>
</head>
<body>
    <div class="container">
        <p id="one">The first para is colored with rgb(211, 92, 7) and background-color as rgb(207, 193, 138).
        </p>
        <p id="two">
            The first para is colored with rgb(12, 153, 7) and background-color as rgb(163, 211, 233).
        </p>
    </div>   
</body>
</html>
Text-color and background-color in CSS, www.programmingtutorial.in

text-alignment in CSS

Aligning text in your website is very useful to utilise the space in your website to its fullest. The text can be aligned with the help of text-align property. This property can align text in four ways, left, right, center and justified. Let us now write a simple code to understand it properly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:2px solid red;
            width:25%;
            padding:5px;
        }
        p#one{
            text-align: left;
            border:1px solid green;
        }
        p#two{
            text-align: right;
            border:1px solid green;
        }  
        p#three{
            text-align: center;
            border:1px solid green;
        }   
        p#four{
            text-align: justify;
            border:1px solid green;
        }    
    </style>
</head>
<body>
    <div class="container">
        <h3>Left aligned text</h3>
        <p id="one">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam culpa, commodi id, ut ratione animi aperiam alias iusto deserunt inventore doloremque sequi incidunt laboriosam itaque distinctio. Ullam natus hic reprehenderit.
        </p>
        <h3>Right aligned text</h3>
        <p id="two">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, sit. Earum fugit, impedit esse rem harum reprehenderit vitae quasi corporis neque qui, cumque fuga sequi quia. Quia autem asperiores odit!
        </p>
        <h3>Centered aligned text</h3>
        <p id="three">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, sit. Earum fugit, impedit esse rem harum reprehenderit vitae quasi corporis neque qui, cumque fuga sequi quia. Quia autem asperiores odit!
        </p>
        <h3>Justify aligned text</h3>
        <p id="four">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, sit. Earum fugit, impedit esse rem harum reprehenderit vitae quasi corporis neque qui, cumque fuga sequi quia. Quia autem asperiores odit!
        </p>
    </div>   
</body>
</html>
text-alignment in CSS, www.programmingtutorial.in

text-decoration in CSS

The text-decoration property is used to remove or keep different decoration of text. This property takes the following values underline, overline, line-through and none. Let us now write a code for text-decoration property.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:2px solid red;
            width:25%;
            padding:5px;
        }
        p#one{
            text-decoration: underline;           
        }
        p#two{
            text-decoration: overline;            
        }  
        p#three{
            text-decoration: line-through;           
        }   
        p#four{
            text-decoration: none;
        }    
    </style>
</head>
<body>
    <div class="container">
        <h3>Underlined text</h3>
        <p id="one">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, dolores?
        </p>
        <h3>Overlined text</h3>
        <p id="two">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, doloremque?
        </p>
        <h3>Line through text</h3>
        <p id="three">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, facere?
        </p>
        <h3>Text-decoration as none</h3>
        <p id="four">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, consequuntur!
        </p>
    </div>   
</body>
</html>
text-decoration in CSS, www.programmingtutorial.in

text-transformation in CSS

This property of CSS is used to set the case of text. In our normal scripting, the text is usually inserted in mixed case, but the situation may come where you need to style your text in some particular case. It may be in uppercase, lowercase or in capitalise case. To style your text in particular case you can easily use text-transform property of CSS. Let us understand this property with the help of code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:2px solid red;
            width:25%;
            padding:5px;
        }
        p#one{
            text-transform: uppercase;           
        }
        p#two{
            text-transform: lowercase;            
        }  
        p#three{
            text-transform: capitalize;           
        }   
    </style>
</head>
<body>
    <div class="container">
        <h3>Uppercase text example</h3>
        <p id="one">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, dolores?
        </p>
        <h3>Lowercase text example</h3>
        <p id="two">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, doloremque?
        </p>
        <h3>Capitalize text example</h3>
        <p id="three">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, facere?
        </p>
    </div>   
</body>
</html>
text-transformation in CSS, www.programmingtutorial.in

letter-spacing in CSS

The letter-spacing property applies to show spacing among the letters of a paragraph or sentence. This property takes the value in pixels, em and some other format. It can also take negative values.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:2px solid red;
            width:25%;
            padding:5px;
        }
        p#one{
            letter-spacing: 5px;           
        }
        p#two{
            letter-spacing: -3px;            
        }  
        p#three{
            letter-spacing: 10px;           
        }   
    </style>
</head>
<body>
    <div class="container">
        <h3>Letter spacing 5px example</h3>
        <p id="one">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, dolores?
        </p>
        <h3>Letter spacing -3px example</h3>
        <p id="two">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, doloremque?
        </p>
        <h3>Letter spacing 10px example</h3>
        <p id="three">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, facere?
        </p>
    </div>   
</body>
</html>
letter-spacing in CSS, www.programmingtutorial.in

word-spacing in CSS

The word-spacing property applies to show spacing among the words of a paragraph or sentence. This property takes the value in pixels, em and some other format. It can also take negative values. Let us take an example code of word spacing.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:2px solid red;
            width:25%;
            padding:5px;
        }
        p#one{
            word-spacing: 5px;           
        }
        p#two{
            word-spacing: -3px;            
        }  
        p#three{
            word-spacing: 25px;           
        }   
    </style>
</head>
<body>
    <div class="container">
        <h3>Word spacing 5px example</h3>
        <p id="one">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, dolores?
        </p>
        <h3>Word spacing -3px example</h3>
        <p id="two">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, doloremque?
        </p>
        <h3>Word spacing 25px example</h3>
        <p id="three">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, facere?
        </p>
    </div>   
</body>
</html>
word-spacing in CSS, www.programmingtutorial.in

text-shadow in CSS

The text-shadow applies to text to produce its shadow. In its simplest form, you can use horizontal and vertical values in pixels. You can also apply color to the shadow as well as blur effect to the text. Let us understand it with the help of code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:2px solid red;
            width:25%;
            padding:5px;
        }
        p#one{
            text-shadow: 1.5px 1.5px;
            font-size: 20px;           
        }
        p#two{
            text-shadow: 1.5px 1.5px blue;
            font-size: 20px;              
        }  
        p#three{
            text-shadow: 1.5px 1.5px 5px rgb(180, 3, 3);  
            font-size: 20px;          
        }   
    </style>
</head>
<body>
    <div class="container">
        <h3>Simple text shadow</h3>
        <p id="one">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, dolores?
        </p>
        <h3>Text shadow with color</h3>
        <p id="two">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, doloremque?
        </p>
        <h3>Text shadow with color and blur</h3>
        <p id="three">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, facere?
        </p>
    </div>   
</body>
</html>
text-shadow in CSS, www.programmingtutorial.in