(click anywhere to close)
OPEN MENU

[CSS3] Colours & Units

category: Website | course: CSS3 | difficulty:

The majority of CSS properties take numbers or colours as values. A number by itself doesn’t mean anything, which is why every number needs some unit after it. On the other hand, we can’t describe a colour to a computer, which is why we need ways to input them. This chapter is about just that, and is the last one before we can finally begin discussing all the wonderful ways you can style things using CSS!

Units

CSS has a bunch of predefined units you can use for your numbers. Those can be categorised as absolute units and relative units. These units are added directly behind the number – there’s no white space between them (e.g., 100 pixels is denoted as 100px).

When a property has value 0, you don’t need to supply a unit. Zero is always zero.

As you will see later on, some properties take multiple arguments, and therefore multiple numbers. You can use different units for the different numbers if you want.

Absolute Units

This type of unit has a fixed length, and doesn’t depend on the size or settings of the parent element or browser window an element is displayed in.

Unit

Description

Notes

cm

Centimetres

 

mm

Millimetres

10 mm = 1 cm

in

Inches

1 in = 2.54 cm = 96 px

px

Pixels

Standard font-size is 16px

pt

Points

1 pt = (1/72) of an inch

pc

Picas

1 pc = 12 pt

Viewing devices come in lots of different resolutions these days, which means a pixel doesn’t always mean or look the same. Fortunately, however, most high resolution screens make up for it by treating one CSS pixel as multiple pixels on their device. You shouldn’t run into many problems, but it has become more common these days to use relative units for everything.

Relative Units

This type of unit scales with the size of other elements or the browser window. Because devices can have a lot of different screen sizes, it’s recommended to make as much as possible of your design responsive. This simply means that the layout easily adapts to changes in viewport size ( = dimensions of the browser window viewing the page).

Unit

Description

em

Relative to the font-size of the element

(for example: 2em means two times the size of the current font)

%

Percentage of initial setting

(for example: setting 100% width on a table means it spans across the full width of its parent element)

vw

Relative to 1% of the viewport width

vh

Relative to 1% of the viewport height

vmin

Relative to 1% of the smaller dimension of the viewport

vmax

Relative to 1% of the bigger dimension of the viewport

rem

Relative to the font-size of the root element

ch

Relative to the width of the “0” (zero) of the current font

ex

Relative to the x-height of the font (rarely used; only interesting to typographers)

Colours

CSS has around 175 colour names automatically supported, such as red, orange and pink. With a colour spectrum of over 16 million colours, however, that is a bit limiting. Therefore, other methods are used within CSS.

RGB

RGB uses three channels as input: red, green and blue. Each of these can take a value between 0 and 255; 0 means the colour isn’t present at all, and 255 means the colour is fully represented.

For example: rgb(255,0,0)is pure red, rgb(0,0,255) pure blue, rgb(122,122,122) is grey.

RGBA works the same way, but takes an extra alpha parameter that specifies the opacity of the colour. It doesn’t actually change the colour, but determines to what extent underlying colours in the design influence it. An alpha of 0 means the colour is fully transparent (not visible), and an alpha of 1 means you can’t see through it.

HEX

HEX a different, shorter way of writing RGB colours. It uses a base-16 system. This simply means that we use the numbers 0 – 9, and then say A = 10, B = 11, C = 12, D = 13, E = 14 and F = 15. This way, we can represent those numbers (between 0 and 255) with only two digits: 00 up to and including FF.

For example: #FF0000 is pure red, #0000FF is pure blue, #7A7A7A is grey

HEX shortcut is an even shorter way to display colours. If a colour has repeating digits, we can write a hex code with only one digit per channel.

For example: #F00 is pure red, #00F is pure blue, #FFF is the whitest white.

HSL

HSL is an entirely different way of representing colours. It uses hue, saturation and luminosity as arguments. These translate to colour, pureness and brightness. Hue gets a value between 0 and 360 degrees, saturation and luminosity from 0 to 100%.

For example: hsl(0,100,50) is full red, hsl(240,100,50) pure blue, hsl(0,0,50) is grey.

HSLA works the same way, but takes an extra alpha parameter (just as RGBA).

This might be much to take in now, but I assure you that you’ll get the hang of it quickly once you start playing around with it. I prefer working with HSL, but it takes some getting used to, and if I know what colour I want it’s usually quicker to write them with hex or rgb. Colours with an alpha component are a bit heavier for the browser, but these days that shouldn’t be a problem for most systems.

Usually though, people create a colour palette before they start designing, and I recommend doing that. There are lots of tools out there that let you pick colours that look good together, and they often immediately provide the CSS colour codes with it, so colours shouldn’t be much of an issue!

CONTINUE WITH THIS COURSE
Test your knowledge with the quiz!
What happens when you use rgb(255,255,0)?
A
You type the colour green using HEX
B
You type the colour yellow using RGB
C
You type a half transparent colour red using RGB
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)