ADVERTISEMENT

How to Style Text Using CSS ? Change Text Color, Background Color, Underline Effect

Telegram Group Join Now

ADVERTISEMENT

How to Style Text Using CSS? Change Text Color, Background Color, Underline Effect

How to Style Text Using CSS ? Change Text Color, Background Color, Underline Effect

 

ADVERTISEMENT

Style Text Using HTML and CSS

ADVERTISEMENT

Hey friends, today I’ll teach How to Style Html text using Css. We use text in HTML to convey messages, tell about ourselves, and literally many more. Without text, your website will definitely look dull unless you want to use your website to show any photos, etc.
Generally, the text on your Html Website is black in color by default. However, with the power of Css, we can Change Text Color, Background Color, and Underline Effect and make it much more beautiful.

Style Text Using Element or Class?

We can style text using CSS but we need to decide what to use. Do you want to style by using the HTML tag as the selector or give a class or id for your text and then style it?

ADVERTISEMENT

In today’s demo, to make things simple, I will be using the HTML tag itself to style as the selector. Let’s move on.

ADVERTISEMENT

Basic Code Of Style Text

For your to easily follow along in this tutorial, paste the following code block in your HTML file:

HTML Code Text

<html>
  <head>
        </head>
<style>
p{
    ;
  }
</style>
<body>
 <p>Welcome to CodewithRandom Blog!</p>
</body>
</html>

Output

ADVERTISEMENT

Okay, now let’s move on to styling it.

Css Text Color Change

we can first try changing the color of the text. This is possible by using the CSS color property. We will change its color to red color. Look at the code block below for a better understanding.

ADVERTISEMENT

Create A Travel Website Using HTML & CSS

ADVERTISEMENT

HTML Code

<html>
  <head>
        </head>
<body>
 <p>Welcome to CodewithRandom Blog!</p>
</body>
</html>

Css Code For Text Color Change

<style>
p{
    color:tomato;
  }
</style>

Output

Css Text Background Color Change

Now let’s add some background color for a nice highlight effect or just for design. we will use the background-color property for this. Look at the code block below for more:

ADVERTISEMENT

Restaurant Website Using HTML And CSS With Source Code

ADVERTISEMENT

HTML Code

ADVERTISEMENT

<html>
  <head>
        </head>
<body>
 <p>Welcome to CodewithRandom Blog!</p>
</body>
</html>

Css Code For Text Background Color Change

ADVERTISEMENT

p{
    color:gold;
    background-color:black;
  }

Output

ADVERTISEMENT

Css Text Underline Effect

Now we will make an underline effect for the HTML text. We can do this by using the <u> tag in HTML, but let’s learn how to do it in CSS to be more professional.

50+ HTML, CSS & JavaScript Projects With Source Code

Check out the code block below:

HTML Code

<html>
  <head>
       </head>
<body>
 <p>Welcome to CodewithRandom Blog!</p>
</body>
</html>

CSS Code For Text Underline Effect

p{
    color:gold;
    background-color:black;
    text-decoration:underline;
  }

Output

You can do a lot more!

These were just some basic examples. With the power of CSS through properties like padding, center text-align, etc you can style your text to look even more awesome. Below I’m going to show a code block example where I’ve added several more CSS properties.

5+ HTML CSS Projects With Source Code

HTML Code

<html>
  <head>
  </head>
<body>
 <p>welcome to codewithRandom Blog! Scroll to read more!</p>
</body>
</html>

CSS Code Baisc Text Styling

p{
    color:black;
    font-family:arial;
    font-weight:bold;
    background-color:gold;
    padding:16px;
    text-align:center;
  }

Output

Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

And that’s all for this post. I hope this post can help you learn how to style text using CSS easily. As you learn CSS properties, you can upgrade this all even more. Thanks and goodbye!

In this post, we learn How to Style Text Using CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Thanks for reading! Do contact me via the methods below if you have to say anything:

Written by @codingporium

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT