Overview
Design Choices
Boilerplating
Ready-to-Style
Simple Styling
Backgrounds
CSS Exercises

Adding Some Simple Styling

If you've looked at the default version of our document with only the boilerplate for a framework and the "reset the browser" css file ("normalize.css") to guide its appearance, then you know that we have a good bit of ground to cover. But that presents a kind of danger in itself: We could spend hours tweaking and nudging the HTML on a page, to no great effect. We need to decide on the changes we think are most urgent (and the ones we think we know how to accomplish). The rest will have to wait. Here's my thinking:

To-Do List:

  1. Set typeface to Avenir or Helvetica or Arial;
  2. Increase size of left and right margins
  3. Push the page content a bit to the right.

Let's start with the typeface. We'll eventually look at how to use Google's advanced type kit to drastically improve the typography of the rendered page, but for now, we'll rely on CSS' default approach.

We can do lots of cool things with CSS and typefaces. But we shouldn't. A rendered webpage typically relies on files stored on the user's computer -- if we can't guarantee they'll be there, then our design may not render properly. So we play it safe (for now).

The CSS property "font-family" allows us to specify a whole series of fonts for the browser to use: It will try the first one, but if that isn't available, it will try the second, etc. This is often called "failing gracefully," a popular idea in computation.

Looking Closely at CSS

Remember that CSS tells the browser how to apply styles to the elements of a document. That means we typically need to know two things when we write CSS: (1). WHAT should my style look like, and (2). WHERE should I apply it?

For example, here's how I'd set the font for all paragraphs in my document, as well as making all my paragraphs medium-grey.

p {
     color: #9A9A9A;
     font-family: Avenir, Helvetica, Arial, sans;
}

In this case, the WHERE is the paragraph selector, the letter "p". And the WHAT is (a) the color grey and (b) a sans-serif font. Now, every time my browser runs into something that has been marked as a paragraph in my HTML, it will color it grey and set it in a sans-serif typeface. In this case, it is worth noting, WHERE was not a headline (h1-h6), for example: Those values would not be applied there. Just to everything inside a "p" tag.

h1,p {
     color: #9A9A9A;
     font-family: Avenir, Helvetica, Arial, sans;
}

h1 {
     font-size: 24px;
}

Here, I've assigned the same style to two different CSS selectors: the "p" (paragraph) and the "h1" (header 1). You might think of "h1, p {...}" as the equivalent of saying "assign to both h1 AND p...". They'll both receive the same treatment. Its really just a shortcut, as this would do the same thing:

p {
     color: #9A9A9A;
     font-family: Avenir, Helvetica, Arial, sans;
}

h1 {
     color: #9A9A9A;
     font-family: Avenir, Helvetica, Arial, sans;
     font-size: 24px;
}

In both cases above, you'll notice that I've assigned an additional style to "h1", setting its "font-size" property to "24px" (px stands for "pixels", one of the tiny dots that make up your computer screen). In both examples above, that "font-size" declaration will only apply to everything in our HTML that we've tagged "h1". Everything else will stay at its default size (which, in most cases, it turns out, is 16px).

Size

Like most things in CSS, properties involving "size" can usually be declared using any number of units; some work better than others, but for now, don't worry about understanding all of them. Just use the one or two that make sense to you. Among the most common units of measure:

The top of this list contains only absolute units of measure: points (pt) and pixels (px) are absolute values, as are picas, inches, and centimeters. They are self-contained. Declaring the size of something in pixels or points or inches leads to a predictable outcome: An inch is always an inch, and 16 pixels is always 16 pixels, no matter the context.

The items beneath the horizontal line are not absolute: They are relative units of measure. They are a bit unpredictable, but they are invaluable for contemporary design, where we are building sites for iPhone screens that don't even exist yet.