To colour a specific HTML element content, we need to use the style attribute. The style attribute can colour the content, its background and even its border with the help of CSS properties and values. We can use different formats such as RGB code, HEX, HSL, RGBA, HSLA for property values.

Colour Names

For straightforward properties, we generally use the colour name, and there are more 140 standard colours present in CSS.

Example

<p style ="color: green; "> It's Green</p>

Output

It's Green

We can also use the hex code to represent the colour value.

Example

The hex code for green is #008000

<p style ="color: #008000; "> It's Green</p>

Output

It's Green

Major Colours with their hex code

Change Background Colour

By default the background colour of every element content is white, but it can be changed through style attribute and background-color property. We can either use the colour name or its hex code as the property value.

Example

<h1 style="background-color:Gold;">TechGeekBuzz</h1>

<p style = "background-color: black; color: #FFFFFF; "> Welcome to 
TechGeekBuzz</p>

Output

TechGeekBuzz

Welcome to TechGeekBuzz

Colour Text

To colour an element text content, we can simply use the style attribute's color property.

Example

<h2 style =" color: Tomato;"> HTML</h2>

<blockquote cite ="https://www.techgeekbuzz.com/html-full-form/" 
style="color: #FFA500;">
HTML abbreviates for hypertext markup language built to develop web pages and is coded or written in the 
established HTML components. Hyperlink refers to a wide array of a network in a page onto other pages. Markup
language attribute to tags that are applied to best describe a page layout and components within the page. The 
central point of focus is how the information is going to be shown on the web-pages. HTML documents are 
understood and are visible to us via the web browsers
<blockquote>

Output

HTML

HTML abbreviates for hypertext markup language built to develop web pages and is coded or written in the established HTML components. Hyperlink refers to a wide array of a network in a page onto other pages. Markup language attribute to tags that are applied to best describe a page layout and components within the page. The central point of focus is how the information is going to be shown on the web-pages. HTML documents are understood and are visible to us via the web browsers

Bodor Colour

By default, the border of an element text is white, so you usually do not notice that a boundary. However, we can change the border colour of any text using the border property.

Example

<h3 style="border: 2px solid Green;">TechGeekBuzz</h3>

Output

TechGeekBuzz

Colour Values

There are five different ways we can specify the colour value.

• By name
• by rgb() function
• by hex code
• by rgba() function
• by hsl() function

you can simply google the different values to represent the colour.

Example

<p style="color : red" > Red Colour<p> 
<p style="color : rbg(255, 0, 0);" > Red Colour<p> 
<p style="color : #FF0000" > Red Colour<p> 
<p style="color : rgba(255, 0, 0, 1)" > Red Colour<p> 
<p style="color :hsl(0, 100%, 50%) " > Red Colour<p>

Output

Red Colour

Red Colour

Red Colour

Red Colour

Red Colour

Summary

• color is a property of CSS.
• Various properties can be used to alter the colour of the text element.
• color Value can be represented using many methods.
• Its always recommend using hex code for colour values.