Basics 102 - CSS

  1. What is CSS?

    "Cascading Style Sheets" which tells you absolutely nothing.

    In practice, CSS defines the look, feel, and layout of the page. For example, click and hold hereand look at what this page looks like without CSS applied.

  2. CSS Format

    The css format is split into three parts: selectors, properties, and values. Throughout the prototyping course we'll be covering the majority of the css spec, but for now going into it the most important thing is you understand the differences between these three things.

    CSS Example

    #content {
      background: red;
    }
    Selector `#content`
    Property `background`
    Value `red`
  3. Selectors

    The selector is what designates what the style is applied to. When we're declaring a selector, we use a combination of IDs, Classes, and Tag names from HTML to specifiy what object we want to be styled on page.

    A simple selector is just a single reference to a tag, id, or class. Like the following:

    .column {
      background: red;
    }

    In this example, `.column` is our selector. The `.` is a special character which designates a class name. So what this selector is really saying is "style everything with the class of 'column' with a red background".

    There are other special characters in css as well:

    Special characters

    Special character Description Example
    # Designates an id. `#content` `#sidebar` `#bubblegum`
    . Designates an class name. `.column` `.section` `.list-element`
    * Designates a wildcard that matches anything `*` `.section *`

    There are many more special characters in CSS, but these are the important ones to note for now. Notice the very last example, `.section *`. In this one we're actually chaining two selectors. Within a selector, a space designates a child of the previous selector, so in this example here it's saying, "Any child of an element with a `section` class".

    Chaining selectors

    Another example of chaining selectors would be the following. If we wanted to change the background of all paragraphs that were children of an element with the ID `bubblegum`, we would say:

    #bubblegum p {
      background: red;
    }

    Specificity

    Chaining is good because it adds specificity. "Bob's kid Marla" is more specific than just "Marla". In CSS, the most specific declaration wins.

    Sometimes we want to be more specific within a single declaration. For this we can add more to a single selector instance. For example:

    div.header {
      background: red;
    }

    The above example would select any div that had an class of header. This might be important because there may very well be multiple instances of elements with a class of `header`, but only one that is a div tag.

    pop quiz

    1. Describe what a selector of `p.notes` would apply to.
      All elements with a tag name of "p" and a class of "notes"
    2. What would the selector be if we wanted to match any children with the class of `zamboni` of an unordered list?
      ul .zamboni
    3. How would you select all children of a table with an id of `ingredients`
      table#ingredients *
      
  4. Properties

    Properties are the type of style that you apply. We've already seen `background` used, but there are *many* more than just that. There are currently 356 in the modern CSS3 properties. Over the duration of the prototyping course, we'll be going over quite a few of them.

    A selection of other properties just so you can get a sense of them:

    Property Description
    `color` The text color of an element.
    `width` How wide an element is.
    `pointer-events` Changes whether or not clicks and other mouse events are registered on the element.
    `animation` Defines a scripted animation on an element.
    `text-align` Defines how text is aligned in the element (i.e. left aligned, centered, right aligned, etc)
  5. Values

    The value of a property. Earlier we set our `background` to `red`. Red was the value in this case. Values can be singular:

    #element {
      width: 100px;
    }
    

    Or sometimes values are chained together:

    #element {
      border: 1px solid red;
    }