Week 3. CSS

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.”

As a reminder from the overview, CSS can be considered the “interior design” of the house.

It's a secondary layer. HTML is the first layer — HTML is the “structure and raw walls” of the house. But now it's time to add a second layer — CSS — to give that structure some style, life, and vibrancy...

Introduction

In class, let’s go over this overview of CSS deck that Aidan Quinlan made.

On your own this week, watch this video I made about CSS for a general overview of how to actually write CSS.

After that (and maybe we’ll have time to watch this in class… ), watch this video by Miriam Suzanne of Mozilla called, "Why Is CSS So Weird?" What's great about this video and its framing is that it shows how when you design for the web (unlike designing on other mediums), you're designing for an "infinite and unknown canvas" — which is why it's so weird.


In case it's useful, in the CSS video, I show an example site I created. You can view it here:

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: