Intermediate CSS Workshop

Week Two Lecture

Getting Started

This week we will transition from theory and concept towards practical applications.  That's transition, which means you'll see a little of both.  Be sure to read the recommended online articles in the Week 2 Introduction.  Our approach this week is similar to week one and to what will follow in weeks three through six:  practice quiz, project, and peer reviews.  This week's project assignment contains some basic (minimum) requirements you must meet.  From there you can go as far as you like to make your work shine.  I encourage you to have fun and to do your best.  The "lecture notes" this week are brief.  You have plenty to read in the suggested readings.

Selectors & Combinators

This is bonus material - enjoy!  It's material that is not covered in depth in the Intro class, but is very useful to know.  There are essentially three types of combinators:

  1. Descendant.  A descendant element is designated by a simple space between it and its ancestor, like this: div li The li element is a descendant of a div element.

  2. Child.  A child element is designated by the child combinator, a right angle bracket (>), and looks like this in a stylesheet: ul > li The li element is a child (or immediate descendant) of a ul element.

  3. Adjacent Sibling.  An adjacent sibling immediately follows its sibling (the preceding element) in the document tree and is designated by the adjacent sibling combinator, the plus sign (+).  It might look like this in a stylesheet: p + p This reads as any p element that immediately follows a p element.

I recommend that you experiment with these sorts of selectors and combinators at the Selectoracle.  This very useful tool will help you get a grip on these issues.  Also practice sketching document trees, as demonstrated in the Child Selector Article.  These trees are very helpful when setting styles for a document.

Specificity & Inheritance

Some important points on specificity and inheritance:

  • We will be using the four-digit notation for selector specificity.  That looks like this: 0,0,0,0 or this: 0-0-0-0. The first digit (a=0) represents styles within the style attribute (inline styes), the second (b=0) represents id selectors, the third (c=0) represents attributes or pseudo-class selectors, and the fourth (d=0) represents elements and pseudo-element selectors.  You'll see more on this topic in the reading assignments (For Reference).

  • The universal selector (*) has a specificity value of 0.

  • Inherited styles have no specificity at all.  That means that a selector made up of nothing but universal selectors that matches an element (and has a specificity of 0,0,0,0) outweighs an inherited style that might also apply to a given element, but which has no specificity, because it's inherited.

Liquid Design

This is a favorite CSS topic of discussion.  I don't claim to be an expert, but I do know it when I see it. For this topic, be thinking about what liquid design means to you and just what constitutes a liquid design.  Generally you'll find it's the use of mostly relative units of measure - for various properties, especially properties such as width and positioning and font sizes.  There are some ways to use absolute positioning in parts of your page and still have it remain liquid, but it's best to "think" relative when you're trying for a liquid design.