Introduction to CSS

Motivation

Separation of concerns is a powerful technique for managing complexity. Here are three things that are good to separate:

• Content. What is your data and how is structured? Think canvases, headings, menus, footers, articles, sections, paragraphs, lists, tables, videos, interactive controls (buttons, sliders, text input fields).
• Presentation. How does your data appear? Think sizes, fonts, spacing, aural cues, colors, borders, margins, shadows, positioning (relative, absolute, fixed, grid, flex, float, 2-D and 3-D transforms), transitioning and animating.
• Interactivity What events occur and what should be done in response? (This is a good question for now, but keep and open mind about what interactivity really is, or should be, or could be.)

In web applications:

Demos First!

Start by seeing what you can do with CSS. This collection of 20 examples is pretty good. You should try out each of them before moving on.

The old CSS Zen Garden is still around. Take a look.

Tutorials

There are quite a few out there. HTML Dog has three good tutorials—one for beginners, one that is intermediate, and one that is advanced. You should do all three. They don’t cover all of CSS by any means, but they will get you started.

We will browse some of the examples in the HTML Dog Tutorials. The examples have a live editor and runner so we can explore all the different things that CSS can do directly within the HTML Dog site.

Also excellent is the MDN Guide to Learning CSS. MDN also has reference material on CSS. And of course gory details are found at the CSS home page maintained by the W3C.

As you get good at CSS, one of your go-to sites will be CSS Tricks.

Technical Notes

Now that you have seen the demos and gone through a number of tutorials, let’s get technical.

(Also make a note of this fantastic reference site.)

Statements

A CSS style sheet consists of a sequence of statements. Each statement is either a ruleset or an at-rule.

Rulesets

A ruleset is a statement that tells the user agent (UA) how to render an element or elements.

You can condense rulesets as follows:

h1 {font-weight: bold}
h2 {font-weight: bold}
h3 (font-weight: bold}

h1, h2, h3 {font-weight: bold}

h1 {color: green}
h1 {text-align: center}

h1 {
  color: green;
  text-align: center;
}

Properties

There are hundreds of properties. In the early days of CSS1 there were just a few. CSS2 brought the count up to just over 100; CSS3 added hundreds more.

You might be interested in the W3C’s description of all the properties that were officially part of CSS back in 2010. Those are the most stable and widely supported.

Here is a sampling of most of the CSS3 properties:

This set was taken from this list of all properties at the W3C site.

A good reference with lots of examples is HTML Dog’s CSS Property Reference.

Values

Some properties have values that are special tokens, specific to that property (or a handful of properties), for example:

font-family: serif
font-variant: small-caps
text-align: center
text-decoration: underline
margin-left: auto
border-left-width: medium
list-style-position: inside
list-style-type: square
white-space: pre
cursor: pointer
overflow: scroll
visibility: hidden
clear: both
display: table-row
position: absolute

The values inherit, initial, and unset apply everywhere. Some values are keywords (like pointer and scroll above), and some are fancy forms like linear and radial gradients. Sometimes the property value comes from a specific type. Here are some of the types in CSS:

And, you guessed it, you should see the HTML Dog CSS Value Reference. Also note the Official CSS Document from the W3C listing all values and units.

To find which values go with which properties, you should check the official docs for that module. There is also a convenient table of the mappings way back in the year 2010, so not all mappings are contained, but the most common ones are.

Speaking of color, here’s something you should watch if you think that red, yellow, and blue are primary colors (SPOILER: THEY ARE NOT):

As with any technology, there are tons of ways to get things wrong with CSS values. Here are some very common mistakes:

  p   { font-vendor: any }     /* Invalid prop.: font-vendor */
  h1  { font-style: 12pt }     /* Invalid value for prop: 12pt */
  h1  { rotation: 70minutes }  /* 70minutes is not a valid value */
  img { float: left here }     /* "here" is not a value of "float" */
  img { background: "red" }    /* keywords cannot be quoted in CSS2 */
  img { border-width: 3 }      /* a unit must be specified for length values */
  h3, h4 & h5 {color: red }    /* & is an invalid token- WHOLE LINE must be ignored */

Selectors

Easiest to learn these by example. See:

• The official W3C Recommendation, with the selector definitions, syntax, and lots of examples.
• The summary in the W3C spec.
• HTML Dog’s CSS Selectors Reference, with lots of examples.

