Zonua website makers logo

How to change the HTML font colour

25

15th January 2014

23rd August 2015

This article is for beginners.

What is HTML, a simple example here.

If you don't know what HTML is yet, then this article probably isn't for you, but you can check the last article entitled ‘What is HTML’. For the purposes of this article, let’s assume you are vaguely familiar with HTML, and you want to change the font colour.

Let's say we want to change the font colour of a particular paragraph to red.

First of all, don't do this:

<font size="3" color="red">This is some text!</font>

The problem with that is that the tag has been deprecated since HTML4.01 and is not even supported in HTML5. So even if you try that, and it works in your browser, that doesn't mean it will work in other browsers. Just don't do it. And if you never heard of that anyway, then pretend I never told you.

The correct and proper way to change the font colour is with inline CSS.

Hopefully you already know that the way to write a paragraph in HTML is like this:

<p>This is my paragraph, and I really want the text to be red!</p>

And of course, on screen that would look like;

This is my paragraph, and I really want the text to be red!

To change the colour of the font using CSS, we need to add an instruction called color: red;, and put it in the style double quotes.

Luckily for us, CSS is clever enough to understand that 'red' means 'red'. Please note that the American spelling of colour must be used. So, spell it color. Otherwise it won't work.

And to add in our CSS instruction, we put it in the opening paragraph tag of our HTML, like this:

<p style="color: red;">This is my paragraph, and I really want the text to be red!</p>

Which on screen will look like;

This is my paragraph, and I really want the text to be red!

How to change the background of a HTML element

So now say we have a heading in HTML, and we want the background to be yellow.

The HTML for a heading 1, which is the main heading in HTML is;

<h1>This the main heading. I wish we had a yellow background!</h1> Which on screen will look like like;

This the main heading. I wish we had a yellow background!

As above, to change the background colour, we're going to use inline CSS, and we will add an instruction called background-color: yellow;.

Note the American spelling: color.

And, as above, we add in that CSS instruction into the opening h1 tag of our HTML, like this:

<h1 style="background-color: yellow;">This the main heading. I wish we had a yellow background!</h1>

And on screen that looks like;

This the main heading. I wish we had a yellow background!

To combine multiple styles, say for example we had three paragraphs, and we wanted to have the second paragraph with red text and a yellow background; our HTML would be:

<p>This is the first paragraph.</p><p>This is the second paragraph.</p><p>This is the third paragraph.</p> Simply add your two CSS commands, color: red; and background-color: yellow;. Make sure that they are in the double quotes of style, like this;

<p>This is the first paragraph.</p><p style="background-color: yellow; color: red;">This is the second paragraph.</p><p>This is the third paragraph.</p>

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.

If you have any questions at all, please leave them in the comments, or you can contact us via any social media or email.

Please note that for developers, it would be recommended to use separate CSS files. This blog is for someone who doesn't have the admin access or knowledge to edit and upload a CSS file.
Please note that for specific colours (other than the basic main ones like red, green, yellow etc. - you would be using hex colours. To see how to pick hex colours, see this tutorial.

Hi, I'm Dorcas. I make websites. I lecture in Digital Marketing and related in the UCD Smurfit School. I do consultancy. I do talks. I've written a book on WordPress (available here).

Facebook Twitter Zonua on Skype Zonua on Pinterest Zonua on Vine Zonua on LinkedIn Google Plus Instagram

comments powered by Disqus

Next article: How to use Google Analytics to find out what is the most popular page on your website >

Credit to Purple Sherbet Photography for the coloured sweets image.

Feel free to find and contact us on any of the social media:

Facebook Twitter Zonua on Skype Zonua on Pinterest Zonua on Vine Zonua on LinkedIn Google Plus Instagram

Web Awards Ireland blog awards ireland Semi Finalist Social Media Awards 2014Eircom Spiders Shortlistee in the Best Small Agency category 2014

©Zonua 2010–2017