CSS

Introduction

CSS (Cascading Style Sheets) allows you to control how HTML elements are rendered by the browser. If you want to change how an element looks, where it appears and with what dimensions, CSS is your friend. With CSS you can also make animations, complex shapes (via SVG) and simple behaviours.

CSS rules can be included in the HTML page itself within a STYLE block, attached to an element directory using the style property, or linked as an external file. It's generally good practice to use a separate file to keep everything nice and clean.

Syntax

The syntax of CSS itself is simple, whether listed in an external file or embedded in a HTML file. It is a block, made up of a selector and list of rules.

h1 {
  color: red;
}

Blocks are designated by curly braces, denoting the start and end. This block only has one rule, color:red;. It sets the text colour to red. Each rule ends with a semicolon. The selector in this example is h1, meaning that this block applies to all H1 elements used in the page.

Tinkering

Browsers let you play with CSS in real time. In most browsers, you can right-click on a page element and select Inspect. There, in the styles section, you can see which rules are already applied and edit them.

Below you can see a screenshot from Chrome's developer tools, showing the rules for the selected element:

More resources

CSS Reference - A useful reference to pretty much everything in CSS, with great visual examples.
You Might Not Need JS - Common design patterns solved with CSS

Inspiration

Codrops - CSS (and a smattering of SVG and JS) for practical interaction needs
Httpster - Web design for companies, products etc
Mediaqueri.es - Uses of media queries