Introduction to CSS

This deck does not cover:

That's next week.

This deck also does not cover

That's the following 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

What is CSS?

It's Cascading Style Sheets

A collection of styles, collected in a stylesheet. Styles describe how elements are displayed.

Styles are collected in stylesheets.

Cascading ... we'll cover that later.

What sort of elements?

The Cascade

In the duck example. duck[flat] overrode the background-image property of duck. It's more specific than just plain duck.

In general:

Styles with more selectors override styles with fewer selectors:


Styles defined later override styles defined earlier:


Properties marked !important override properties not !important

You should never use !important.

Note that !important does override more-specific selectors.

So how does the cascade work?

First, I'm going to recommend you read the W3C spec on how this works.

Styles come from three different origins:

The browser sorts the styles in the following priority, highest to lowest:

  1. Important declarations in user stylesheets
  2. Important declarations in author stylesheets
  3. Normal declarations in author stylesheets
  4. Normal declarations in user stylesheets
  5. User-agent default styles

Read the spec.


Why a stylesheet?

Styles go in a separate file because of the separation of concerns: Separate content from presentation from functionality

Keeping styles separate from the page lets you update the entire site's styles by editing just one file.

If you ever hear someone calling for you to replace your CSS with JavaScript, they are telling a joke. Laugh as appropriate.

How do stylesheets get on the page?

You have a style.css and you want to put it on the page.

The primary way is through a link tag:

<!DOCTYPE html>
		<title>Intro to CSS</title>
		<link rel="stylesheet" href="css/style.css"/>

The important parts:

Or use a <style> tag

HTTP requests are so last week. We're putting everything inline now.

<!DOCTYPE html>
		<title>Intro to CSS</title>
html {
    color: blue;
h1 {
color: pink;

Anything between <style> and </style> will be interpreted as a style that should be applied to the page.

Or use inline styles

We don't care about "separation of concerns" — it's outmoded.

<p style="color:green;">Green text</p>

Green text

The style="" attribute can be applied to any element.

Inline styles make your HTML messy. They are a weapon of last resort, for when you need to verride every other style that might affect the element.

If you have to use them, you should feel sad.

Let's play with some styles

Styles that you load in your page override the styles provided by your browser.

This is a p tag with default styles. It has emphasized content, bold content, italic content, underlined content, strong content, a span, and let's add an a tag for good measure.

This is a p tag with the class 'twelve'. It has emphasized content, bold content, italic content, underlined content, strong content, a span, and let's add an a tag for good measure.

The box model

CSS Tricks explains it better than I can.

Here's what the W3C has to say

Important things to remember:

Let's talk about borders

Dotted, dashed, solid, groove, ridge, outset, inset.

Huh. Those last three solids are, in order: dotted, dashed, and solid. Let's play with the dotted borders, increasing the border-width by 10px each time.

And now with the dashed borders.

So borders get solid when they're really thick.

But what else can you do with borders?

CSS triangles

By the power of borders, we can make little arrow things!

Different-color underlines on <a> elements

The standard underline on links is boring.

Let's make the link bold, and have a red underline on hover.

How about a green dotted underline always? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

Sometimes that fat blue double underline needs to have breathing room. Therefore, you'll want to increase the line-height of the paragraph. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

What about backgrounds?

background is a fairly complex shorthand for the following properties:

Time for a break.

If it sounds like I'm telling you to read the specifications, I am.

Mozilla Developer Network isn't the official specifications, but it's an excellent reference.

Don't use W3Schools. It's out-of-date, inaccurate, and not worth your time. It is the Yahoo Answers of coding resources.

Watch this 26-minute talk. It explains the origins of color names. It's ... interesting.

What are your questions?


You have an inkling of what CSS can do with images from the background property.

And that's why it's best to only set the height or width and not both.

However, feel free to leave both the width and height unset, and instead set the max-height and max-width properties on img in general. In this document, img { max-width: 100%; } is true, and that's why this 1000px-wide image doesn't overflow.


Generally speaking, iframe embed codes provided to you will have width and height parameters included in the code that you copy:

<iframe src="" style="overflow: hidden; width: 1px; min-width: 100%;" width="100%" height="400" frameborder="0" scrolling="no"></iframe>

If you strip that out, iframes will default to 150px by 300px or 100px bt 200px, in most browsers:

Chrome's useragent stylesheet includes a pretty-ugly border: 2px inset.

Here's a sane default style for iframes:

Remember that inline styles override styles set in your stylesheets.


Lists can be marked with many different markers:

  1. Lowercase Roman numerals!

You can even create inline lists:

(Use your browser's inspector to see how I did that one.)


Sometimes you want to display a table of data, and it comes out looking like this:

Date Tweet Type Ratio
Sep. 11, 2015 642334607510228992 news 0
Sep. 11, 2015 642344398630559744 news 0
Sep. 11, 2015 642352012575817729 news 0
Sep. 11, 2015 642367471723409408 opinion 0

If you don't like how this table looks, check out the W3 wiki's article on styling tables and Edward-Tufte-inspired table designs. Remember that when it comes to styling tables, less is more.


// round images

// making things not-quite-round

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.