CSS Part 2

Tue, Feb 26, 2019

Review of CSS Selectors

In the last class, we went over the three basic types of selectors in CSS:

  • Type (or name) selector for selecting an element by its name div

Type selector example

  • ID selector, for selecting an element by it’s id attribute #oneitem

Id selector example

  • Class selector, for selecting groupings of elements by their class attribute .group

Class selector example

In addition to these, there is actually a whole host of ways you can select elements in a document. We’ll go over two of them.

Comma Separated CSS Selectors

In CSS, you can comma-separate selectors so that a rule will apply to multiple selectors at once.

p, div, h1 {
    color : black;
    font-size : 12px;
}

In the above code block, the CSS rule is being applied to <p> tags, <div> tags, and <h1> tags.

This is equivalent to writing:

p{
    color : black;
    font-size : 12px;
}
div{
    color : black;
    font-size : 12px;
}
h1{
    color : black;
    font-size : 12px;
}

So basically, it’s a shortcut; nothing more.

Space Separated CSS Selectors

When you have several elements in a selector which are separated by spaces, it implies that some elements are nested in other elements.

/* only affects p tags inside container element */
#container p{
  background: orange;
}

/* However, this would affect all p tags */
p{
    background: orange
}

The above code would only target <p> tags which are decedents of a #container element. If there are other p tags in the document elsewhere, those are left alone.

Box Model

Next, let’s go over the box model, which consists of margins, padding and a border. It’s important to note that when you set a width using CSS, it only applies to the content inside the box. Padding, margins and borders are extra. (Note however, there is a CSS rule called box-sizing that can switch this fact around).

Box model graphic

In code, the above would look like this:

<head>
    <style>
    div{
        width: 200px;
        padding: 10px;
        border: 2px;
        margin: 20px;
    }
    </style>
</head>
<body>
    <div>Hello</div>
</body>

Specifying Multiple Margin or Padding Values

When specifying margins or padding, you can set all four values at once.

/* top, right, bottom, left */
div{
    margin: 3px 4px 10px 5px;
}

/* the above is equivalent to */
div{
    margin-top: 3px;
    margin-right: 4px;
    margin-bottom: 10px;
    margin-left: 5px;
}

These for numbers correspond to the top, right, bottom, left, respectively.

Think about a clock starting at 12:00 (top), and then count clockwise: 3:00 (right), 6:00 (bottom), and 9:00 (left).

Dmitry Baranovskiy from the Noun Project Clock designed by Dmitry Baranovskiy from the Noun Project, Attribution (CC BY 3.0)

You will also see instances where only two numbers are specified:

/* 10px refers to the top and bottom, while 15px refers to left and right */
div{
    padding: 10px 15px;
}

/* the above is equivalent to */
div{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 15px;
    padding-left: 15px;
}

The first number refers to both the top and bottom padding, while the second number refers to the left and right measurements.

On a rare occasion, you might see three numbers specified:

/* 10px is top, 15px is both left and right, 20px is bottom */
div{
    margin: 10px 15px 20px;
}

In these situations, the first number is only the top, second number is left and right, and the third number is for the bottom. Think: We’re still going clockwise, but without the fourth number, we simply default to what the right measurement was set at.

Measuring the Box Model Correctly

There is a counter-intuitive issue with the Box Model in CSS. The appearance of a box is determined by the padding, border and width combined. This means if you set the width of a box to 200px, then add a 1px border, then add 10px of padding, the box will actually appear as 222px (200 + 1 + 1 + 10 + 10).

Box appearance id determined by padding, border, and width combined

#container{
    width: 960px;
}
#innerbox{
    width: 960px;
    padding: 10px;
    border: 1px solid red;
}

In the example above, the containing box is 960px wide, and the inner box is also 960px wide. But you’ll notice that the inner box doesn’t fit! This is because when you add padding, it widens the box in addition to the width. The inner box has a border (shown in red) and padding (shown in orange).

When you add padding or border, this increases the size of the box beyond the width value you set.

Backgrounds

Backgrounds can be set with colors or images. (It is generally a good idea to do both, so if the image fails to load, you still see the background color).

Here are some background properties:

background-color Sets the color of the background of an element
background-image Specify an image with notation url(img.jpg)
background-repeat Should the image repeat. Values are repeat-x repeat-y no-repeat.
background-position Where should the image be positioned? This property takes two values space separated, for the x and y position. Words like top center can be used, or percentages or pixel values (i.e. 45px 30%)
background-attachment Determines if the background image should move as the user scrolls. fixed and scroll are the two primary values.
background-size Determines how large the background image should be. Using a size value of cover, contain, or a percentage 100% are all potential value. Cover means to cover the entire area, even if the image is clipped. And contain means that the entire image will show, even if there is empty space in the box.

In particular, the background-size property comes in handy, particularly when you want to place text over the background.

In-Class Exercise

This is a sample boilerplate HTML file we will use for the in-class exercise:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Intro to Coding Interactives</title>
    <style>
    
    
    </style>
</head>
<body>
    
    
    
    
    
</body>
</html>

And we will be using this CSS Reset:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

Recreate the opening two sections of this example using the assets provided below.

Background top image

Direct link to the background image for the above screenshot

Quote for the second section

The final code from the in-class exercise will look like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Intro to Coding Interactives</title>
    <style>
        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent;
        }
        
        header{
            background-image:url(https://newmedia.report/images/classes/intro-to-interactives/background.png);
            height: 100vh;
            color: #ffffff;
            text-align: center;
            overflow: hidden;
            background-size: cover;
            background-position: center;
        }
        
        header h1{
            font-size: 5em;
            font-weight: 100;
            margin-top: 40vh;
        }
        
        header h2{
            text-transform: uppercase;
            font-weight: 100;
            letter-spacing: 0.2em;
            font-size: 1.4em;
        }
        
        header p{
            margin-top: 10vh;
            font-family: sans-serif;
            font-weight: 100;
            color: #aaaaaa;
        }
        
        section{
            height: 100vh;
            background-color: #111111;
            color: #ffffff;
            text-align: center;
            overflow: hidden;
        }
        
        section q{
            font-style: italic;
            font-size: 2em;
            font-weight: 100;
            max-width: 600px;
            display: block;
            margin:40vh auto 0;
        }
        
        section cite{
            margin-top: 20px;
            display: block;
            font-style: normal;
            font-size: 1.5em;
            color: #555;
        }

    </style>
</head>
<body>

    <header>
        <h1>The Wild Path</h1>
        <h2>&mdash; An Icelandic Adventure &mdash;</h2>
        <p>An interactive storytelling experience.</p>
    </header>
    
    <section>
        <q>Twenty years from now you will be more disappointed by the things you didn't do than by the ones you did do.</q>
        <cite>Mark Twain</cite>
    </section>
    
</body>
</html>