145 CSS basics [2.5d]

Updated . Posted . Visible to the public.

CSS controls how your HTML looks. This lesson covers selectors, the box model, basic layout, the browser's inspector, and the Sass basics we use in all projects.

Important

Work on this lesson in teacher mode.

Learning goals

  • You can explain how the cascade and specificity decide which CSS rule applies to an element.
  • You can explain the box model and the difference between inline and block elements.
  • You can apply basic styling — colors, typography, spacing — and keep spacing consistent across an application, e.g. by limiting yourself to a handful of margin values.
  • You can explain what margin collapse is and recognize it when spacing looks wrong.
  • You can lay out two columns side by side with the basics of Flexbox, e.g. a fixed sidebar next to a content area that fills the rest. Flexbox in depth and CSS Grid come in later cards.
  • You can use positioning for small adjustments and explain how position: relative changes the coordinate origin for its children.
  • You can inspect any element's styles in the browser's developer tools, see where each rule comes from, and try changes live.
  • You can explain what a reset stylesheet does and why we use one.
  • You can write stylesheets with a preprocessor — Sass in the indented syntax we use — using variables, nesting, partials and mixins, and you follow the stylesheet structure of the project you're in.

Resources

Read what's new to you, skim what's familiar, skip what you already master. Stop when you can meet the learning goals.

Your agent can also generate an overview, a tutorial or an explanation for anything here, tailored to what you already know. Just ask.

Selectors, cascade and the box model

Layout

Tools

Reset stylesheets and Sass

Note

Sass has two different syntaxes, .scss and .sass. We use the indented syntax (.sass).

Exercises

Basic layouting

We want to layout a classic website with a header, a sidebar with navigation links, a big content area and a footer:

+------------------------------------------------------+
|                                                      |
|  BIG LOGO                                            |
|                                                      |
+------------+-----------------------------------------+
|            |                                         |
|  Link 1    |  HEADLINE                               |
|            |                                         |
|  Link 2    |  Lorem ipsum dolor amit.                |
|            |  At vero eos et accusam et justo.       |
|  Link 3    |  Stet clita kasd gubergren, no sea.     |
|            |  Sed diam nonumy eirmod tempor.         |
|            |  Lorem ipsum dolor amit.                |
|            |  At vero eos et accusam et justo.       |
|            |  Stet clita kasd gubergren, no sea.     |
|            |  Sed diam nonumy eirmod tempor.         |
|            |                                         |
|            |                                         |
|            |                                         |
|            |                                         |
|            |                                         |
|            |                                         |
+------------+-----------------------------------------+
|  Footer                                              |
+------------------------------------------------------+

Here are some more details how the layout should behave:

  • Give each element (header, sidebar, etc.) a distinct background color to see where boxes start and end.
  • The layout should fill the entire width and height of the screen.
  • The sidebar should have a fixed width. The content area takes up the remaining width of the screen.
  • The header should have a fixed height. The sidebar and content area takes up the remaining height of the screen.
  • The layout should work on a variety of screen resolutions, not just your particular monitor. You can assume a minimum resolution of 800×600 pixels.
  • The footer is always at the bottom edge. The sidebar and content area stretches to fill all available height.
  • The screen should only show scrollbars if the text in the main content area exceeds the available viewport height.

Build the layout with Flexbox: one column layout that stacks header, middle and footer vertically; inside the middle, a row layout that puts the sidebar next to the content area. (CSS Grid could build this in a single container — you'll meet it in a later card.)

Tip

You can implement this exercise in plain CSS, you don't need to use Sass.

Give each layout element a CSS class so you can apply styles. Some layout techniques may require more HTML elements than others, or a different nesting.

You can generate paragraphs of random text on https://loremipsum.de/ Show archive.org snapshot .

A coat of paint for MovieDB

Apply some basic styles to MovieDB. You should author your styles in Sass, using the indented syntax (.sass).

Put one .sass file per concern directly into app/assets/application/. They are picked up automatically by the glob in application.js — the same way your JavaScript will be, in a later card. Keep shared variables and mixins in partials outside that folder (e.g. app/assets/shared/_variables.sass) and @import them where you need them, so the glob doesn't compile them on their own.

A partial that holds only variables and mixins produces no CSS of its own, which is what makes it safe to import from many files. Never put a style rule in one, or you will get that rule once per file that imports it.

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.
    • Try to limit your margins to very few (e.g. 6) distinct values across the entire application to achieve a consistent look & feel.
  • Your MovieDB should have a navigation bar that lets the user switch between the different model screens (E.g. Movies | Actors | Roles).
  • Please don't use Bootstrap or another CSS framework. If your MovieDB is currently using a CSS framework, remove it and build your own styles from scratch.

Tip

Your MovieDB uses Rails 8 with esbuild. Sass support is already configured through the esbuild-sass-plugin library — there is nothing to install.

Tip

Every time you add a new SASS or JS file to your application (e.g. app/assets/application/navbar.sass), you need to restart your development server for it to show up in your browser. This is caused by a limitation of the esbuild-plugin-import-glob Show archive.org snapshot , which we use to import all assets in this directory: See import './application/**/*.sass' in your application.js. Direct import statements like import 'app/assets/application/navbar.sass' would work without restarting the server. You'll learn the details of esbuild and the frontend build pipelines in a later card, for now it's enough to know why new files might be missing.

Profile picture of Henning Koch
Henning Koch
makandra.de
Say thanks2
Last edit
Michael Leimstädtner
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra Curriculum (2015-07-07 15:17)
This website uses short-lived cookies to improve usability.
or learn more