Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content


How To Change Color And Opacity Of Fonts In CSS3?

Now, we will see how to apply Colors to fonts. Color itself is an element, so it will directly pass on fonts. All modern browsers support 140 colors. Opacity means the property which specifies the opacity/transparency of an element. Let’s see working of colors and opacity.

To apply Color to fonts :
p{width: 60px; border: 1px solid green; word-wrap: break-word; color: red;}

Save it and see in browser, all fonts will become red.

Apply background and opacity to the text as shown in video. Remember you can give opacity from 0 to 1. 0 for fully transparent and 1 for fully displayable :
p{border: 1px solid green; word-wrap: break-word; color: red; background: green; opacity: .5}

You will see, text become lighter than before. Remember, when you use opacity, it applies to whole element. Here, we have applied opacity to <p> but it will affect all elements present in to <p>. If we want to apply opacity only to text and not to <p>, then we have to give color to text in RGBA form.

Text color is based on two types: one is hex color that is hexa decimal and second is RGBA that is red, green, blue and alpha. Alpha stands for opacity. Same way, you can give RGBA color to background, too. This way, you can add/change color and opacity of fonts.


Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere