The background-color CSS property: Now you understand more about CSS and how it works, let’s see how we can use CSS properties to make our page more colourful.

Web pages need to look eye-catching and interesting. We can change the background colour of different areas of our page using different

<div>

tags. First, we have to add style attributes to each of our opening

<div>

tags. Then inside the style attribute we set the background-color CSS property and choose a colour for the CSS value. The code we need looks like this:

<body>
 <p>Hello World.</p>
 <div style="background-color: green;"> <!--background-color property-->
 <p>This is my page.<br/>
 My very first webpage</p>
 </div>
 <div style="background-color: cyan;">
 <p>Changing colors is easy<br/>
 once you know the right HTML/CSS tags.</p>
 </div>
</body>

Sample output of above code:

 

Hello World.

This is my page.
My very first webpage

Changing colors is easy
once you know the right HTML/CSS tags.

 

There are thousands of colours that you can use as values in CSS. Go to Visit W3Schools to view more of them.


Related Posts:

Building a web page with HTML tags

MORE CSS PROPERTIES

Build to-do list web-app with code

Paginate Your WordPress Site Without Plugins

Redirect New Registered Users to a Specific Page – WordPress

The HTML paragraph tag: p and /p

What is a Blog?

The color CSS property

Crackin’ the code: Declo students learn computer programming

Introduction to Python Programming Language

WordPress Posts vs Pages

How do I create money online using WordPress?

Change the Author Permalink Structure – WordPress

Our Downloads Section

How To Start a Blog – Beginner’s Guide for 2018

CODING WITH CSS: The style attribute

How do I start a WordPress blog? (hosting wordpress)

Methods of teaching programming

Object-Oriented Programming (OOP)