COLORS & TEXT IN CSS

The following values, to specify full-on as red-as-red-can-be, all produce the same result:

• red
• rgb(255,0,0)
• rgb(100%,0%,0%)
• #ff0000
• #f00

Predefined color names include aqua, black, blue, fuchsia, gray, green, lime, maroon,navy, olive, orange, purple, red, silver, teal, white, and yellow. transparent is also a valid value.

Hexadecimal (previously and more accurately known as “sexadecimal”) is a base-16number system. We are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from 0 to f.

color and background-color

Colors can be applied by using color and background-color (note that this must be the American English “color” and not “colour”).

A blue background and yellow text could look like this:

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

These colors might be a little too harsh, so you could change the code of your CSS file for slightly different shades:

body {
    font-size: 14px;
    color: navy;
}

h1 {
    color: #ffc;
    background-color: #009;
}

Text

You can alter the size and shape of the text on a web page with a range of properties.

font-family

This is the font itself, such as Times New Roman, Arial, or Verdana.

The user’s browser has to be able to find the font you specify, which, in most cases, means it needs to be on their computer so there is little point in using obscure fonts that are only sitting on your computer. There are a select few “safe” fonts (the most commonly used are Arial, Verdana and Times New Roman), but you can specify more than one font, separated by commas. The purpose of this is that if the user does not have the first font you specify, the browser will go through the list until it finds one it does have. This is useful because different computers sometimes have different fonts installed. So font-family: arial, helvetica, serif, will look for the Arial font first and, if the browser can’t find it, it will search for Helvetica, and then a common serif font.

font-size

The size of the font. Be careful with this - text such as headings should not just be an HTML paragraph (p) in a large font - you should still use headings (h1, h2 etc.) even though, in practice, you could make the font-size of a paragraph larger than that of a heading (not recommended for sensible people).

font-weight

This states whether the text is bold or not. Most commonly this is used as font-weight: bold or font-weight: normal but other values arebolder, lighter, 100, 200, 300, 400 (same as normal), 500, 600, 700 (same as bold), 800 or 900.

Play around with these font-weight values if you want see their effect but, keep in mind, that some older browsers become a little confused with anything other than bold and normal so we suggest sticking to those unless you’re a typography ninja.

font-style

This states whether the text is italic or not. It can be font-style: italic or font-style: normal.

text-decoration

This states whether the text has got a line running under, over, or through it.

text-decoration: underline, does what you would expect.
text-decoration: overline places a line above the text.
text-decoration: line-through puts a line through the text (“strike-through”).


This property is usually used to decorate links and you can specify no underline with text-decoration: none.

Underlines should only really be used for links. They are a commonly understood web convention that has lead users to generally expect underlined text to be a link.

text-transform

This will change the case of the text.

text-transform: capitalize turns the first letter of every word into uppercase.
text-transform: uppercase turns everything into uppercase.
text-transform: lowercase turns everything into lowercase.
text-transform: none I’ll leave for you to work out.


So, a few of these things used together might look like this:

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

a {
    text-decoration: none;
}

strong {
    font-style: italic;
    text-transform: uppercase;
}

Text spacing

Before we move on from this introduction to styling text, a quick look at how to space out the text on a page:

The letter-spacing and word-spacing properties are for spacing between letters or words. The value can be a length or normal.