Posted over 5 years ago. Visible to the public.
CSS basics [3d]
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 modelfloat
position: absolute
andposition: 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
orhelpers.sass
helps with developing their stylesheets
- Look at a few projects and understand how a
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 different 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.
- Please don't use Bootstrap or another CSS framework. Stick with plain CSS (or Sass) for now.