Instructions

Use Google Chrome so we can all have a consistent environment.
Go through slides with the keyboard arrow keys in a large window
Play with the demos. Most code examples are editable.
Read the notes in the top right corner and follow the links
If the “Open in new tab” button doesn’t work, disable AdBlock

Why?

The goal of this pre-doing is for you to build a small CSS vocabulary, so that in lecture we can explore the underlying concepts, and help you learn how to learn CSS.
If you've written CSS before, you may know everything in the pre-doing, don't assume that will be the case with the lecture too!


		<!DOCTYPE html>
		<html>
		<head>
			<link rel="stylesheet" href="style.css">
			<style>
				a { color: gray; }
			</style>
		</head>
		<body>
			<h1 style="color: #f06">Title</h1>
		</body>
		</html>

3 ways to apply CSS to your page:

Via an external CSS file and the link element. This is the recommended way for most things.
By writing CSS in the style element. This can work if the CSS only pertains to the current page.
For one-off cases, by using the style attribute, which has higher priority than other CSS applying to the same element. Avoid, as it's hard to maintain proper separation of concerns, and is less flexible.
Both link and style elements are only supposed to go in the head.
Toggle these notes by clicking on the “Notes” button on the top right. They will start off closed in the rest of the slides, but they are an essential part of the pre-doing, and you’re expected to follow any links in them!

CSS rules


		h1 {
			font-size: 200%;
			color: white;
		}

Most CSS is a list of CSS rules
The selector tells the browser which elements the rule is about, in this case h1 headings.
Declarations are property-value pairs. Each declaration controls a certain stylistic aspect.
Declarations are separated by semicolons. The last semicolon is optional (but recommended).
Here we can see two CSS properties: color which sets the text color, and font-size which sets the font size, in this case relative to the containing element's font size.

Here we can see our first few CSS properties:
- font-family: Sets the typeface, in order of preference. Because on the Web you don’t exactly know which fonts the user has installed (unless you link to the font file via an @font-face rule), you provide a list of fonts with a generic fallback at the end.
- color: Sets the color of the text and a default color for several other effects, such as borders and shadows. Its current value can be referenced from any property via the keyword currentColor
- hyphens: Enables hyphenation
- text-decoration: Sets or (in this case) cancels text underline/overline/strike-through.
We can also modify CSS via the Styles tab in the Elements panel of the dev tools. This also shows us what CSS applies each time.
Note that we can separate selectors by commas for a union. This is called a selector list.

What if we want to use different criteria than type of element?

Group by…	Example selector	Matches…
id	`#about`	`<section id="about">`
class	`.message`	`<p class="tip message">` `<p class="warning message">`
attribute presence	`[href]`	`<a href="http://designftw.mit.edu">` `<a href>` `<link rel="stylesheet" href="style.css">` but not `<a>`
attribute value	`[type="range"]`	`<input type="range">` `<yolo type="range">` but not `<input type="number">`

CSS selectors have become a very complex DOM querying language, used in both CSS and JS. Here we are merely scratching the surface.

Simple Selectors

Most Common selectors * element .class #id

Attribute selectors [attr] [attr="value"] [attr^="starts"] [attr$="ends"] [attr*="anywhere"]

These are called simple selectors because they represent a single selection criterion.
Concatenating simple selectors intersects them (i.e. it is equivalent to an AND operation). The result is called a Compound Selector E.g. a.docs matches an <a> element with the class docs. Note that element selectors can only be first in the sequence (i.e. [title]element is invalid)

CSS @-rules


		@font-face {
			font-family: 'Reenie Beanie';
			src: url(https://fonts.gstatic.com/...woff2);
		}

As we've seen, most CSS is a list of CSS rules, that start with selectors and contain declarations.
However, there are other types of rules as well, generally called at-rules (@rules).
Some are about augmenting the rest of the CSS, e.g. @font-face for linking to a custom font, @keyframes for animations, @import for linking to another stylesheet, or @page for setting print metadata.
Some @rules contain CSS rules (or other @rules) and limit where/when the containing CSS applies. These are conditional at-rules. Examples of this are @media for restricting CSS to specific media types, @supports for restricting CSS to user agents supporting a specific property
We will learn more about these @rules in later lectures.

Colors in CSS

RGB is modeled after 8 bit subpixel voltage, not human usability. It's very hard to adjust a color.
Hex colors are the least intuitive format: It’s RGB that is additionally hex-encoded! Mainly useful for copying from a color picker.
Named colors are readable, but few, irregularly distributed and often internally inconsistent (e.g. darkgray is lighter than gray!)
HSL is probably the most human-friendly out of the currently supported formats, but has its issues too (e.g. hsl(60, 100%, 50%) and hsl(240, 100%, 50%) have the same HSL lightness, but are they equally light?)
rgba() and hsla() accept a 4th parameter for alpha (i.e. transparency.)
The colors in this slide are editable, play with the coordinates and explore what happens!
We are going to explore colors properly in the Color lecture. Until then, we'll mainly use named colors for readability, and hsl() when no named color is suitable.

Backgrounds & Images

The background-color property sets the background to the specified color.
The background-image property sets the background to the specified image(s). All background images are painted over any background color.
Note that relative URLs in CSS are resolved relative to the CSS file, not the HTML!
There is a bunch more background-related properties to control aspects of the background:
- background-color
- background-repeat
- background-size
- background-position
- background-clip
- background-origin
- background-attachment

Gradients

You can also generate images via the several gradient functions:
- linear-gradient
- repeating-linear-gradient
- radial-gradient
- repeating-radial-gradient
- conic-gradient
- repeating-conic-gradient
Try changing the gradient to radial or conic and see what happens!
Here we've combined a gradient with an image background to make the text more readable.
The gradient automatically assumes the size of its container, unless its size is changed with background-size. Therefore, we had to make the html element as tall as the viewport. Try commenting out height: 100% and see why!
Gradients can be very powerful, as illustrated by this gallery.

1px means "1 pixel". It's an example of a CSS length. Lengths consist of a number and a unit, joined together. Often, pixels are not the best unit. We will explore lengths more in lecture.
Notice how the border gets the same color as the text by default. This is because its default color is the special value currentColor

6.S082 Lecture 5 CSS pre-doing

Instructions

Why?

CSS rules

What if we want to use different criteria than type of element?

Simple Selectors

CSS @-rules

Backgrounds & Images

Gradients

CSS resources