Web Development

Add CSS Text Effects

Add CSS Text Effects is the section 5 of Beginner’s Guide to CSS.

If you have gone through of our HTML tutorial, you may find out that we can change the appearance of text using several HTML elements. We learned in the Formatting HTML Content section of Beginner’s Guide to HTML tutorial few formatting concept of text, such like bold, italic, superscript…etc.  So addition to that we can add some other formatting concepts using CSS.

Text Color

Color property can change the color of the text. If you want to change the color of the whole text content of the page use the selector as the body. You already know we can define the color as a HEX value, RGB value or by the color name.

[code language=”css”] p{
color: blue;
}
[/code]
This paragraph is written with blue color

Text Alignment

To set the horizontal alignment of a text, text-align property is used. A text can be centered, or aligned to the left or right, or justified. Justify means each line is stretched so that every line has equal width, and the left and right margins are straight like as in the magazines and newspapers. Justify alignment make your text more pleasant.

[code language=”css”] p {
text-align: center;
}
[/code]

This text content is center aligned.

Text Decoration

This element used to add a line with your text.

Text with several decorations.

[code language=”css”] p {
text-decoration: overline;
}
[/code]

Text with several decorations.

[code language=”css”] p {
text-decoration: underline;
}
[/code]

Text with several decorations.

[code language=”css”] p {
text-decoration: line-through;
}
[/code]

Text Transformation

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

SAME TEXT IS TRANSFORMED. [code language=”css”] p {
text-transform: uppercase;
}
[/code]
same text is transformed. [code language=”css”] p {
text-transform: lowercase;
}
[/code]
Same Text Is Transformed. [code language=”css”] p {
text-transform: capitalize;
}
[/code]

 

Text Indentation

In writing articles it is a standard to indent the first line of the paragraph. If you set your paragraph element to have text indentation, it will automatically indent all your paragraphs first line. Look at the following paragraph.

This is a paragraph repeated it self to look like a paragraph.This is a paragraph repeated it self to look like a paragraph.This is a paragraph repeated it self to look like a paragraph.

 

This is another paragraph repeated it self to look like a paragraph.This is another paragraph repeated it self to look like a paragraph.This is another paragraph repeated it self to look like a paragraph.

[code language=”css”] p {
text-indent: 50px;
}
[/code]

So the above are few commonly used text formatting effects. Below are few interesting text effect tricks that make your content more fabulous.

More Text Effects

Specify the space between characters
Normal Text

Text with Increased Letter Spacing

 

Text with Decreased Letter Spacing

[code language=”css”] /* Increased Letter Spacing */
p {
letter-spacing: 3px;
}

/* Decreased Letter Spacing */
p {
letter-spacing: -3px;
}
[/code]

Specify the space between lines
This is a normal Paragraph repeated it self to look like a paragraph.

This is a smaller line height paragraph repeated it self to look like a paragraph.

 

This is a bigger line height paragraph repeated it self to look like a paragraph.

[code language=”css”] /* Smaller line height */
p {
line-height: 70%;
}

/* Higher line height */
p {
line-height: 350%;
}
[/code]


In this section we learned about several techniques of text formattings. In the next section we are going to deal with a same kind of thing.

WHAT’S NEXT?

Let’s learn how to Deal with Fonts.

 

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

7 Comments on "Add CSS Text Effects"

Notify of
avatar
Sort by:   newest | oldest | most voted
Mike Serisier
Guest

Excellent web site you have got here.. It’s hard to find
high-quality writing like yours these days. I honestly appreciate people like you!
Takee care!!

Boyce Tisdale
Guest

Wow, this post is pleasant, my sister is analyzing thee
things, thus I am going to inform her.

Lesley Barbee
Guest

Howdy! I could have sworn I’ve been to this website before but after looking at a few of the articles I realized it’s
new to me. Anyways, I’m certainly pleased I stumbled
upon it and I’ll be bookmarking it and checking back regularly!

Pamela
Guest

Hi there, I enjoy reading all of your post. I wanted
to write a little comment to support you.

Karin
Guest

Thanks , I have recently been looking for info about this subject for ages and yours is the greatest I’ve discovered so far.
But, what about the bottom line? Are you positive concerning the supply?

lacey
Guest

My family always say that I am killing my time here at net, except I know I am getting knowledge everyday by reading such pleasant articles.

Smith
Guest

Thanks for this article. I might also like to say that it can end up being hard if you find yourself in school and merely starting out to create a long credit rating. There are many learners who are only trying to endure and have long or good credit history are often a difficult issue to have.

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW