How to add a specific color to an element using CSS?

By IncludeHelp Last updated : November 19, 2023

To add a specific color to an element using CSS, use the following CSS properties:

CSS color property: To add text color to an HTML element
CSS background-color property: To add background color to an HTML element
CSS border-color property: To add border color to an HTML element

Adding Text Color

To add text color to an HTML element, use the CSS color property and assign the color as the value. Color can be assigned using the color name, color code, etc.

Syntax

color: color_name/color_code;

Example

Below is the example for adding text color to an HTML element (paragraph tag) -

<!DOCTYPE html> 
<html>
  <head>
    <title>Document Title!</title>
    <style> 
      body { 
      width: 960px;
      margin: auto;
      font-family: Verdana,sans-serif;
      } 
      p{
      color: #006969;
      }
    </style>
  </head>
  <body>
    <h1>Example to add a specific color to an element</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
      when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      It has survived not only five centuries, but also the leap into electronic typesetting, 
      remaining essentially unchanged. 
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
      and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

The output of the above example is:

add a specific color to an element | example 1

Adding Background Color

To add background color to an HTML element, use the CSS background-color property and assign the color as the value.

Syntax

background-color: color_name/color_code;

Example

Below is the example for adding background color to an HTML element (paragraph tag) -

<!DOCTYPE html> 
<html>
  <head>
    <title>Document Title!</title>
    <style> 
      body { 
      width: 960px;
      margin: auto;
      font-family: Verdana,sans-serif;
      } 
      p{
      background-color: #006969;
      }
    </style>
  </head>
  <body>
    <h1>Example to add a specific color to an element</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
      when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      It has survived not only five centuries, but also the leap into electronic typesetting, 
      remaining essentially unchanged. 
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
      and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

The output of the above example is:

add a specific color to an element | example 2

Adding Border Color

To add border color to an HTML element, use the CSS border-color property and assign the color as the value. Please note that, use border-style:solid to apply border color.

Syntax

border-color: color_name/color_code;
border-style: solid;

Example

Below is the example for adding border color to an HTML element (paragraph tag) -

<!DOCTYPE html> 
<html>
  <head>
    <title>Document Title!</title>
    <style> 
      body { 
      width: 960px;
      margin: auto;
      font-family: Verdana,sans-serif;
      } 
      p{
      border-color: #006969;
      border-style: solid;
      }
    </style>
  </head>
  <body>
    <h1>Example to add a specific color to an element</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
      when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      It has survived not only five centuries, but also the leap into electronic typesetting, 
      remaining essentially unchanged. 
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
      and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

The output of the above example is:

add a specific color to an element | example 3

How to define two column layout using flexbox?

How to add border-color to an HTML element using CSS?