CSS Text Effects

CSS Text effects:

CSS Text Effects: Text remains the most important part of the web development because it is what the users are to read ultimately. What if the final look of the website is awesome but text remains simple and wholly unsuited to the overall design of the webpage? The answer comes with CSS that offers us to not only design our text effects with the web safe fonts but also to include customized text fonts from other websites like Google.

Primarily, following text effects are offered by CSS:

Text Color:

CSS offers to set the color of text on the basis of class, type, para, body etc. It means that we can specify a certain text color for any and every segment of our webpages. We can see the below example to illustrate the case:

body{text-color: blue; }



You can clearly see that all our webpages will have blue coloured text while the h1 headings shall have “seagreen” color of the text. Similarly, we have defined different text colours for our other headings.


At times we do need to change the text either from capital to lowercase or vice versa. And even sometimes we need to convert the first alphabets of all words to capital. This is possible to be done with CSS now. Look at the example below:

h1{text-transform: capitalize;}

It would result in: “The Old Man And The Sea”.

We can see that every first letter of every word has been capitalized. Similarly we can convert all alphabets to uppercase with the below code:

h1{text-transform: uppercase;}

The below mentioned code would transform the text into lowercase letters:

h1{text-transform: lowercase;}



We can decide with the CSS today if we want our text to align to the left or to the right. The sample code below illustrates the same:



Text Decoration:

Often we are faced with the challenge to remove the underlines from our hyperlinks from within webpages, CSS makes the life easier by introducing “text-decoration” property. Though quite sarcastic, the property was actually intended to decorate the text while it is mostly used for removing the decorations from links. The below example illustrates how CSS is generally used to remove text styles from links:


Above is stated what we generally achieve from this CSS property. Following text decoration properties are offered by “text-decoration” feature of CSS:

{text-decoration: underline;}

{text-decoration: line-through;}

{text-decoration: overline;}



Leave a Reply