Colour every paragraph green.
Acceptance criteria
- 1.Colour every paragraph green.
CSS Tutorial · CSS Introduction
These 10 tasks go with the CSS Syntax chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “Understand selectors, declaration blocks, properties, values, parsing, and the rules the browser follows when it reads a CSS stylesheet.” Read the chapter.
1.Use an element selectorexercise · easy · 10 min
Colour every paragraph green.
Passes when: Colour every paragraph green.
2.Use a class selectorexercise · easy · 10 min · practice plan
Make the .lead paragraph 18px.
Passes when: Make the .lead paragraph 18px.
3.Use an id selectorexercise · easy · 10 min · practice plan
Make #title purple.
Passes when: Make #title purple.
4.Group two selectorsexercise · easy · 10 min · practice plan
Colour the heading and the paragraph teal in one rule.
Passes when: Colour the heading and the paragraph teal in one rule.
5.Use a descendant selectorexercise · medium · 10 min · practice plan
Colour paragraphs inside #wrap maroon.
Passes when: Colour paragraphs inside #wrap maroon.
6.Fix the missing colonbug fix · easy · 8 min
A property and its value are separated by a colon.
Passes when: A property and its value are separated by a colon.
7.Fix the missing dotbug fix · easy · 8 min · practice plan
A class selector starts with a dot.
Passes when: A class selector starts with a dot.
8.Fix the missing hashbug fix · easy · 8 min · practice plan
An id selector starts with a hash.
Passes when: An id selector starts with a hash.
9.Fix the missing commabug fix · easy · 8 min · practice plan
Without a comma this becomes a descendant selector.
Passes when: Without a comma this becomes a descendant selector.
10.Fix the missing semicolonbug fix · easy · 8 min · practice plan
Without a semicolon the two declarations merge into one invalid one.
Passes when: Without a semicolon the two declarations merge into one invalid one.
Between them these tasks cover Selector and declaration block, Grouping selectors and Descendant selectors.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.