CSS & HTML

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;

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;

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 style="background-color: yellow; color: red;">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>

f 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.