Goals

• Learn what CSS is and why we use it.
• Understand the following concepts
  • Ids and classes
  • Styling basic attributes (color, font-size…)
  • Style inheritance
  • margin, padding and the box model
  • float
  • position: absolute and position: relative
  • CSS specificity
  • Box sizing: "content-box" vs. "border-box"
• Learn how to use your browser's "inspect" feature and how you can see which CSS styles are applied to an element
• Learn what a "reset stylesheet" is and why we need it.
  • Understand the difference between a "normalize.css" and "reset.css".
  • We usually use a "reset.css" and add some typographic defaults in a "theme.css" or similiar.
• Learn what "CSS precompilers" are. Examples are "Sass" and "Less" (we use "Sass")
  • Learn how Sass works
  • Understand the differences between the SCSS and indented Sass syntaxes (we use the .sass syntax)
• Learn about Mixins
  • Look at a few projects and understand how a mixins.sass or helpers.sass helps with developing their stylesheets

Resources

• A Beginner's Guide to HTML & CSS
• Specifics on CSS Specificity
• The 30 CSS Selectors you Must Memorize
• cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
• Sass Basics

Exercises

Apply some basic styles to MovieDB.

Here are some hints for this exercise:

• The UI does not need to be a master piece, but it should be tidy and clear.
• If you have generated styles from Rails scaffolding, delete them all. They don't look nice and we do not use them.
• Pay attention to the margins in your styles. Elements that belong together logically (e.g. two navigation sections) should be closer to each other than elements that have no relation.
• Your MovieDB should have a navigation bar that lets the user switch between the difference model screens (E.g. [Movies] [Actors] [Roles]). To make things interesting, make the navigation bar a sidebar that sits left of the main page content. Implement this side-by-side layout with either float or position attributes.
• Please don't use Bootstrap or another CSS framework. Stick with plain CSS (or Sass) for now.