Getting Started: Fincher Interview

Let’s jump into it. On this page, you’ll find a few exercises and explanations. For the sake of ease, these first forays into CSS are hosted on codepen.io. Later we’ll worry about linking your HTML and CSS files together, and serving them up right. But for now, let’s take advantage of this nicety.

Styling Elements

As I explained on the previous page, we add style to a webpage by using CSS selectors to target HTML elements. Those selectors include CSS declarations that adjust how semantically-styled HTML appears.

Here are a few examples.


First, here’s just a few sentences, unstyled. They have basic HTML markup applied. The whole thing is wrapped in an <article> element.


Now, let’s apply some basic styles. I’ve made use of the p, em, and article selectors.


Here’s how some of those properties work (make sure you’ve clicked on the HTML and CSS buttons above, or go to the related codepen.io site:

background: gainsboro;

Sets the background of the entire element to a CSS-defined color, in this case, “gainsboro,” a light grey. Since I don’t set the background property of the other selectors, they inherit the property I assigned to article.

margin: 10px;

A paragraph element in HTML is a giant block. Like all HTML block-level elements, it wants desperately to occupy all of the horizontal space it can – almost like it is pushing against the walls with spring-loaded arms. The margin is the outermost layer of a block. In this case, because our spring-loaded arms can’t actually push expand the browser window by 10 pixels on the left, right, top, and bottom, it does the next best thing: It pushes hard enough against those walls that it actually condenses the block itself by 10 pixels on the top, bottom, left, and right. The white space that is leftover is now part of the article’s margin.

padding-top:10px;
padding-left:20px;
padding-bottom:20px;

Boxes. All block elements are basically boxes inside of boxes. We’ll cover this in greater depth, but for the moment, two things: 1. If margin is the outermost layer of the block-level element, then padding is the interior layer. They both do essentially the same thing, but margin controls the space OUTSIDE the border of the block, and PADDING controls the space INSIDE that border. 2. Since all HTML block-level elements have 4 sides (top, bottom, left, and right), and since we talk about them all the time, we’ve come up with shortcuts! They can be combined in powerful ways, but in essence: Specifying margin:10px is the same as writing out four separate lines: margin-left:10px; margin-right:10px; margin-top:10px; and margin-bottom:10px;

text-decoration: underline;
font-style: normal;

See how I styled not only block-level elements like <p>, but also an inline element, <em>? By default, the em selector makes things italic. Here, I’ve reversed the process! To underline my words, I set text-decoration to underline. Then, in order to get rid of the italic appearance, I set font-style to normal.

font-family: Helvetica, Arial, Sans

The font-family property is powerful because I can assign a whole bunch of different fonts at once, and the browser will try each one, in order, until it finds a font I requested that is actually sitting on the viewer’s computer. In this case, for example, if you were visiting from a Windows PC, you might not have Helvetica installed… so the webpage would fallback to Arial, a knock-off of Helvetica. The whole approach was an attempt to respect copyright holders' claims to typefaces (I could just send Helvetica.ttf to your browser, but that could be seen as theft of intellectual property). In the past couple of years, however, font-family is less useful, as Google and Adobe both now provide easy access to a wealth of typefaces. We’ll tackle those soon.


Now you try!

Here’s a few more paragraphs from the same article, already set into HTML and put into codepen.io.

Start by applying similar styles to those paragraphs as I’ve done here. Even if you’re not sure you know what you’re doing, play around with it: That’s one of the great things about codepen’s instant feedback.

Then, when you’re ready to experiment, change things up:

  • Can you make the italic text appear with a line through it, for example?
  • Can you make bold text italic, and italic text bold?
  • Can you reverse out the text: Put white text on a black background?
  • Can you make the magazine names appear as Helvetica red letters on a gold background, while the rest of the text is black Times (or “Times New Roman” in quotes, or Georgia) on a plain white background?
  • Play with margin and padding. What happens when you add this selector to the start of your CSS? (Note: The asterisk is really important here!)
* {
  border: 1px dashed red;
}