Please enable JavaScript.

CodeDragon relies on JavaScript to create a smooth experience. Without it, using the website is practically impossible. To make this warning disappear, please enable JavaScript. Here's a guide.

CodeDragon might not work properly for you...

CodeDragon is designed to work with Google Chrome and Firefox, and a few features of CodeDragon have been found not to work properly with other web browsers. To make sure you get the best experience when using CodeDragon, please download the latest version of Google Chrome or Firefox and try again. You can install Google Chrome for free here, and Firefox here.

CSS: Making text prettier

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

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!

Drag the big blue basic structure block into the workspace. Change the title to anything you want.

Drag the yellow header block into the body, and type anything you want into it.

Drag the 'color' block inside the pink style block.

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:

Decimal

Hexadecimal

0

0

1

1

2

2

3

3

4

4

5

5

6

6

7

7

8

8

9

9

10

A

11

B

12

C

13

D

14

E

15

F

16

10

17

11

18

12

19

13

20

14

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:

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.

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: