Lecture 5.1 (Tuesday, Feb. 16)

GitHub

• We've been using Git locally.
• This is awesome! Do it all the time!
• Git really shines when we use it to collaborate.

Demonstrate using GitHub:

• Create a project
• Share it to GitHub

Then, you need the project!

• Clone from GitHub

Then:

• Commit
• Pull/merge
• Push

Some notes:

• Every repository has the entire history
• You push changes back and forth
• If you both change the same file, you will get a merge conflict

Further Reading: Pro Git

Linking CSS Files

Continue with the example project from Part 1.

Create a linked CSS file.

You link the CSS file using a link element in the head:

<link rel="stylesheet" type="text/css" href="/static/styles.css">

There are a few attributes to note:

rel

The relationship the linked resources has to the current page. Here, we are using the ‘stylesheet’ relationship, which says that the linked resource is a stylesheet for the current page.

type

The type of data at the resource. Not required.

href

The location (hyperref) of the resource, as a URL (just like href in a).

link can be used for other things as well, but this is all we'll see for a while.

CSS Layout

Let's talk about the box model.

HTML pages are laid out in boxes. The main boxes are the block elements: div, p, and a number of others.

Show off the browser tilt — we can see the boxes.

CSS is (primarily) concerned with a few things:

• Organizing boxes
• Styling boxes
• Styling text

There are other things we can do too.

Organizing the Box

Boxes have a few properties that control their size and dimensions:

• height
• width
• padding
• margin

Boxes also have a border and content.

The box sizing model: the content fills height and width. Outside the content, there is padding, then the border, then the margin.

Each of these properties is a dimension: a length.

• 20px
• 30pt
• 0.5in
• 6mm
• 2.0em (relative to font size)
• 1en (also relative to font size)
• 2rem (relative to the root font size, from the html element)

Physical measurement distances (in, pt, mm, etc.) are fuzzy. Pixels are not actual device pixels, but are CSS pixels.

We can explicitly size a box with height, width, etc.

We can also use max-height and max-width to allow things to adjust within constraints.

Example: max out the page at 5.5 inches wide:

.shell {
    max-width: 5.5in;
    margin-left: auto;
    margin-right: auto;
}

The auto setting for the left and right margins tells the browser to split the distance evenly between them.

Watch the resize (with Firefox resize mode)

Suppose we want to off-center — we can put a padding-right: 1in, and it'll be pushed left!

Why?

Now what does that do on a resize?

Oops, that's kinda ugly. How to fix?

Responsive Design

We want the padding to go away on small screens.

CSS lets us say things are only used on certain screen sizes, etc.

@media screen and (max-width: 768px) {
    .shell {
        padding-right: 1in;
    }
}

Principle: Design the page for mobile. Use media rules to layer the desktop styles on top.

Box Flow

How the boxes flow around the screen is decided, first, by whether elements are block or inline.

Inline elements flow left to right (in LTR languages), and are allowed to flow onto multiple lines.

Block elements stack on top of each other, top to bottom, within their containing block.

Exception: a box can float!

• Floating sticks the box to the left or the right, other content goes around it.
• Want to be below the float? Clear it.

Useful Resources

In addition to the book, Mozilla has some tutorials:

• Text styling
• Learning the Web intro