This again should represent a review from what you’ve already covered in the Web Development 101 Lesson on HTML/CSS, but if you’re unable to answer the questions posed below in the "Learning Objectives" section, you could probably benefit from the review of the basic stuff.
- What are selectors?
- In general, how specific should you be when targeting elements using selectors?
- What’s the difference between using
remto specify sizes?
- How do you select an element inside another element?
- How can you shorten up a long batch of CSS that’s doing the same thing to many different elements by putting them all in one line?
- How do you target the immediate child of an element?
- How do you target a class inside a class?
- How do you target a class inside an ID?
- How would you target "all the links inside
lielements that have the class
bunnywhich are inside the unordered list with the id
- What are the three ways to include CSS in your project?
- How do you import an external stylesheet?
- What is the browser’s default stylesheet?
- What is a "CSS Reset" file and why is it helpful?
- Which stylesheet has preference if you import multiple ones and there are overlapping styles?
- What is the order of priority of selectors (e.g. if you specify that the
<h1>tags have the color
main-titlehas the color
red, which will be used by
<body style="color:yellow"><h1 class="main-title" style="color:green">Howdy!</h1><body>?)
Study and bookmark the CSS selectors cheatsheet & details page as it is one of the most comprehensive CSS selector references out there. You will be coming back to this page again and again to refresh your memory but also to find the appropriate selectors for various cases.
Why do we need CSS Resets? To avoid visual discrepancies between different browsers like the ones below.
(Image by Margarita Roi on Medium)
- Read the A tale of CSS Resets and Everything You Need to Know About Them post by Margarita Roi to learm more about CSS Resets and why we use them.
- Use the amazing CSS Selectors Explained tool to dissect and understand any kind of CSS selector!
(If you like the tool, don’t forget to star its GitHub repo)
LOOKING FOR HELP?
When looking for help, try doing so in the following order:
- Did you try everything you could?
- Did you read the documentation?
- Did you Google for it?
- Did you post your question on Slack/Forum?
- Did you ask your fellow students for help?
- Did you ask your Mentors for help?
- Did you leave a comment on the comments section of this page?
- Did you ask your Instructor for help?