CSS Intro

How CSS works

Good, solid introductory material.

CSS Syntax

Re-visit the basics.

Simple CSS Selectors

Be able to differentiate between element selectors, class selectors, and ID selectors.  Also, what is a universal selector and why would you want to think twice before using it?

Attribute Selectors

Read through the short section that covers presence and value attribute selectors.

Pseudo-classes and pseudo-elements

Be sure you understand what pseudo-classes are but do NOT try to memorize all of the possible iterations. DO spend some time playing with the active and hover pseudo-classes. Turns out (who knew?) that you can apply them to elements other than links. Such as div tags or images.

Also, try to wrap your brain around first-child, last-child, and nth-child(), as well as :first-of-type and :nth-of-type(). I just spent a few minutes doing the same and actually had fun!

For pseudo-elements, focus on ::first-letter,  ::first-line, and ::selection. I recommend that you click on each of these three to access the pages that give additional information.

Combinators and groups of selectors

Make sure you are clear on the distinction between groups of selectors and descendant selectors (A,B versus AB). Also be able to answer questions about child selectors (A > B).

CSS values and units

  1. Take note of how nth-child() is used in an example.
  2. What are numeric values used for?
  3. Pixels versus em?
  4. Learn the purpose and use of unitless values.
  5. Understand percentages. What are they used for and how do they work?

Colors!

Keywords versus hexadecimal versus RGB.
What is opacity?  How is IT used?

What are CSS functions?

Cascade and inheritance

The cascade and inheritance page linked to above is awfully wordy, but I don't want you to spend more than 1/2 an hr. (or less) on this one. Below is my take on the key concepts that you need to internalize.

  1. Importance. Make sure you understand the function and drawbacks of the !important tag.
  2. Specificity. Element versus class versus ID selectors. Who wins and why when there is a conflict?  I would skip over the numeric rating system they put together.
  3. Source order. When the same rule appears twice in a webpage's css, which one trumps the other?
  4. Inheritance. Just make sure you understand the concept. No need to memorize all of the rules and exceptions (it's mainly common sense anyway).

The box model

Read the section on box properties thoroughly and make sure that you are fluent with the uses of margin, border, padding, width and height. This page also has an active learning section that you may want to experiment with.  That part is optional.

Read the section titled Types of CSS Boxes. Make sure you are clear on the distinctions between the three box types: block, inline, and inline-block.

Background Clip

Make sure that you understand how the background-clip property functions in relation to text, margin, border, and padding.