TEXT PROPERTIES

CSS Text-shadow

As its name implies, this CSS property adds shadows to the text. It accepts the comma-separated list of shadows that applied to the text. It's default property is none. It applies one or more than one text-shadow effect on the element's text content.
Let's see the syntax of text-shadow property.
Syntax :

    text-shadow: h-shadow v-shadow blur-radius color| none | initial | inherit;

Values :

h-shadow : It's the required value. It specifies the position of the horizontal shadow and allows negative values.

v-shadow : It's also the required value that specifies the position of the vertical shadow.It doesn't allow negative values.

blur-radius : It's the blur-radius, which is an optional value. Its default value is 0.

color : It's the color of the shadow and also an optional value.

none : It's the default value, which means no shadow.

initial : It's used to set the property to its default value.

inherit : It simply inherits the property from its parent element.

    < !DOCTYPE html>   
    < html>   
    < head>   
    < title> CSS Text-Shadow < /title>   
    < style>   
        p.simple{  
            text-shadow: 3px 3px blue;  
        }  
    < /style>   
    < /head>
    < body>
        < p class="simple">CSS Text-shadow< /p>
    < /body>
    < /html>

Output :

CSS Text-shadow

Eg : Fuzzy Shadow :

    < !DOCTYPE html> 
    < html> 
    < head> 
    < title>Fuzzy Shadow< /title> 
    < style> 
        p.fuzzy{
            text-shadow: 3px 3px 3px violet;
            font-size:30px;
            text-align:center;
        }
    < /style> 
    < /head> 
    < body> 
        < p class="fuzzy">Fuzzy Shadow< /p> 
    < /body> 
    < /html>

Output :

Fuzzy Shadow

Eg: Multiple Shadows :

    < !DOCTYPE html> 
    < html> 
    < head> 
    < title>Multiple Shadows< /title> 
    < style> 
        p.multi{
            text-shadow: -3px -3px 3px blue, 3px 3px 3px red;
            font-size:30px;
            text-align:center;
        }
    < /style> 
    < /head>   
    < body> 
        < p class="multi">Multiple Shadows< /p> 
    < /body> 
    < /html>

Output :

Multiple Shadows

Eg: Glow Effect :

    < !DOCTYPE html> 
    < html> 
    < head> 
    < title>Glow Effect< /title> 
    < style> 
        .multi{
            text-shadow: 0 0 .1em red;
            background-color: lightblue;
            font-size:50px;
            text-align:center;
        }
    < /style> 
    < /head> 
    < body> 
        < div class="multi">Glow Effect< /div> 
    < /body> 
    < /html>

Output :

Glow Effect

CSS text-transform

This CSS property allows us to change the case of the text. It is used to control the text capitalization. This CSS property can be used to make the appearance of text in all-lowercase or all-uppercase or can convert the first character of each word to uppercase.
Syntax

    text-transform: capitalize| uppercase | lowercase | none | initial | inherit;

Let's discuss its property values along with an example.
capitalize : It transforms the first character of each word to uppercase. It will not capitalize the first letter after the number. It only affects the first letters of the words instead of changing the rest of the letters in the word.
Eg:

    < !DOCTYPE html>   
    < html>      
    < head>   
    < title>CSS text-transform Property< /title>   
    < style>   
        body{ text-align:center; }  
        h1 { color: blue; }    
        p{ text-transform: capitalize; }
    < /style>   
    < /head>   
    < body>   
        < h1>CSS text-transform property< /h1>
        < h2>text-transform: capitalize< /h2>
        < p>hello world< /p>
        < p>WELCOME to the TesDBAcademy< /p>
    < /body>
    < /html>

Output :

CSS text-transform property

text-transform: capitalize

hello world

WELCOME to the TesDBAcademy

uppercase : As its name implies, it transforms all characters of the word into uppercase.

    < !DOCTYPE html>   
    < html>     
    < head>    
    < title>CSS text-transform Property< /title>   
    < style>   
        body{ text-align:center; }  
        h1 { color: blue;}
        p{ text-transform: uppercase; }
    < /style>   
    < /head>   
    < body>
        < h1>CSS text-transform property< /h1>
        < h2>text-transform: uppercase< /h2>
        < p>hello world< /p>
        < p>WELCOME to the TesDBAcademy< /p>
    < /body>
    < /html>

Output :

CSS text-transform property

text-transform: uppercase

hello world

WELCOME to the TesDBAcademy

lowercase :
It transforms all characters of the word into lowercase.

    < !DOCTYPE html>   
    < html>     
    < head>    
    < title>CSS text-transform Property< /title>   
    < style>   
        body{ text-align:center; }  
        h1 { color: blue;}
        p{ text-transform: lowercase; }
    < /style>   
    < /head>   
    < body>
        < h1>CSS text-transform property< /h1>
        < h2>text-transform: lowercase< /h2>
        < p>hello world< /p>
        < p>WELCOME to the TesDBAcademy< /p>
    < /body>
    < /html>

Output :

CSS text-transform property

text-transform: uppercase

hello world

WELCOME to the TesDBAcademy

Note : There's another Property (i.e) none
none
It is the default value that has no capitalization. It renders the text as it is.
Syntax :

    text-transform: none;

CSS text-indent
This CSS property sets the indentation of the first line in a block of text. It specifies the amount of horizontal space that puts before the lines of text. It allows the negative values, and if any negative value is defined, then the indentation of the first line will be towards left.
Syntax

    text-indent: length | inherit | initial;

This property has the value length, but here, we will discuss its experimental values.
Values

length: This value sets the fix indentation with the units cm, pt, em, px, and others. Its default value is 0. It allows negative values. The indentation of the first line is on the left when its value is negative.

percentage: It specifies the amount in space in the percentage of the width of the containing block.

initial: It sets the property to its default value. This CSS property has two experimental values, which are discussed as follows. These two following values are not supported in browsers.

hanging: It is unofficial and experimental value. It inverts the indented lines. It indents each line except the first. Usually, bibliographies are written with the hanging indents, in which the first line is with the left-hand margin, and the rest of the content is indented.

each-line: It is also an experimental value. It affects every line, including the first line after a forced line break (using < br>).

Example In this example, we are using the text-indent property with the length values in px, em, and cm. We are also applying the text-align: justify; property in order to see the better results.

    < !DOCTYPE html>
    < html>
    < head>
    < title>CSS text-indent Property< /title>   
    < style>   
            div{ font-size: 10px; width: 400px; height:100px; text-align: justify; }

            .jtppx { text-indent: 70px; }          
            
            .jtpem { text-indent: -2em; }  
            
            .jtpcm { text-indent: 5cm; }   
    < /style>   
    < /head>   
    < body>   
        < center>  
            < h1>Example of text-indent Property< /h1>   
            < h2>text-indent: 70px;< /h2>   
            < div class = "jtppx">   
            Hi, Welcome to the TesDBAcademy.com.The TesDBAcademy.com is always providing an easy and in-depth tutorial on 
            various technologies. TesDBAcademy.com will make you understand in a easy way to understand the knowledge.Now we are 
            going to see the example of background-attachment property. It is the default value that prevents the element from 
            scrolling with the contents, but scrolls with the page.  
            < /div>   
            < h2>text-indent: -5em;< /h2>   
            < div class = "jtpem">   
            Hi, Welcome to the TesDBAcademy.com.The TesDBAcademy.com is always providing an easy and in-depth tutorial on 
            various technologies. TesDBAcademy.com will make you understand in a easy way to understand the knowledge.Now we are 
            going to see the example of background-attachment property. It is the default value that prevents the element from 
            scrolling with the contents, but scrolls with the page.  
            < /div>   
            < div class = "jtpcm"> 
            Hi, Welcome to the TesDBAcademy.com.The TesDBAcademy.com is always providing an easy and in-depth tutorial on 
            various technologies. TesDBAcademy.com will make you understand in a easy way to understand the knowledge.Now we are 
            going to see the example of background-attachment property. It is the default value that prevents the element from 
            scrolling with the contents, but scrolls with the page.
            < /div> 
        < /center>  
    < /body>   
    < /html>

Output :

Example of text-indent Property

text-indent: 70px;

Hi, Welcome to the TesDBAcademy.com.The TesDBAcademy.com is always providing an easy and in-depth tutorial on various technologies. Now we are going to see the example of background-attachment property. It is the default value that prevents the element from scrolling with the contents, but scrolls with the page.

text-indent: -5em;

text-indent: 7cm;

CSS text-decoration

It is a CSS property that decorates the content of the text. It adds lines under, above, and through the text. It sets the appearance of decorative lines on text. This CSS property decorates the text with several kinds of lines. This is shorthand for text-decoration-line, text-decoration-color, and text-decoration-style.
Syntax :

    text-decoration: text-decoration-line text-decoration-color text-decoration-style|initial|inherit;

text-decoration-line
It sets the kind of text-decoration like overline, underline, or line-through. It can be used to add a combination of lines to the selected text.
Eg:

    < !DOCTYPE html>   
    < html>   
    < head>   
    < title>text-decoration< /title>   
    < style>   
        h1{ color: red;}   
        h2{ color: blue;}         
        body{ text-align: center; }   
        p{ font-size: 20px; }  
        #p1{ text-decoration: underline; }   
        #p2{ text-decoration: line-through; }   
        #p3 { text-decoration: overline; }   
        #p4 { text-decoration: overline underline line-through; }   
    < /style>   
    < /head>      
    < body>   
        < h1>Welcome to the tesdbacademy.com< /h1>   
        < h2>text-decoration: text-decoration-line;< /h2>   
        < div>   
            < p id="p1">This is underline< /p>   
            < p id="p2">This is line-through< /p>   
            < p id="p3">This is overline< /p>   
            < p id="p4">This is the combination of lines< /p>   
        < /div>   
    < /body>   
    < /html>

Output :

Welcome to the tesdbacademy.com

text-decoration: text-decoration-line;

This is underline

This is line-through

This is overline

This is the combination of lines

« Previous Next Topic » (CSS - Font Properties)