CSS

CSS Text Properties

  1. Text Color : The color property is used to set the color of the text.
    Example :
    h1 {
        color: green;
    }
    
  2. Text Alignment : The text-align property is used to set the horizontal alignment of a text.
    Example :
    h1 {
        text-align: center;  //Others : values (left,right)
    }
    
    Example :
    div {
        text-align: justify;
    }
    
    When the text-align property is set to justify, each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):
  3. Text Decoration :The text-decoration property is used to set or remove decorations from text. The value text-decoration: none; is often used to remove underlines from links:
    Example :
    a {
        text-decoration: none;
    }
    
    The other text-decoration values are used to decorate text:
    Example :
    h1 {
        text-decoration: overline;
    }
    
    h2 {
        text-decoration: line-through;
    }
    
    h3 {
        text-decoration: underline;
    }
    
  4. Text Transformation :The text-transform property is used to specify uppercase and lowercase letters in a text.It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:
    Example :
    <head>
    <style>
    .uppercase {
        text-transform: uppercase;
    }
    
    .lowercase {
        text-transform: lowercase;
    }
    
    .capitalize {
        text-transform: capitalize;
    }
    </style>
    </head>
    
  5. Text Indentation : The text-indent property is used to specify the indentation of the first line of a text:
    Example :
    p {
        text-indent: 50px;
    }
    
  6. Letter Spacing : The letter-spacing property is used to specify the space between the characters in a text.
    h1 {
        letter-spacing: 3px;
    }
    
    h2 {
        letter-spacing: -3px;
    }
    
  7. Line Height : The line-height property is used to specify the space between lines:
    <head>
    <style>
    .small {
        line-height: 0.7;
    }
    
    .big {
        line-height: 1.8;
    }
    </style>
    </head>
    
  8. Text Direction : The direction property is used to change the text direction of an element:
    div {
        direction: rtl;
    }
    
  9. Word Spacing :The word-spacing property is used to specify the space between the words in a text.
    h1 {
        word-spacing: 10px;
    }
    
    h2 {
        word-spacing: -5px;
    }
    
color: blue;
text-align: center / left / right / justify;
font-style: normal / italic / oblique;
font-size: 14px;
font-weight: normal / bold;
font-variant: normal / small-caps;
text-decoration: none / overline / line-through / underline;
text-transform: uppercase / lowercase / capitalize;
text-indent: 50px;
letter-spacing: 3px;
line-height: 0.8;
direction: rtl;
word-spacing: 10px;

/***
Web Safe Font Combinations
font-family: "Times New Roman", Times, serif;
Georgia, serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
"Times New Roman", Times, serif
Arial, Helvetica, sans-serif
/cssref/css_websafe_fonts.asp
***/

margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px;
padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px;

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;

border-width: 5px;
border-width: 2px 10px 4px 20px;
border-color: red green blue yellow;

Text Color

- The color property is used to set the color of the text.
- The default text color for a page is defined in the body selector.

Example:


body {
    color: blue;
}

h1 {
    color: green;
}
 

Text Alignment

The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.

Example:


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}
</style>
</head>
<body>

<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>
</html>
 
When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):

Example:


<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 1px solid black;
    padding: 10px;
    width: 200px;
    height: auto;
    text-align: justify;
}
</style>
</head>
<body>

<h1>Example text-align: justify;</h1>

<p>The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).</p>

<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
 'Whenever you feel like criticizing anyone,'
 he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>

</body>
</html>

 

Text Decoration

- The text-decoration property is used to set or remove decorations from text.
- The value text-decoration: none; is often used to remove underlines from links.
- The other text-decoration values are used to decorate text: overline; line-through; underline;

Example:


<!DOCTYPE html>
<html>
<head>
<style>
a {
    text-decoration: none;
}
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
</style>
</head>
<body>
<p>A link with no underline: <a href="http://www.google.com">Google</a></p>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
</html>

Text Transformation

- The text-transform property is used to specify uppercase and lowercase letters in a text.
- It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.

Example:


<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

</body>
</html>

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text

Example:


<!DOCTYPE html>
<html>
<head>
<style>
p {
    text-indent: 50px;
}
</style>
</head>
<body>

<p>In my younger and more vulnerable years my father gave me some advice that 
I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' 
he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

Letter Spacing

- The letter-spacing property is used to specify the space between the characters in a text.
- The following example demonstrates how to increase or decrease the space between characters

Example:


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

</body>
</html>

Line Height

The line-height property is used to specify the space between lines

Example:


<!DOCTYPE html>
<html>
<head>
<style>
p.small {
    line-height: 0.7;
}

p.big {
    line-height: 1.8;
}
</style>
</head>
<body>

<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>

<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>

Text Direction

The direction property is used to change the text direction of an element.

Example:


<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
    direction: rtl;
}
</style>
</head>
<body>

<div>This is default text direction.</div>
<div class="ex1">This is right-to-left text direction.</div>

</body>
</html>

Word Spacing

- The word-spacing property is used to specify the space between the words in a text.
- The following example demonstrates how to increase or decrease the space between words.

Example:


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

</body>
</html>