Bhavitha Cherukuri: Let’s add color to the text

Monday, November 6, 2023

Let’s add color to the text

Let’s add color to the text

Applying color to Main Heading

Let us add color to the main heading using css property

.main-heading{
    color:blue;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="mainheading.css">
    </head>
    <body>
        <div>
            <h1 class="main-heading">Tourism</h1>
        </div>
    </body>
</html>

And you can see the colour of the main heading has been changed to blue

But we can also style in the html itself as shown below:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1 style="color:blueviolet">Tourism</h1>
    </body>
</html>

But I found that it is bad practice it is the bad practice of writing the code as it messes up.

Applying color to paragraph

Now let us add color to the paragraph as shown below

.paragraph{
    color:red;
}

<!DOCTYPE html>
<html>
 <head>
    <link rel="stylesheet" href="para.css">
 </head>   
 <body>
    <div>
    <p class="paragraph">Plan your trip wherever you want to go</p>
    </div>
 </body>
</html>

Now you can observe that the color of the paragraph has changed as below:

Adding Background-color to the container

Now we will be adding background color to the container

.card{
    background-color:lightblue;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="back.css">
    </head>
    <body>
        <div class="card">
            <h1>Tourism</h1>
            <p>Plan your trip wherever you want to go</p>
            <button>Get Started</button>
        </div>
    </body>
</html>