summary | time | deliverables |
---|---|---|
A CSS exercise refreshing and teaching about all the different selectors. |
30 minutes |
1 HTML file, 1 CSS file |
- Fork this repository.
- Create a new CSS file named
main.css
in yourcss
folder—it’s already connected in the HTML. - Write the CSS selectors described below and add the requested properties.
- Double check that it matches the included screenshot.
- Do NOT change the HTML.
- Run it through Markbot and make sure it passes all the checks.
- Select
body
— addbackground-color: #fdf6e3;
- Select
header
andfooter
— addfont-size: 1.5rem;
- Select
ul
insidenav
— addfont-family: sans-serif;
- Select the logo by class
— add
text-transform: uppercase;
- Select the class
wrapper
— addbackground-color: #eee8d5;
- Select the IDs
contents
,favs
,facts
andtypes
— addcolor: #93a1a1;
- Use a child (or direct descendant) selector to get the
.dfn
that’s immediately inside the.wrapper
(not inside anything else) — addbackground-color: #b58900;
- Use an adjacent selector to get the
strong
inside.dfn
, the strong that starts “Botanically…” — addcolor: #fff;
- Select all the
a
tags, but not thea
tags with the class of.no-highlight
— addbackground-color: #719e07;
- Select the link with
rel="external"
attribute — addbackground-color: #2694d8;
- Select the first
li
inside theol
— addcolor: #719e47;
- Select the last
li
inside theol
— addcolor: #2aa198;
- Select every odd
li
inside.types
— addbackground-color: #657ba3;
- Select every even
li
inside.types
— addbackground-color: #586e75;
- Select every 3rd
li
inside.types
— addbackground-color: #d04b16;
Visually match the images in the “screenshots” folder.
- Final screenshots in the “screenshots” folder.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.