Trivial examples, nothing fancy:

  h1 {
    font-weight: bold;
    font-size: 12pt;
    line-height: 14pt;
    font-family: Helvetica;
    font-variant: normal;
    font-style: normal;
    font-stretch: normal;
    font-size-adjust: none
  }

  h1 { font: bold 12pt/14pt Helvetica }

  ol li {list-style: upper-alpha}
  ol ol li {list-style: upper-roman}
  ol ol ol li {list-style: lower-alpha}
  ol ol ol ol li {list-style: decimal}

At-rules

An at-rule is kind of like an instruction to the CSS parser. The common at-rules are:

• @charset
• @import
• @media
• @page
• @font-face
• @namespace

Cascade, Specificity, and Inheritance

The job of the user agent is to determine which styles to apply to each element. Easier said than done, right? After all:

• We can’t enumerate each of the hundreds of properties on each element; most of the time a property will need to be inherited from somewhere.
• You might have multiple stylesheets, with conflicting settings; the style sheets cascade.
• An element may be targeted in different (conflicting) rules; there has to be a way to measure each rule’s specificity so we know which one is applicable.

You can find a great overview in the Cascade and Inheritance Section of MDN’s Learning CSS Guide. MDN also has reference sections for each as well ( Specificity • Inheritance • Cascade )

Inheritance

Oversimplifiying, inheritance has to do with nesting:

<html>
  <head>
    <title>Another Example</title>
    <style>
      body {color: green; background: white;}
      h1 {color: navy}
    </style>
  </head>
  <body>
    <h1>Test</h1>
    <p>Here is an <strong>example</strong> of</p>
    <ul>
      <li>Style sheets</li>
      <li>Inheritance of properties</li>
      <li>Overriding</li>
    </ul>
  </body>
</html>

There’s more, so check out relevant reference material.

The Cascade

In a large web app you’ll find styles that are defined in the user agent’s own stylesheet, author style sheets written by the app developer, and (in some cases) stylesheets applied by the app user. The Cascade defines the precedence of all these things.

Specificity

Specificity determines which styles to use when an element is targeted in multiple rules. Somewhat oversimplifying, it’s computed by assigning a tuple (X, Y, Z) to each rule, where:

• X = the number of id (#) selectors
• Y = the number of class (.) selectors, attribute ([]) selectors, and pseudo-classes (:)
• Z = the number of type selectors and pseudo-elements (::)

and sorting on these tuples, though inline styles (see below) are more specific than any rule from a stylesheet and then the dreaded !important is used even over that.

After reading some tutorials and docs and practicing, you can refer to because the examples are so good.

Connecting a Stylesheet to a Document

Quite a few ways:

1. In an HTML <link> element
2. In an HTML <style> element
3. As a style attribute in any HTML element that allows it

The <link> element

You can specify the location of the stylesheet that is an external resource. This is the most common way and almost always the best. Example:

<html>
  <head>
    <title>Another Example</title>
    <link rel="stylesheet" href="plain.css" media="screen">
  </head>
  <body>
    <p>Hello</p>
  </body>
</html>

Possible values for media include: screen, tty, tv, projection, handheld, print, braille, aural, all.

The <style> element

You can add the styles directly in the head of a document. Example:

<html>
  <head>
    <title>Another Example</title>
    <style>
      body {padding: 2em; background: white;}
      p {font: 36pt serif}
    </style>
  </head>
  <body>
    <p>Hello</p>
  </body>
</html>

You probably should not be using these.

Use only in tiny web page hacks and prototypes. You should be cleanly separating your content and presentation.

Inline styles

You can put styles right on a single element. Example:

<h1 style="color:blue; text-align:right">Hello</h1>
<div style="position:absolute; z-index:1; left:20px; top:160px; width:150px">

Do not use these in plain HTML.

As you can imagine, while these are tempting, (1) they can only be used on a single element making the style impossible to share, and (2) they kind of violate the concept of separation of concerns.

HOWEVER, if you have a framework like React, bundling styles closer to elements is actually a good thing, but the approach is slightly different. There’s a lit of nuance in programming sometimes.

Box Model

Layouts

Flex

See A Complete Guide to Flexbox by CSS Tricks.

Grid

See A Complete Guide to Grid from CSS Tricks.

Position

See About the Position Property at CSS Tricks.

Transforms

Here is a talk and demo by Ana Tudor showing off what you can do with CSS and no JavaScript:

You should also browse her collection of code pens.

Media Queries and Responsive Design

Ideally you should make applications that work correctly on all kinds of different media—PCs, handhelds, phones, tablets, speech output devices, print, etc. All differ widely in resolution, color depth, bandwidth, etc.

You can learn the basics in the Responsive Web Design section of Google’s Web Fundamentals course.