CSS Diner

You're about to learn CSS Selectors! Selectors are how you pick which element to apply styles to.

p {
   margin-bottom: 12px;
}

Here, the "p" is the selector (selects all <p> elements) and applies the margin-bottom style.

To play, type in a CSS selector in the editor below to select the correct items on the table.If you get it right, you'll advance to the next level.

Hover over the items on the table to see their HTML markup.

Get help with selectors on the right! →

Ok, got it!

style.css

CSS Editor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

enter

{
/* Declarações de estilo iriam aqui */
}

/*
Digite um número para pular de nível.
Ex → "5" para o nível 5
*/

table.html

HTML Viewer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Made by @flukeout — come say hi! Original version

Have feedback or questions? Please file an issue on the Github repo.

Selecione um nível