CSS Playing Cards Demo

This page demonstrates the CSS rules and HTML necessary to graphically represent every rank of playing card in a standard deck.

The links below allow you to dynamically change the font-size setting on the card class which alters the size of the cards and elements within.

smaller | larger

Use your browser's View Source option to see the full source code.

10
♠
♠
♠
♠
♠
♠
♠
♠
♠
♠
♠
9
♥
♥
♥
♥
♥
♥
♥
♥
♥
♥
8
♣
♣
♣
♣
♣
♣
♣
♣
♣
7
♦
♦
♦
♦
♦
♦
♦
♦
6
♠
♠
♠
♠
♠
♠
♠
5
♥
♥
♥
♥
♥
♥
4
♣
♣
♣
♣
♣
3
♦
♦
♦
♦
2
♠
♠
♠
A
♥
♥
K
♣
♣
♣
Q
♦
♦
♦
J
♠
♠
♠