CSS

Chapter 3 on Styles does a nice job of introducing bits of CSS as needed. Read that first, at least through page 55. Here's an organized summary of what we learned, plus a bit more.

If you don't have Chapter 3, here's a link to a copy of a scan of the chapter. To respect the author's copyright, the link is only valid on-campus or with a password. Ask Scott if you don't have that password.

FEWD Chapter 3

CSS concepts

  • normalize.css removes some of the formatting differences between browsers, making it easier to build consistent websites
  • A CDN is a content delivery network, useful for lots of common files, including jQuery
  • CSS rules, which include
    • selector(s)
    • properties and values

CSS rules

header, footer {
    margin: 0;
    padding: 8px 4px;
    background: cornflowerblue;
    color: inherit;
}

CSS Properties

  • background background colors
  • border an optional box around the element
  • color font colors
  • display how an element is laid out on the page: block stacks vertically, inline is like text. There are other values, like none to act as if the element doesn't exist
  • font-family sets the font for the element
  • font-size sets the size of the font
  • list-style can change or remove the bullets in a bullet list.
  • margin spacing outside the element's border
  • padding spacing between the box and the contents
  • text-align can center text, right-align it and such
  • text-decoration can add or remove underlines and such
  • text-transform can capitalize, lowercase or uppercase text
  • width is the width of the contents of the element, not including any padding, borders or margins. This can be very confusing.

Several of the above are shorthand properties. You can be more specific, like border-left-style

Box Model

The box model is most easily learned by playing with the dev tools, but the idea is simple:

  • block elements work like big boxes that are (by default) stacked vertically on the page
  • they have, outside to inside:
    • margins. These just have widths. They have the background color of the parent block
    • borders. These can have widths, styles, and colors
    • padding. These just have widths, but they take on the background color of this block
    • content. This has width and many other properties

You can use display:block as a declaration to turn a non-block element (like A, IMG or SPAN) into a block element.

Selectors

There are quite a few kinds of selectors available in CSS. Some are used often, some only rarely. Here are some that are simple and very common:

  • tag: style every such tag (e.g. paragraphs <p> or list items <li>) You have to specify one of the existing HTML tags, like p
  • classes: style every element with that class. Make up a class name, say fred and use .fred as the selector. Specify the class with an attribute, like <p class="fred">
  • id: style the (unique) element with that ID. Make up an ID, say george and use #george as the selector. Specify the id with an attribute like <p id="george">

Our book authors advocate avoiding ID. I don't really agree with their reasoning, but their way is fine, too. If something is definitionally unique, I don't see a problem with giving it a unique ID. Furthermore, IDs are the only way to specify a location within a page using a URL. Let's turn to that now.

IDs

This section is not covered in the chapter, or indeed, in the book, as far as I can tell. Still, it's worth re-explaining the href="#" that they used in Chapter 2.

This section is really about URLs. We learned that URLs uniquely specify a single webpage in the world. URLs are even more powerful than that. They can even specify a location within a page. This is done by doing two steps:

First: Giving the location an ID. That's done in HTML with the ID attribute. Any element in HTML can be given an ID, like shown this:

<span id="george">this span is george</span>

This span is george

Second: The absolute URL to specify that location is like http://domain.com/path/to/page.html#id-of-element The # is a special character (called a hash mark, sharp sign, pound sign) separating the URL for the page from the ID of the element (called a fragment).

With relative URLs, you can omit things. So a within-page link to a fragment would just be #id-of-fragment.

Try these two examples, and look at the location box in your browser:

When a web designer wants a link to the current page, they will usually use # as the entire URL, letting everything default. Here's a link to this page.

ID versus Class

If you're confused about the difference between ID and class, you're not alone. Many students have been confused about this.

Here's the key difference: an ID has to be unique, meaning there can be only one element with a particular ID. If we anthropomorphize the elements on our page, an ID is like a Banner ID: there should be only one person with a given ID (barring identity theft).

If we use an ID to identify a place on a page for a URL, we want to specify a single place to go, not multiple places. This reminds me of a short (1:20) clip from Monty Python's Life of Brian: you are all individuals

Classes and IDs are similar in the following ways:

  • we make up a label
  • we apply the label to 1 or more elements
  • we refer to the label from the CSS rules

The difference, of course, is that an ID is a label that can be applied to at most one element, while a class is a label that can be applied to any number of elements.

Interactive Demonstration

I created an interactive selector display that will help show you what elements various selectors pick out. To use it, first, view source just to see the relevant stuff that is going to be picked from. It's not the whole page, just the part with the beige background. The HTML looks something like:

    <h2>this is an h2 header</h2>
    <p id="par1">This paragraph has ID <code>par1</code></p>
    <h2>this is another h2 header</h2>
    <p>this paragraph precedes the list of fruits and veggies</p>
    <ol id="list1">
      <li class="fruit">apple</li>
      <li class="veg">broccoli</li>
      <li class="fruit" data-tag="tough">coconut. this is tough</li>
      <li class="fruit">date</li>
      <li class="veg">endive</li>
      <li class="veg" data-tag="yucky">fennel. this is yucky</li>
      <li class="fruit">"g" fruits
        <ul>
          <li>gooseberry</li>
          <li>grape</li>
          <li>grapefruit</li>
          <li>guava</li>
        </ul>
      </li>
      <li class="veg">horseradish</li>
      <li>tomato</li>
    </ol>
    <p>this paragraph follows the list of fruits and veggies</p>

Take a brief look at the tags, classes, ids, and the overall structure. Then click thorough and try the various selectors.

Summary

  • CSS is how we apply style to our page.
  • It consists of a set of rules
  • Each rule comprises a set of properties and values, like color: red
  • The box model applies to all block elements, such as paragraphs (p), lists (ol and ul), list items (li) and div.
  • In the box model, an element has (from outside to inside):
    • margin. This just has width
    • border. this has a width, style and color
    • padding. this just has width. Its background color is the same as for the content
    • content.
  • each rule also has a selector, which chooses which element(s) to apply the rule to.
  • simple selectors include:
    • tag, like p to apply to all paragraphs. Has to be one of the built-in HTML tags.
    • .class_name to apply to all elements with class='class_name'. We get to make up the class name.
    • #id_name to apply to the sole element with id='id_name'. We get to make up the id name.
  • The difference between classes and ids is that an id has to be unique.