Fonts

One of the most important things to do with text is the font you're using. You may have seen the word 'font' used in other bits of your computer, such as Microsoft Word. As you probably know, the font is what the text looks like (other than colour and size).

By default, your web browser uses the following font:

Default font

On Windows, this default font is Times New Roman.

Making fonts simpler

Windows has about 120 fonts built-in. However, we'll simplify that to just a few fonts:

• serif

• sans-serif

• cursive

• fantasy

• monospace

These are called generic fonts. We'll use these instead of actual fonts to make your life a little easier.

Using fonts in CSS

It's quite simple to apply one of the generic fonts above:

Easy peasy lemon squeazy. Now give it a go:

1. Drag the big blue basic structure block into the workspace. Change the title to anything you want.
2. Drag the yellow header block into the body, and type anything you want into it.
3. Drag the style attribute block onto the side of the header block.
4. Drag the font family block inside the pink style block.
5. Set the font-family to either: serif, sans-serif, cursive, fantasy or monospace

Adding colour to text

In CSS, we have many ways of saying what colour we want to use. The first is simple - just type the name of the colour. For example:

• red
• green
• blue
• brown
• pink
• purple

In fact, some fancier colour names exist too:

• darkslategrey
• orchid
• mistyrose

Click here for a full list of available colour names you could use. However, we have some bad news — CodeDragon doesn't actually let you use any of these colour names.

In CSS, there are two other ways to specify a colour.

RGB colour codes

This might be a little complicated to understand, so click here to skip this section if you're not interested.

An easy way to specify a colour is to say how much red, green, and blue there is in it. We use a scale of 0-255 for each of these three colours.

Using this system, we get access to a total of 16,777,216 colours (256 × 256 × 256), which is pretty cool.

Here are a few examples:

• 255 red, 0 green, 0 blue = red
• 255 red, 255 green, 255 blue = white
• 0 red, 0 green, 0 blue = black
• 100 red, 100 green, 100 blue = grey
• 100 red, 100 green, 0 blue = olive
• 100 red, 0 green, 100 blue = purple

So how do we actually do this in CSS? It's easy. We usually abbreviate this system of specifying the red, green, and blue in a colour to 'RGB'. Of course, this literally stands for 'Red Green Blue'. So logically, we have a can literally use this abbreviation in CSS. Here's an example (in CSS we use the American spelling of colour: color):

Seems simple? Give it a go!

1. Drag the big blue basic structure block into the workspace. Change the title to anything you want.
2. Drag the yellow header block into the body, and type anything you want into it.
3. Drag the 'color' block inside the pink style block.
4. Play around with the first 3 numbers inside the 'rgba' block. Ignore the 'a' at the end of 'rgba' for now.

HEX colour codes

These are basically the same as RGB colour codes, except they're shorter and easier to use (if you know how they work, that is).

HEX is short for hexadecimal. This is a different number system to what you're used to. That probably already sounds complicated, but let me explain.

In our normal number system (which is called 'decimal'), we have 10 numbers: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. When we reach 9, we increase the next unit by 1 to get 10. Similarly, when we reach 19, we add 1 to the tens again: 20.

In hexadecimal, we have 15 numbers instead of 9. Here's how it works:

Now, in HEX colour codes we simply specify a number between 0 and 255 for red, green, and blue — just like with RGB. However, this time we do it using three hexadecimal numbers between 00 (0 in decimal) and FF (255 in decimal). To top it off, we add a '#' to the start of the code just to clarify that we're using a HEX colour code. Here are some more examples:

• #FF0000 = rgb(255, 0, 0) = red
• #FFFFFF = rgb(255, 255, 255) = white
• #000000 = rgb(0, 0, 0) = black
• #646400 = rgb(100, 100, 0) = olive

Give HEX codes a go:

The CodeDragon Colour Picker

Now that you have learned the complicated ways to specify colours, here's the simplified CodeDragon way. Remember that you need to use one of the above three methods to specify colours in real code, but as long as you're using CodeDragon we can simplify some things.

In the editor below, drag the block (which we have already put together for you) into the workspace, and simply click on the white box next to where it says 'color:'. Choose any colour you like.

Notice how in the code preview (bottom-right), your selected colour gets turned into a HEX colour code.

Changing the background colour

So now you know how we can change the colour of text. But what if we want to change the background colour of something? Surprise, surprise — we use the background-color CSS property. The rest is the same as with color (text color). For example:

Unlike color, which we can only apply to text, we can use background-color with any visible element (that excludes things like <head> and <title>). We can even make the entire page have a background color (see line 7 of the HTML website below):

The code above makes the entire page pink.

Playground

You can play around with everything you've just learned about fonts and colors below: