Class 3. CSS 1

What is CSS?

CSS stands for “Cascading Style Sheets”. Basically, CSS is made up of a series of rules that tell an HTML document how to look, or how to be styled—color, layout, etc. And similar to HTML, CSS is not really a programming language, it's a “style sheet language.”

Micro-exercise: “Kill Styles”

Let’s see what a handful of webpages would look like without their CSS.

  1. Drag the “Kill Styles” link to your bookmarks bar (You might have to display it if you don’t have it open. In Chrome, do: “View / Always Show Bookmarks Bar” or ⇧⌘B)
  1. Try clicking this bookmarklet on different webpages. It may not work on some. If you find one it works particularly well on, take a screenshot.
  1. Drag any good screenshots into this channel: 
  • (Put the page’s URL as the title of the block)

Ideally, your HTML should still be readable after you kill styles. (What if someone’s on a slow connection and the browser doesn’t have time to render your CSS?) This is related to the opinions expressed on this article and this website.

It’s also important for accessibility. End users always have the ability to override your CSS anyway. Lately on phones and some browsers, you can access a “reader only version” which strips away styles in order to privilege reading. On most modern web browsers, users can specify their own preferences. For example, users with disabled vision can create their own large-font, high-contrast style sheet and tell the browser to override web pages' existing style sheets to accommodate their needs.

CSS rules

CSS usually appears as one long list of rules.

A single one of those CSS rules is composed of a selector and a declaration block. The declaration block is made up of individual declarations. Each declaration has a property and value.

The first part, the selector, helps specify the element(s) you want to apply updated property values to. CSS uses these to find (select) HTML elements based on its name, id, class, attribute, and more… but more on that later.

Let’s say I want to apply my above CSS rules to all the paragraphs in my HTML document. I’ll do it like this:

p {

You must always use the curly braces after your selector { }!
(If you forget one of the curly braces, or have extra, the CSS might not work.)

Second, inside the curly braces, you’ll put your properties and associated values, which update how the selected HTML element will be displayed.

For example, I want my element’s width to be 50% of its parent element, its background to be cyan, and for it to have a 1 pixel wide, solid blue border.  That would be written:

width: 50%;
background: cyan;
border: 1px solid blue;

Each of those lines shows a declaration. It’s important that the syntax of each be composed property: value; The colon and semicolon are important. Like English punctuation, without them, the CSS won’t understand where the declaration ends

You can’t make up your own properties or values. The specifications for CSS are maintained by the World Wide Web Consortium (W3C). Here’s an exhaustive list of the ones you can use. 

Combined, a single CSS rule looks like:

p {
  width: 50%;
  background: cyan;