Intermediate CSS

This deck does not cover:

That's last week.

This deck also does not cover

That's next week, and it will be covered by Open Source Club president Eli Gladman.

How to follow along

Go here in your browser now!

Once you have that open in your browser, open your browser's dev tools:

Source code


Last week, I used a few different measures in the examples:

The root CSS unit is the pixel, px. It's equal to one pixel on your device, unless you've got a high-Dots-Per-Inch device like an iPhone or a 4K laptop or a Macbook or really any high-end device made in the last two years.

From the CSS pixel are built the units of absolute length, which usually don't change while the page is loaded:

Remember, those aren't physical units. They're based on the ideal of 1in = 96px. You're probably not going to use them unless you're doing CSS for print stylesheets.

There are units that scale with the font size:

Then there are the units that scale with the size of the browser's viewport:

Those don't have the best IE support.

If you're not sure what to use, it's safe to stick to px.

If you're not sure if the unit is supported on a device, check here.

And then there's this funky character:

% is not a unit

.narrow { width: 30%; } 

When you use percent for the value of a property, it references the parent element's property value.

If the parent element's property is a percent, then the parent needs to have a width that isn't a percent.

If it's percents all the way up to the root element, then you're probably good.

If it's percents all the way up to an element with a fixed value, you're good.

If it's percents up to an element that doesn't have a fixed value, it's an invalid property and your browser will ignore it.


Pseudo-elements are not found in your HTML.

Example text. Loren ipsum dolor sit amet quis adipiscing three point one four one five nine two six.

You can use them to add decorative symbols, to add decorative labels or triangles, or really for whatever purpose you need a single element for.

This will be covered more in detail next week, in Eli's talk.


Most things are position: relative;, but they don't have to be.

Let's check out MDN's article and then do some experimentation on a WordPress site with a fixed top navbar.

And then let's play around with z-indices, getting elements on the page to appear above and underneath that fixed navbar.


What do you get when you combine margins, padding, widths and floats?

Grid systems!

Responsive Web Design and Media Queries

The best resources for this are Google and Mozilla Developer Network

If you're looking for some philosophy of responsive web development, check out the source of the philosophy

Where can you go from here?

Learning resources:

What's the best way to learn?

Play around with things on your own. Build a portfolio site. Use your browser's inspector tools to see how other people build their sites. See if you can reproduce that style.