CSS Basics

Introduction

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 Outcomes” section, you could probably benefit from the review of the basic stuff.

Learning Outcomes

  • What are selectors?
  • In general, how specific should you be when targeting elements using selectors?
  • What’s the difference between using %, em and rem to 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 li elements that have the class bunny which are inside the unordered list with the id things-that-hop”?
  • 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 <body> has color black but <h1> tags have the color blue but class main-title has the color red, which will be used by <body style="color:yellow"><h1 class="main-title" style="color:green">Howdy!</h1><body>?)

Assignment

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord

Are you interested in accelerating your web development learning experience?

Get started

Thinkful

  • 5-6 months

    5-6 months

  • Job Guarantee

    Job Guarantee

  • 1-on-1 Mentorship

    1-on-1 Mentorship