How to make text different colors in CSS

Working on a new project, and want to learn how to make text different colors in CSS? This can be very useful for when you want to show contrast in your design, say on a navigation bar where the background is dark and the text is white.

In this article, we will go over how to make text different colors in CSS, and how you can use the DarkColors color tester tool to test different color ideas for your website.



Get started: Create some HTML

To get started learning how to make text different colors in CSS, we first want to create some basic HTML. It will look like this:


<div class="container">

<h1>Heading<h1>

<p>Paragraph here<p>

</div>


Here is what it looks like:


Test your color ideas at DarkColors.

Here we have created some very basic HTML, a container with a heading and paragraph inside of it. Of course, there are many usecases that you can think of, but for the sake of this example, we will keep it simple. Let's move on now to the CSS to see how to make text different colors in CSS.





Next step: Write the CSS

Now that we have our container set up, it's time to write our CSS to see how to make text different colors in CSS. We will do a few different examples so that you can see the many ways that you can change text colors in CSS.

Change the heading

For our first example, we will change the color of the heading to a light blue. It will look like this:


h1{

color: #a3d6ef;

}


You can also write this as:


.container h1{

color: #a3d6ef;

}


Test your color ideas at DarkColors.

Now, the heading has changed from the default color of black to light blue. This is a simple example of how to make text different colors in CSS. We used the DarkColors editor to test this out. To try it, tap the link below.



Change the paragraph

There may be a certain usecase where you may want the heading to be one color, but the paragraph to be another color. For this example, we will leave the heading black, but make the paragraph light grey, like this


p{

color: #949494;

}


You can also write this as:


.container p{

color: #949494;

}

Test your color ideas at DarkColors.

Now, the paragraph color has been changed to a light grey.



Change the background and text

What if you want to make the background a darker color? Remember, the background and text colors need to have proper contrast with one another. We will make the background dark navy blue, and the text white, like this:


.container{

background-color: #120f38;

color: #FFFFFF;

}

Test your color ideas at DarkColors.

But wait? Why didn't we use the h1 and p tag to change the color? Because, once you use the color selector, you target all the text elements in that class. This means that whatever color value you choose, every text element in that class will be that color. This is a great point to know when looking for how to make text different colors in CSS.



Test your color ideas at DarkColors.

Change text color using inline styles

There will be usecases where you will need to change the text color using inline styles in HTML. This is also very simple, and here's how it can be done in two ways:


Let's change the color of all the text items, like this:


<div class="container" style="color: #0a0a0a">

<h1>Heading<h1>

<p>Paragraph here<p>

</div>


This will change all the text items in the container to the new color. But what if you just wanted to change the header tag? You could do so like this:


<h1 style="color: #0a0a0a">Heading<h1>


By adding the selector directly to the tag, you are able, using HTML inline styles, to change the text element to whatever you please. This is another method you can use if you are searching for how to make text different colors in CSS.



Test your color ideas at DarkColors.

A fun way to make text different colors

So far in this article, we have discussed some ways on how to make text different colors in CSS. Do you know that we have a tool that let's you test out different colors without having to write any code?

with our free color tester, all you do is make the text element whatever color you want, and you will be able to create a design in the browser to see whether it looks good or not. To get started testing your color and design ideas, simple tap the link below.

Looking for how to make text different colors in CSS? Check out our free color tester here: DarkColors

Test your color ideas at DarkColors.