Learn more with dummies

Enter your email to join our mailing list for FREE content right to your inbox. Easy!

How to Add Color to Your Website on the Raspberry Pi

By Sean McManus, Mike Cook

Your website won’t be very appealing without some color. You can use CSS to add color to your website on the Raspberry Pi. The quickest way to see how CSS works is to try an example. In your main.css file, type this line and then save it:

h1 { color: red; }

When you reload your web page (press F5 in Midori if it’s already open there), the text of your h1 heading is now red.

That simple example embodies how CSS works. You start off by telling the browser which tags you want to apply a style to (the h1 tag in this case), and then in curly brackets, you list the style instructions.

Each instruction starts by saying what aspect of the style should be changed (known as the property, and in this case, it’s the color). Next is a colon, and then what the style should be changed to (known as the value, which is red in this example). Finally, each instruction must end with a semicolon.

Take care with how you punctuate your CSS. Even in that short example, a couple of things could go wrong. It won’t work if you use normal curved brackets (parentheses), or the pointy angle brackets you use in HTML, so make sure you use the curly brackets.

Pay attention to the colon and the semicolon too. You need to get the right ones in the right places for it to work. If something’s not working right, a missing semicolon is often the culprit!

We can add a background color, too, like this:

h1 { color: red;
  background-color: yellow; }

Even if you’re a Brit, you need to spell color the American way in your CSS!

As in HTML, it doesn’t matter how you space out your CSS, but you can do yourself a favor and make it easier to read by including some white space and starting a new line for each instruction.

There are a number of colors that you can reference by name (including black, white, red, green, blue, gray, purple, and yellow), but other than black and white, they’re too bright and cartoonish for use in most cases. The best way to specify colors is by giving a color number, instead of a color name.

That enables you to use a more subtle color palette and gives you access to colors for which there probably aren’t even names (unless you work at a particularly comprehensive paint factory, perhaps). Here are some example color numbers:

  • #FFFFFF: White

  • #000000: Black

  • #FF0000: Red

  • #0000FF: Blue

  • #FFFF00: Yellow

  • #008000: Green

You might be surprised to see letters mixed up in the color numbers, but that’s because the colors are expressed using a number system called hexadecimal that goes beyond the numbers 0 to 9 and uses the letters A, B, C, D, E, and F too.

When you count in hexadecimal, you go: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10. The 10 represents 16 in our normal counting system, and 11 represents 17. Here are the three things you need to know about hexadecimal:

  • As in the normal counting system, numbers to the left are bigger. For example, using our normal counting system, in the number 39, the 3 has a higher value than the 9 because it’s in the tens column. In hexadecimal, it’s the same. In the hexadecimal number 7F, the 7 is worth more than the F because the 7 is in the 16s column.

  • The highest two-digit hexadecimal number is FF.

  • If you’re using any letters other than A through F, you’ve made a mistake.

The six-digit color number is actually made up of three small numbers squashed together, each one being two digits. Those three numbers represent the amount of red, green, and blue that should be in the color, taken from left to right.

So black is #000000 because there is no red, green, or blue. Blue is #0000FF because there’s no red or green, but there’s the maximum amount of blue. Yellow is #FFFF00 because yellow is made when you mix the maximum amount of red and green, without any blue.

You can mix up your own colors. For navy blue, just use a bit less blue than pure blue and try #000080. For vivid lime green, take the number for green (#00800) and pump up the amount of green to maximum, giving the color number #00FF00. You can use any valid numbers. #767676 is okay (and a sort of silver), and so is #543ABC (a fetching shade of purple).

You don’t have to experiment too much. Lots of resources are available online to help you find colors you can use, including Colorpicker, which works well on the Raspberry Pi and can generate a whole color scheme from your chosen color. The color code for your chosen color is shown at the top of the screen.

You use your color codes in place of the color names in your CSS, like this:

h1 { color: #FF0000;
  background-color: #FFFF00; }