Last Updated:

How to Add Colours to Text in your Website using HTML and CSS

Gab
Gab Archived

Adding colours to your website using HTML and CSS might seem difficult, but it's actually simple, and we'll help you throughout the article.

Table of Contents

Writing the CSS

We first have to write the CSS. For this tutorial, we'll name the CSS class "text".

Depending on your files, you can put that in your <styles> or your .css file.

So in it, we can put:

.text {
}

Then to add colour to your text, we can use theĀ color property:

.text {
color: yellow;
}

Most browsers support using colour names instead of colour codes, so you should be alright. You can also use hex codes:

.text {
color: #fbd116;
}

If you want to use RGB, you can use this formula:

rgb(red, green, blue)

So for example:

.text {
color: 255, 165, 0;
}

Writing the HTML

This part should be easy. In HTML, there's tags that are used almost every time. They are <h1>, <h2>, <h3>, <span>, and <p>

Hopefully you're familiar with them.

Adding colours to text works for any type of text tags, for example:

<h1 class="text">hello world</h1>

So just remember to add class="text"

Now you've learned how to add colours to text in your website!