CSS Text
CSS provides many options for defining the styles of text. This tutorial will cover those CSS properties related to text formatting.
Different CSS Text Properties are:
CSS Text Properties List
Properties | Example & Syntax |
Text Color | color: green; |
Text Alignment | text-align: center; |
Text Decoration | text-decoration: underline; |
Text Transformation | text-transform:uppercase; |
Text Indentation | text-indent: 20px; |
Letter Spacing | letter-spacing: 3px; |
Word Spacing | word-spacing: 3px; |
Text Direction | text-direction: rtl; |
Text Shadow | text-shadow: 4px 2px 8px red; |
Text Color
The CSS color property is used to change the color of the text.
You can set text Color using Different CSS Color Format Options:
- Set Text Color using Color name:
color: green;
- Set Text Color using HEX Value:
color: #00FF00;
- Set Text Color using RGB Value:
color : rgb(255, 0, 0);
Example: CSS Text Color using Inline CSS
<h1 style="color: red;">Heading Test</h1>
<p style="color: 00FF00;">This is sample paragraph text.</p>
<p style="color: rgb(0,0,255);"> This is another paragraph </p>
Text Alignment
The text-align property is used to set the alignment of a text. A text can be left or right-aligned, centred, or justified.
Text Align justify is used to stretch each line to the left and right corner so that every line has equal width. This enhances the reading experience for long paragraphs just like newspapers & books.
Four commonly used text-align properties given below:
- Set Text Alignment Left:
text-align: left;
- Set Text Alignment Right:
text-align: right;
- Set Text Alignment Center:
text-align: center;
- Set Text Alignment Justified:
text-align: justify;
Example: CSS Text Alignment
<h1 style="text-align: center;">Heading Center Text</h1>
<p style="text-align: left;">This is sample paragraph paragraph with left alignment </p>
<p style="text-align: right;">This is sample paragraph paragraph with right alignment </p>
<p>This is normal paragraph without any alignment. This is first line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Easdemne res? Iam in altera philosophiae parte. Duo Reges: constructio interrete. Sequitur disserendi ratio cognitioque naturae; Quis hoc dicit?
</p>
<p style="text-align: justify;">This is normal paragraph with right alignment. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Easdemne res? Iam in altera philosophiae parte. Duo Reges: constructio interrete. Sequitur disserendi ratio cognitioque naturae; Quis hoc dicit?
</p>
Text Decoration
CSS Text Decoration property is used to decorate a text using formatting: underline, overline, line-through and blink.
Some tags already have decorated text such as anchor tag always underline links. You can use Text Decoration property to remove those existing formatting as well.
Five commonly used text-align properties given below:
- Set Text Decoration as Underline:
text-decoration: underline;
- Set Text Decoration as Overline:
text-decoration: overline;
- Set Text Decoration as Line-Through:
text-decoration: line-through;
- Set Text Decoration as Blink:
text-decoration: blink;
- Remove Text Decoration as None:
text-decoration: none;
<p style="text-decoration: underline;">This is first paragraph. </p>
<p style="text-decoration: line-through;">This is second paragraph. </p>
<p style="text-decoration: blink;">This is third paragraph. </p>
<p style="text-decoration: overline;">This is fourth paragraph. </p>
<p style="text-decoration: none;">This is normal paragraph. </p>
Text Transformation
CSS Text Transformation property is used to change text case into uppercase and lowercase letters. You can convert text into uppercase or lowercase letters, or capitalize the first letter of each word.
Four commonly used text-transformation properties are given below:
- Set Text Transformation as Lower Case:
text-transform: lowercase;
- Set Text Transformation as Upper Case:
text-transform:uppercase;
- Set Text Transformation as Capitalize:
text-transform: capitalize;
- Set Text Transformation as None for no case conversion (default text as it is):
text-transform: none;
<p style="text-decoration: underline;">This is first paragraph. </p>
<p style="text-decoration: line-through;">This is second paragraph. </p>
<p style="text-decoration: blink;">This is third paragraph. </p>
<p style="text-decoration: overline;">This is fourth paragraph. </p>
<p style="text-decoration: none;">This is normal paragraph. </p>
Text Indentation
CSS Text Indentation property is used to specify the indentation of the first line of a text. Indentation is about setting text start position further.
Text Indentation Property Syntax is: text-indent: 20px;
<p>
This is normal paragraph text.
</p>
<p style="text-indent: 50px;">
This is example of indentation paragraph
</p>
Letter Spacing
CSS Letter Spacing property is used to specify the space between the characters in a text.
Letter Spacing Property Syntax is: letter-spacing: 3px;
<p>
This is normal paragraph text.
</p>
<p style="letter-spacing: 5px;">
This is example of text having 5px letter spacing
</p>
Word Spacing
CSS Word Spacing property is used to specify the space between the words in a text.
Word Spacing Property Syntax is: word-spacing: 3px;
<p>
This is normal paragraph text.
</p>
<p style="word-spacing: 5px;">
This is example of text having 5px word spacing
</p>
Text Direction
CSS Text Direction property is used to change the direction of a text. Text Direction can be Right to Left (rtl) and Left to Right (ltr).
Commonly used text-transformation properties are given below:
- Set Text Direction Left to Right (It is the default text direction):
text-direction: ltr;
- Set Text Direction Right to Left:
text-direction: rtl;
<p>
This is normal paragraph text.
</p>
<p style="direction:rtl;">
This text have right to left direction.
</p>
<p style="direction:ltr;">
This text will have left to right direction.
</p>
Text Shadow
CSS Text Shadow property adds a shadow around a text. Text Shadow property is supported by latest or modern web browsers only.
Text Shadow Property Syntax is: text-shadow: 4px 2px 8px red;
The CSS Text Shadow property accepts 4 values. The first specify the vertical offset, second sets horizontal offsets, the third one specifies the radius of the shadow effect. The fourth value specifies the color of the shadow.
<p>
This is normal paragraph text.
</p>
<p style="text-shadow: 4px 2px 8px red;">
This text have shadow effect.
</p>
Exercises & Assignments |
---|
No Content Found. |
Interview Questions & Answers |
---|
No Content Found. |