Cascading Stylesheets

Cascading Style Sheets, or CSS, was a language introduced to the Web in the mid 90s for the purpose of separating a webpage's "form" or "presentation" from it's "structure" or "content". Initially it handled things like layout, color changes and typography, but today in the era of CSS3, it has evolved to become a much more expressive language capable of creating interactive effects and animations.

Table of Contents:

  1. CSS Rules
  2. Including CSS to your page
  3. CSS Selectors
  4. CSS exmapes

CSS Rules

You can apply a set of CSS delcarations to multiple elements at once using CSS rules. A CSS "rule" contains two parts, a selector which specifies which element(s) the rules will be applied to and a declaration block, surrounded by { curly brackets }, which specifies how the element should be styled.

image/svg+xml color a } value { : ; green selector declaration block property

The declaration is split in two parts, the property which indicates the aspect of the element you want to change (ex: color, font, width, border) followed by a : (colon) and then the value (the setting you want to use for that specific property) followed by a ; (semi-colon). Check out MDN's Common CSS Properties Reference or CSS Trick's CSS Almanac for a more exhaustive list of CSS properties.

Including CSS to your page

There are a few ways you can add CSS code to your HTML page, one way is to create a <style> element, which is an element that takes CSS code as it's contents.

CSS Selectors

The example above uses a type selector, which means it will apply the rules to every <a> tag on the page. You can apply the same rule to multiple elements by including them in a comma separated list within the selector, like this h1, h2, h3 for example:

There are many other kinds of selectors which give you different ways of targeting specific elements to apply your CSS rules to. The most common selector is likely to be the class selector which targets any element whose class attribute’s value matches that of the class name.

There are a number of different kinds of selectors and thus a number of ways to specify which elements on a page you want to apply a CSS rule to, The most common are:

CSS Examples

You can review all the core concepts with netnet in its editor, I've also got a hypermedia CSS Crash Course tutorial you can watch/interact with. There are also loads of great books and online tutorials if you'd like to dive deeper. Below are some (interactive) examples of different CSS snippets you might want to make use of in your documents. You can edit any of these examples to experiment with it as well as double click any piece of code to learn more about it.