HTML Tips and Tricks – Colours!

HTML Tips and Tricks - Colours! | Bonjour, Blogger!

Colour is obviously important in blogging. Imagine if your blog was just all white with all black text, with no colour changes at all. That’s almost as bad as a clashing page of loads of colours (colour clashing might work in fashion, but it doesn’t in HTML!)

The best way to change the colours of an element on your blog (e.g. having all the links appear a certain colour, or you may have noticed that when we make words italic, they turn purple to match our header!) is to edit the CSS of your blog. CSS stands for cascading style sheets, and is a file that is linked from all the pages on your blog – if you make a change on this file, then that affects all elements all over your blog. CSS is a great thing if you’re changing your layout completely, because it means you don’t have to edit every single page. We’ll be explaining through CSS soon, but for now, we’re just going to look at colours and how to change them on an ad-hoc basis.

The codes that we use in HTML to change the colour of something are called HEX codes. They are 6 digits long, and each pair relates to the value of red, green or blue in the colour. These pairs will range from 00 to FF (in any combination of 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) and go from 000000 (which will give you black) to ffffff (which is white)

To change the colour of a certain word, you could put the following before that word:

<font color="#ffffff">

(Replace ffffff with what ever colour code you want to use)

To close that tag, you would use the following tag:

</font>

If you use Picmonkey or Photoshop, the hex code will be provided when you pick a colour, or you can also use a site like html-color-codes.info to pick a colour and get the relative codes.

There are certain colour combinations that should never be used on websites – you want to have a clear enough contrast between your text and background that makes it easily readable to most people. For example, think about people who are colour blind. It might look fine to you, but if you’re using two colours that someone can’t process (e.g. red and green), then your page will look blank! You can use sites like colorfilter.wickline.org which will show you what your site will look like to people with certain types of colour blindness.

To choose a good colour palette for your blog, you can use a site like colorcombos.com which will show you combinations that look good together that other users have put together.

  • Han

    The font tag has been depreciated since HTML 4.0 and XHTML 1.0, about 1997!

    The only acceptable time to use it is when creating html emails to be sent to rubbish email clients like outlook 2005 that have no concept of semantics!

    You should use the style=”color: #fff” tag on you element or add a class and style it semantically through CSS.

    July 25, 2013 at 1:56 pm Reply
      • Han

        it does still work though but your code wont be valid! (if you like a nice green tick at the end of the blogging day!) :)

        Plus I *think* CSS takes priority in most modern browsers so it *may* not even work, depending on your theme etc, I’m curious now! Research time!

        http://www.w3.org/TR/REC-html40/present/graphics.html#h-15.2.2

        July 25, 2013 at 2:05 pm Reply

Leave a Reply