1 CSS Topics: Readings and References

MDN CSS is a really good introduction and reference.

2 Introduction to CSS

Utilizing MDN Intro to CSS.

2.1 How CSS works

How CSS works. Topics covered:

  • General concepts of documents and stylesheets, rendering
  • External, Internal, and Inline stylesheets

2.2 CSS Syntax

CSS Syntax. Topics covered:

  • CSS declarations, CSS declaration blocks
  • CSS selectors and rules, CSS statements, “At-rules”
  • White space, comments, and shorthand

2.3 Selectors

Selectors Introduction.

  1. Simple Selectors. Topics covered:
    • Element selectors, Class selectors, ID selectors
    • Multiple classes on elements
  2. Attribute Selectors. Read. Know these exist and can be used to solve problems.

  3. Pseudo-classes and pseudo-elements. Read and practice. These are two important CSS mechanism used in a variety of situations including UIs.

  4. Combinators. Important! This is how we combine selectors for more refined selection. These are used all the time. However, I tend to forget the syntax hence the table at the beginning of the article is great!

2.4 CSS values and units

CSS values and units. Important but you are not expected to remember everything here. Some fun code examples.

2.5 Cascade and inheritance

Cascade and inheritance. Important. This explains the notion of the cascade and which of multiple rules gets applied to an element. Discusses specificity. Key to debugging your CSS!

2.6 The Box Model

The Box Model. Fundamental. Topics covered:

  • Box properties: content, padding, border, and margin
  • Advanced properties: overflow (scrolling), clip, outline
  • Types of boxes: block, inline, inline-block

3 Styling Text

Styling Text Overview

3.1 Fundamental text and Font styling

Fundamental text and Font styling. Topics covered include:

  • Fonts: color, families, default, stacks, size, style, weight, decoration, transform.
  • Text layout: alignment, line height, spacing, etc…

3.2 Styling Lists

Styling Lists. Topics include: list spacing, bullet styles, position, custom bullets, list counting.

3.4 Web Fonts

Web fonts.

4 Styling Boxes

Styling Boxes Overview

4.1 Box Model

Box Model Recap. Nice review also hits some more advanced options such as max/min width/height.

4.2 Backgrounds

Backgrounds. Important since a lot of very nice styling can be done via backgrounds. Topics covered: color, image, position, repeats, gradients, size.

  • Design idea: Go to one of the Websites to Generate SVG Patterns and use one of these to generate background and or border patterns. Make sure you understand what you are getting!

4.3 Borders

Borders. A more in depth look at borders.

4.4 Styling Tables

Styling Tables. Tables have lots of “knobs and dials” for styling. This is a good tutorial, however we may not explicitly cover this in class.

5 CSS Layout

CSS Layout Overview

5.1 Introduction to CSS Layout

Introduction to CSS layout. Good overview. Topics include: floats, positioning, tables, flex box, and grid.

5.2 Floats

Floats. Important note: Floats were also the foundation for most website layouts. Now we have Flexbox and Grid. In this class when doing layouts “by hand” (rather than a CSS framework) we will use Flexbox and Grid only.

Reference: All about Floats

5.3 Positioning

Positioning. Important. Topics include: static, relative, absolute, fixed, top, bottom, left, right, positioning contexts, z-index, margin-collapse.

5.4 Practical Positioning Examples

Practical Positioning Examples. Good examples of how tabbed panels and slide out panels are implemented. Requires the following JavaScript knowledge:

  • DOM API: document.querySelectorAll(), GlobalEventHandlers.onclick, Element.getAttribute(), Element.setAttribute(), Element.removeAttribute()
  • Functions, anonymous functions, passing a function as a value, shows a closure being used.

5.5 Flexbox

MDN Flexbox

References:

  1. A Complete Guide to Flexbox. Nice new layout technique. Available in current Firefox and Chrome.
  2. For a fun and comprehensive flexbox tutorial try Flexbox Froggy.

  3. Note that currently (8/19/2018) both BootStrap and Semantic-UI use flexbox to create their “grid” layouts.

5.6 Grids

Grids

References: 1. A Complete Guide to Grid 2. Possible guide to CSS Grids 3. A pretty good introduction: Getting to know CSS Grid Layout. Note for class we would not be concerned with their “legacy grid” discussion.

References to be reviewed:

6 CSS Transitions & Animations

Optional topic. Note that CSS transitions are well supported now.

  1. [Using CSS transitions]https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
  2. All you need to know about CSS Transitions
  3. Using CSS animations

7 CSS Practice

TO BE UPDATED

  1. To check whether you can use a CSS/JavaScript/DOM feature head over to Can I Use?.

  2. Hands on Practice with CSS selectors via either document.querySelectorAll(...). querySelector/querySelectorAll are new features of the document interface and available in current versions of IE, edge, Firefox, and Chrome. Can use the HTMLElement.style DOM attribute to look at and set the style.

  3. Style frameworks: Bootstrap, Foundation, Pure, and many others.
    1. All provide grid systems, these systems are implemented via classes and underneath are CSS floats.
    2. All provide a nice uniform look and feel.
    3. One usually starts with one of these rather than doing all your styling from scratch, unless your primary role is page layout/design.
  4. CSS processors: Sass (note bootstrap 4 is moving to sass), Less. These “languages” compile into regular CSS but add programming capabilities such as variables, containment, inheritance, etc… to help reduce code size and maintain consistency across large CSS projects.

  5. Invisible CSS. Good review and in depth look at important CSS concepts.

  6. CSS in the Large. One thing we didn’t have time to cover is techniques for dealing with CSS when the amount of styling work becomes large.
    1. CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components

    2. BEM “BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.” How we use BEM to modularise our CSS