Lecture 4.2

Quiz 1

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

HTML and CSS

We've talked about separating presentation from content.

Now it's time to do it!

We have our nice HTML, that lays out what the text means:

(view https://md.ekstrandom.net/teaching/)

If we turn off the styling, this page gets pretty boring.

The style lays on a layer of magic.

What To Style?

So, what do we style?

The simplest thing to style is an element. Let's look at that:

h1 {
    font-family: Papyrus, fantasy;
}

What's going on here?

• The selector, in this case h1, picks the elements to style. Styles are always applied to an element.
• The properties, inside the squiggly braces, apply styles to the element.
• Each property consists of a name (in this case font-family) and a value (here, a comma-separated list consisting of the strings ‘Papyrus’ and ‘fantasy’).

There are a lot of selectors, and a lot of properties!

Between styles and images, we can make a lot of things.

Basic Text Properties

Some basic text properties are very useful.

font-family

The font to use. Comma-separated list of strings; either font names, or the names of default families (e.g. serif to use the default serif font, often something like Times New Roman).

font-size

The font size. This is a dimension. There are many types of dimensions, but you can say things like 15pt for 15-point font, 20px for 20-pixel type (not recommended).

font-style

The font style (normal or italic)

font-weight

The font weight (normal, bold, or a number 100–900; normal is 400, and bold is 700)

font-variant

normal or small-caps

color

The color of the text

Establishing Basic Styles

The default styling is pretty bland, so it's common practice to define custom styles for the basic elements.

The way I generally do this is to apply my default text font to body (or occasionally html), and then specialize fonts for specific kinds of elements.

Inherited Styles

Elements inherit styles from their parent elements.

So, when we apply something to body, it trickles down to everything that doesn't have its own style overriding it.

Neat!

So let's style some things.

body {
    font-family: Georgia, serif;
    font-size: 16pt;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Gill Sans MT", "Gill Sans", Avenir, sans-serif;
}
h1 {
    font-size: 20pt;
    font-weight: bold;
}

We'll see a basic HTML then have its headers formatted with Gill Sans.

More Selectors

We have seen element selectors, and we've seen selectors combined into a list to style multiple elements at the same time.

We can do more!

element

Select the elements of type element.

.class

Select elements whose class attribute contains the token class. For example, if you have an element <h3 class="speaker">, then .speaker will select it.

#id

Select the element whose id attribute is id (e.g. <div id="scene3"> can be styled with #scene3) (IDs must be unique in the document).

sel1 sel2

Select elements matching sel2 that are descendants of elements matching sel1

As you can see, we can piece together rather complex selection. We won't only use this for CSS — selectors will be our primary means for locating elements.

There are more kinds of selectors. We will talk about them more later.