Capability Lab

1. Does CSS work

Lesson 1 of 6

CONTROL

C0. This line is styled with a plain inline style attribute, and we already know that works. If the tests below fail but this paragraph still looks deliberate, the problem is specifically the <style> tag, not styling in general.


Test A

Does a <style> tag survive? An orange circle should be pulsing below. A plain dark square, or nothing at all, means the tag was stripped.


Test B

Keyframe animation. The dark square should slide left and right, continuously.


Test C

Hover and transition. Put your cursor on the box. It should fill orange, lift up, and cast a shadow.

Hover me

Test D

Custom properties. Every orange thing on this page reads from one --labAccent variable. Orange means variables resolve.


Test E

Pseudo-elements. A mono label should have appeared directly above this sentence.

Test F

Grid and gradients. Three boxes in a row, each with an orange gradient.

Gridandgradient