CodeDragon circular icon

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.

Or, you can continue anyway.

CSS: Making text prettier

CSS/1

Your default paragraph and heading fonts are quite boring. It's finally time to make them more exciting!

Written by Pal Kerecsenyi

CSS: Making text prettier

Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 
Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 

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:

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: serifsans-serifcursivefantasy 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:

In fact, some fancier colour names exist too:

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 redgreen, 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,581,375 colours (255 × 255 × 255), which is pretty cool.

Here are a few examples:

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

Warning: this section might involve... maths! Sorry about that.

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:

DecimalHexadecimal
00
11
22
33
44
55
66
77
88
99
10A
11B
12C
13D
14E
15F
1610
1711
1812
1913
2014

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:

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:

End of tutorial