CSS Text



CSS provides many properties that defines various text styles such as alignment,color,spacing,transformation,decoration.

CSS text propeerties are

  • color
  • text-align
  • text-indent
  • text-transform
  • text-decoration
  • line-height
  • word-spacing
  • letter-spacing

CSS text Color

In this part we will cover how to add text color in css.

The color property is used to set the text color

Example

<!DOCTYPE html>
    <html>
    <head>
    <title>Setting Text Color using CSS</title>
    <style>
        h1 {
            color: red;
        }
        p {
            color: pink;
        }
    </style>
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>This is a simple paragraph of text.</p>
    </body>
    </html>   
    


Click on the "Run This Code" button to see how it works.

CSS text-align

In this part we will cover text alignment css

The text-align property is used to align text horizontally.

Example

<!DOCTYPE html>
    <html>
    <head>
    <title>Setting Text Alignment using CSS</title>
    <style>
        h1 {
            text-align: center;
        }
        p {
            width: 300px;
            text-align: justify;
        } 
    </style>
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>paragraph Content</p>
    </body>
    </html>  
    


Click on the "Run This Code" button to see how it works.

CSS text-indent

In this Part we will cover text indent in css.

The text-indent property is used to indent the text first line of the paragraph.

Example

<!DOCTYPE html>
    <html>
    <head>
    <title>Setting Text Indentation using CSS</title>
    <style> 
        p {
            text-indent: 150px;
        }       
    </style>
    </head>
    <body>
        <h1>CSS Text Indentation</h1>
        <p>Paragraph Content</p>
    </body>
    </html>
    


Click on the "Run This Code" button to see how it works.

CSS text-transform

The text-indent property is used to add text cases.

Example

<!DOCTYPE html>
<html>
<head>
<title>Setting Text Transformation using CSS</title>
<style>
    h1 {
        text-transform: uppercase;
    }
    h2 {
        text-transform: capitalize;
    }
    h3 {
        text-transform: lowercase;
    }
</style>
</head>
<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
</body>
</html>  


Click on the "Run This Code" button to see how it works.

CSS text-decoration

The text-decoration is used to add or remove decorations from text.

Example

<!DOCTYPE html>
    <html>
    <head>
    <title>Setting Text Decoration using CSS</title>
    <style>            
        h1 {
            text-decoration:overline;
        }
        h2 {
            text-decoration:line-through;
        }
        h3 {
            text-decoration:underline;
        }
    </style>
    </head>
    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </body>
    </html>
    


Click on the "Run This Code" button to see how it works.

CSS line-height

The line-height is used to set height of the text.

Example

<!DOCTYPE html>
    <html>
    <head>
    <title>Line Height using CSS</title>
    <style>  
        p {
            font-size: 15px;
            line-height: 50px;
            background-color: pink;
        }  
    </style>
    </head>
    <body>
        <h1>Change the values to see how it works.</h1>
        <p>The line-height property sets the height between lines of text.<br> The line height of this paragraph is specified using pixels value.</p>
    </body>
    </html>
    


Click on the "Run This Code" button to see how it works.

CSS word-spacing

The word-spacing is used to add spacing between the words.

Example

<!DOCTYPE html>
    <html >
    <head>
    <title>Setting word spacing using CSS</title>
    <style> 
        p.a {
            word-spacing: 20px;
        }
        p.b {
            width: 150px;
            word-spacing: 20px;
            text-align: justify;
        }
        p.c {
            word-spacing: 20px;
            white-space: pre;
        }      
    </style>
    </head>
    <body>
        <p class="a">This is a normal paragraph.</p>
        <hr>
        <p class="b">Note that spacing between the words of this paragraph are varying in order to justify the text even if the value of word-spacing property is set to 20px.</p>
        <hr>
        <p class="c">Note that spacing between the words
        of this paragraph are higher than the normal spacing
            even if whitespace are preserved.</p>
    </body>
    </html>                            
    


Click on the "Run This Code" button to see how it works.

CSS letter-spacing

The letter-spacing is used to set the add the height of the text line.

Example

<!DOCTYPE html>
<html>
<head>
<title>Setting Line Height using CSS</title>
<style>       
    p {
        line-height: 1.3;
        border: 1px solid red;
    }
    div {
        line-height: 300%;
        border: 1px solid pink;
    }
</style>
</head>
<body>
    <h1>Change the values to see how it works</h1>
    <p>Theline-height property sets the height between lines of text.<br> The line height of this paragraph is specified using number.</p>
    <div>The line-height property sets the height between lines of text.<br> The line height of this paragraph is specified using percentage.</div>
</body>
</html>


Click on the "Run This Code" button to see how it works.




CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units