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:

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

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.

Share Button
Posted in Computer Science, HTML / CSS

Our Latest Book