CSS Review

Learning Objectives

Describe what on a webpage can be modified with CSS, and what cannot
Identify CSS methods that can replace bad habits in HTML
Properly separate the concerns of semantics and style
Identify the components of the box model
Differentiate between border-box and content-box values for box-sizing

Framing (5 minutes / 0:05)

What Is CSS?

Cascading Style Sheets are what make webpages look like more than just words on a page. HTML's only purpose is to say what purpose chunks of content serve; CSS's only purpose is to say what a chunk with a certain purpose should look like.

You can accomplish a lot with very little using CSS. If you want to go the extra mile, you can accomplish some seriously amazing things. Oftentimes when dealing with CSS, it can be a pain.

No matter how you look at it, however, a working knowledge of CSS is absolutely essential. When it comes time to show off your projects at the Student Spotlight after this course, the first thing most prospective employers will see is your styling. And as we all know, first impressions are incredibly important.

This afternoon is going to be almost entirely you working through some exercises we have prepared for you. You will not turn in these exercises.

This is a step towards building that working knowledge of CSS and solidifying what you learned in the pre-work. Your goal isn't to memorize all the 500+ CSS properties that are out there. That's impossible. Your goal is to just get an idea of what you can accomplish with CSS, and then know what to Google.

Tools That Can Help

The CSS Validator is a tool into which you can copy and paste your CSS, and it'll tell you precisely what's wrong with it. We'll be expecting you to validate your CSS during this course.

The Chrome Element Inspector lets you look at a specific element on a page, see exactly which CSS rules are being applied to it, and turn those rules on and off and modify them. It doesn't change your file; refresh the page, and the changes are gone.

What Should You Do If Something Is Unfamiliar?

Read it like English. CSS is intended to be readable, although sometimes it's more successful than at other times.

Look it up. If you don't know what box-sizing means, Google css box-sizing.

The purpose of this class isn't for you to walk away being an expert in all things CSS. That takes months, and tolerating many unexpected, sometimes counter-intuitive results. Rather, it's for you to be exposed to all the things that can be accomplished with CSS. If they're on your radar, you can always look them up later.

Scavenger Hunt

For the rest of class, we're going to do a series of CSS exercises. The best way to get better at something is to practice. We will review the CSS you've already learned, while refining and adding to your understanding.

Identify different ways of writing selectors as you progress through the exercises. There's a checklist below to outline important takeaways from the exercises.

Note: The checkboxes are not clickable. In your own notes, you can copy and paste the below items into a text editor and write the appropriate CSS rules & selector below.

Write a selector that will select and apply a style to:

any element
an element of type E
any element of type E and any element with type F
any element with ID equal to "myid"
any element with class equal to "myclass"
an E element with ID equal to "myid"
an E element with class equal to "myclass"
an F element child of an E element
an F element that is a direct child of an E element

You Do: CSS Diner (10 minutes / 0:15)

Please complete this exercise on your own. It's an interactive walkthrough on the different ways you can select elements in CSS. Don't worry if you don't get to the end. The important part is that you get through the earlier basic CSS selectors and, if you have time, give the more advanced selectors and pseudo-selectors a spin.

Y'all Do (in pairs): CSS Review (30 minutes / 0:45)

You will be working in pairs to complete this exercise. Please count off from 1 to [class size / 2].

This exercise is divided into multiple sections. Complete them in the following order...

Selectors
Sizing
Positioning

A Note About `width` and `box-sizing`

The Box Model explains how CSS width is Calculated. By default, how wide an element is on the page is a combination of width + padding + border and the rendered height = height + padding + border. This can be problematic when trying to create a layout or position things logically on the page.

The box-sizing: border-box; property incorporates the size of the border and padding into the rendered width.

If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. - Paul Irish on box-sizing

Questions (10 minutes / 0:55)

Break (10 minutes / 1:05)

You Do: eCardly (30 minutes / 1:35)

In this exercise you will be given an image of a website. It's your task to use the CSS properties you know -- or have yet to learn! -- to recreate it using HTML and CSS.

If you'd like to add a webfont, take a look at Lato on Google Fonts.

Questions (10 minutes / 1:45)

You Do: Moonrise Kingdom (30 Minutes / 2:15)

Again, you will be recreating an image -- albeit a different one -- using code.

You Do (Bonus): CSS Airbnb

If you have time, try this exercise in which you recreate a portion of Airbnb's website using HTML and CSS.

Closing / Questions (10 minutes / 2:30)

There are over 500 CSS properties. It's impossible to memorize them. The key is to just get an idea of what you can accomplish with CSS, and then know what to Google.

Homework: Wendy Bite

Appendix

Review Slides

HTML & CSS Review

The Three Places CSS Can Go (5 minutes / 0:15)

Inline Styles (Bad)

<section>
  <article style='border-bottom: 1px solid black;'>
     ...
  </article>
</section>

Internal Styles (Better)

<!doctype html>
<html>
  <head>
    <style>
      article {
        border-bottom: 1px solid black;
      }
    </style>
  </head>
  <body>
    <section>
      <article>
	 ...
      </article>
    </section>
  </body>
</html>

External Styles (Best)

<!doctype html>
<html>
  <head>
    <link rel='stylesheet' type='text/css' href='styles.css'>
  </head>
  <body>
    <section>
      <article>
	 ...
      </article>
    </section>
  </body>
</html>

/* styles.css */

article {
  border-bottom: 1px solid black;
}

Selectors

Pattern	Meaning
`*`	any element
`E`	an element of type E
`E, F`	any element of type E and any element with type F
`#myid`	any element with ID equal to "myid"
`.myclass`	any element with class equal to "myclass"
`E#myid`	an E element with ID equal to "myid"
`E.myclass`	an E element with class equal to "myclass"
`E F`	an F element child of an E element
`E > F`	an F element that is a direct child of an E element

And many more!

Children vs. Descendants

Units

Unit	Description
`px`	Relative to the viewing device. For screen display, typically one device pixel (dot) of the display. For printers and very high resolution screens one CSS pixel implies multiple device pixels, so that the number of pixel per inch stays around 96.
`%`	Relative to the containing block
`em`	Relative to the font-size of the element (2em means 2 times the size of the current font)
`rem`	Relative to font-size of the root element
`vw`	Relative to 1% of the width of the viewport
`vh`	Relative to 1% of the height of the viewport

More Units
MDN Docs

The `position` Property

CSS Tricks Guide to Position

Quiz Questions

What does * select?
What does box-sizing: border-box do?
What's the difference between borders, margins, and padding?
What's the difference between an outline and a border?
What's the difference between position:relative, position:absolute, and position:fixed?

micfin / css-review Goto Github PK

css-review's Introduction