Front End Web Development

Spark Boulder, Summer 2017

Session 3: The Search for Session

CSS styles and selectors, external stylesheets

Projects!

Over the course of the next 10 weeks, I'm going to have you complete 4 different projects.

You can present your project to the class, if you want! Definitely not required.

Just like all of the other assignments, these aren't formally "due" anytime.

These projects won't be formally graded at all, but they'll be included in your "report card" at the end of the class. They're also really cool to show off to potential clients and employers!

Assignment 4, Project 1: Portfolio Site

For your first project, I'd like you to create a simple portfolio site. Nothing too fancy!

You can put whatever you'd like on it! You can include things like:

Really, anything you want! I'm not "grading" these. You can submit them whenever you want.

If you'd like to see a couple examples of other portfolios, you can check them out on the readings for session 4. Some of these are pretty advanced! I just want you to create something simple that you're comfortable with.

A couple things:

More Dumb Fun Web Dev Stuff

Placeholder image sites, in order of least to most ridiculous:

Or, my secret "wow where did you find such awesome stock images" weapon:

Inline styles recap

Remember, we apply inline styles directly to HTML elements, using the HTML style attribute:

<h1 style="color: purple; font-size: 200%;">Rhombus!</h1>

<p style="background-color: beige; border-style: solid; border-width: 5px; border-color: green; height: 100px;">Shmow-zow!</p>

We can apply multiple styles by just putting them in a list. Don't forget those semicolons!

Internal Styles

Internal styles aren't included on individual elements (like inline styles with the style attribute), but instead are included on the HTML page.

At the top of your page, inside the <head> tag, you can use a <style> tag to include something called CSS:

<html>

<head>
    <style>
        body {
            font-family: "Comic Sans MS", sans-serif;
        }

        h1 {
            color: red;
            text-decoration: underline;
            text-align: center;
        }

        img {
            border-style: solid;
            border-color: chartreuse;
            border-width: 5px;
        }

        p {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>Ken's Site</h1>
    <img src="stupid.gif" />
    <p>
        Ken likes to do the following things:
    </p>
    <ul>
        <li>Bike in the rain</li>
        <li>Eat burritos</li>
        <li>Play video games</li>
    </ul>
</body>

</html>

CSS stands for Cascading Style Sheets.

What's CSS?

CSS (Cascading Style Sheets) is a language that helps us style pages.

CSS is different than HTML! Whenever you have HTML <style> tags on a page (internal styles), everything inside those tags is CSS.

<style>
    /* this is all CSS! */
    h1 {
        color: red;
        text-decoration: underline;
        text-align: center;
    }
</style>

(This means that you have two different languages, HTML and CSS, in the same file.)

What's a CSS "rule"?

This whole thing is a CSS "rule":

h1 {
    color: red;
    text-decoration: underline;
    text-align: center;
}

CSS rules consist of a selector and a declaration block.

In this case, h1 is the selector, and everything inside the curly brackets {} is the declaration block.

What's a declaration block?

The second part is the easy part - we've already been declaring styles with our inline styles.

This is exactly the same thing! Style name, colon, style value, semicolon. Did I mention not to forget the semicolon?

Just put it all between curly brackets.

What's a selector?

A CSS selector indicates what elements we want to apply styles to.

In this case, h1 is our CSS selector.

h1 {
    color: red;
    text-decoration: underline;
    text-align: center;
}

Tag selectors

One of the easiest uses of selectors is to select all HTML elements with a specific tag on a page.

This will apply the styles in the declaration block to all of the selected HTML elements.

From our first example, all of these use tag selectors to style all instances of various HTML elements.

body {
    font-family: "Comic Sans MS", sans-serif;
}

h1 {
    color: red;
    text-decoration: underline;
    text-align: center;
}

img {
    border-style: solid;
    border-color: chartreuse;
    border-width: 5px;
}

p {
    color: blue;
}

The reference for all CSS selectors

I visit this page a lot.

If you want to figure out how to select all checkboxes that are checked, or select every other paragraph element, or select links that have already been visited, you can find it here.

http://www.w3schools.com/cssref/css_selectors.asp

The "and" selector

I generally don't want to write two different rules to change all <h1>s and <p>s to the color red. Good code reuse and all.

/*  
    don't do it this way!
    if you want to change the color of h1 and p later,
    you'll have to change it in two places instead of one.
*/
h1 {
    color: red;
}

p {
    color: red;
}

We can just use a comma in the selector to specify multiple types of tags.

/* the right way: */
h1, p {
    color: red;
}

id selectors

Hey, remember that id global attribute? We can use that to select specific individual HTML elements.

To select an HTML element with a specific id, we just prefix the value of id with a #:

<html>

<head>
    <style>
        #burritos {
            color: pink;
        }
    </style>
</head>

<body>
    <p>
        Ken likes to do the following things:
    </p>
    <ul>
        <li>Bike in the rain</li>
        <li id="burritos">Eat burritos</li>
        <li>Play video games</li>
    </ul>
</body>

</html>

However

Don't put the same id on multiple elements. id should be treated as a unique identifier, and only one element with a given id should exist on the page at any one time.

Want to style arbitrary groups of elements? Use class!

class selectors

Similar to id selectors, we can use class selectors to select specific elements.

The difference between id and class?

To select a specific class in a CSS selector, prefix the class with a . (period)

<html>

<head>
    <style>
        .nerdy-stuff {
            background-color: black;
            color: LawnGreen;
        }
    </style>
</head>

