Digicode – CSS Challenge

In this challenge you are going to use CSS to create your own digicode keypad.

Learning Objectives

By completing this challenge you will familiarise yourself with CSS pseudo-classes.
A pseudo-class is used to define a special state of an element.
For example, it can be used to:

• Style an element when a user rolls over it.
• Style visited and unvisited hyperlinks differently.
• Style active elements (for instance when a user clicks on an element, it becomes active).

The syntax of pseudo-classes:

selector:pseudo-class {
    property:value;
}

For instance to create a roll-over effect for hyperlinks:

A:hover {
    color:#FF0000;
}

You can also have a pseudo-class for when a link or button is active (being clicked on):

A:active {
    font-weight:bold;
}

Find out more about pseudo-classes.

Let’s see the code in practice by completing this challenge.

Your Task

Tweak the code below to create your own look & feel for your “digicode”:

See the Pen LENvrN by 101 Computing (@101Computing) on CodePen.