<body>
    <p>
        Ken likes to do the following things:
    </p>
    <ul>
        <li>Bike in the rain</li>
        <li class="nerdy-stuff">Play video games</li>
        <li>Eat burritos</li>
        <li class="nerdy-stuff">Make video games</li>
        <li>Play the ukulele</li>
    </ul>
</body>

</html>

The "child" and "direct child" selector

This gets into some more advanced selectors. Similar to the "and" selector, we can start getting into "child" selectors.

To select child elements, just put spaces between each selector.

Note that this selects all elements of the second selector inside elements of the first selector, no matter how far down nested they are!

Alternatively, you can select just the immediate child of a given selector by separating selectors with >

This is a little hard to demonstrate, so bear with me:

<html>

<head>
    <style>
        .outer {
            background-color: orangered;
            height: 200px;
            width: 200px;
        }

        .middle {
            background-color: lawngreen;
            height: 150px;
            width: 150px;
        }

        .inner {
            background-color: cornflowerblue;
            height: 100px;
            width: 100px;
        }

        .first div {
            border-style: solid;
        }

        .second > div {
            border-style: solid;
        }
    </style>
</head>

<body>
    <div class="first">
        <div class="outer">
            <div class="middle">
                <div class="inner">
                    content!
                </div>
            </div>
        </div>
    </div>
    <br>
    <div class="second">
        <div class="outer">
            <div class="middle">
                <div class="inner">
                    content!
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Selector Recap / Cheatsheet

h1 {
    color: red;
    text-decoration: underline;
    text-align: center;
}

Everything before the curly brackets {} is the selector, and everything inside the curly brackets {} is the declaration (or the styles that we want to apply)

When in doubt:

  1. Add a div
  2. Add a class to the div
  3. Style that class with CSS

And that will get you like 90% of the way there with all of your CSS problems!

A hypothetical situation

Let's say I have 10 pages on my site: index.html, contact.html, about.html, portfolio.html, interests.html, etc.html

Each page has the following internal styles that I've copied and pasted between them:

<style>
    h1 {
        color: red;
        text-decoration: underline;
        text-align: center;
    }
</style>

All of a sudden, Marketing storms into your office and says "Epic Hacker Code Ninja Rockstar Web Developer Ken! We need your help!"

"We need to change all of the headings on our pages to blue!"

After briefly facepalming, you hop into your text editor, realize that you've now got to change the contents of the <style> tag in 10 different files. After another facepalm, you vow to find a better way to deal with this.

External Styles

If we have 10 different files that all use roughly the same styles, we should just keep all our styles in one place, not copy-pasted across 10 files.

Enter external styles, or CSS files!

We can define a CSS file by putting all of our CSS (the stuff inside the <style> tag) inside a file with the .css extension.

/* style.css */
h1 {
    color: red;
    text-decoration: underline;
    text-align: center;
}

Then, in our index.html we use a <link> tag with the href and the rel attributes to indicate that we want a "stylesheet" from the following URL:

<!-- index.html -->
<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Ken's Site</h1>
</body>

</html>

If we have multiple pages that use style.css, any changes that we make to style.css will apply to all of our pages. Mathematical!

"Best practice?"

You should always use external styles (CSS files).

You should almost never use inline styles (the style attribute) or internal styles (<style> tags)!

In the future, I'm going to exclusively use external stylesheets (CSS files) for all examples in class.

Want to get into some complicated CSS?

(I wish that a "parent" selector existed, but it doesn't. lots of "child" selectors, but no way to select the div that's the parent of all .something elements.)

What questions are there?

Stuff for tonight:

How to be a Web Developer

Excelsior! 🚀

Appendix

Backgrounds!

.kittens { background-image: url("kittens.jpg") }

.header-section { background-image: url("flatirons.jpg") }

Other background styles:

The CSS Box Model

Everything on the internet is basically just a series of nested boxes.

The CSS Box Model

Every single element on the page has (from outside in) margin, border, padding, and content (or height and width)

Content

The dimensions of our element is based on the "content" of our element, which includes text and other nested elements.

If we've got a <div>, we can set the dimensions of our element by using the height and width style property.

Remember that the height and width properties only apply to the content - it doesn't include the padding, border or margin. Mathematical!

In session 5, we'll talk more about the difference between block, inline, and inline-block elements. If you want to see the difference now, try messing around with the difference between <div> and <span>, and check out the display style property.

padding

Padding is the space between the content and the border of an element. You can use it to move text farther inside the element from the border! Algebraic!

padding-top: 10px;

Note: the space taken up by padding will still show any background-color or background-image.

border

Just what you think it is - the border surrounding an element. The content and padding space are both inside the border. Rhombus!

border-style: dashed;
border-width: 10px;
border-color: purple;

(Advanced) Need to have the background show up underneath the border? Check out background-clip.

margin

The margin is the space of an element outside the border. Think of it as some space that can be used to push elements apart.

We can use the auto keyword to automatically center an element inside of a block-level element, so long as we've already set the element's width. Shmow-zow!

margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;

(We'll learn a bit more about centering and aligning things in session 5.)

Check those corners!

border-radius - actually applies to the radius of corners

border-radius: 10px; (shorthand to set all corners)

Can also do border-bottom-left-radius, border-top-right-radius, etc

Advanced: Shorthand properties

Shorthand properties let you set multiple styles at once.

Also, they do different things depending on how many arguments are supplied!

background: <color> <img> <repeat> <position>

margin: <top> <right> <bottom> <left> - (think clockwise)

padding: <top> <right> <bottom> <left> - (think clockwise)

border: <br-width> <br-style> <color>