ah teaches web design and development: 02 Styling the Webs

ah teaches web design and development: 02 Styling the Webs — A slide deck

Styling the Webs

Lecture outline

We'll be covering:

  • Styling our almost-most hideous page ever
  • More on atomic design
  • CSS fundamentals

Lecture slides will be made available on the day of the lecture.

SIAT Mixer 2018
A very ornate gold and blue curtain
Styling the Webs

Last Week

HTML5 + semantics

More on thinking semantically available at Dive into HTML5 - Semantics.


A reminder that citations are required.

A burning piece of paper
Burn the page
A burning piece of paper
There is no landing page, only content that makes sense first.
The progression of atoms through to pages as proposed by 'Atomic Design'
Why does Frost promote 'Designing Systems'? What does he mean by that?

False Assumptions

Common assumptions:

  • Everyone has a mouse or a touch screen
  • Everyone has steady high-speed internets
  • 1 pixel = 1 pixel
  • Everyone's computer is faster each year
  • Everyone will view my website on IE6

Biggest False Assumption

Thinking you've mastered "teh webz".


What we want the web to be

Your first goal for every web project, fulfilling a need. You typically have less than 10 seconds to convince someone your website is the one they need.

What might help convince them your website is 'the one'?

What You Can Give the Webs

This potentially endless list...

  • Content: text, visual, aural
  • Structure: layout, grids, hierarchy, IA
  • Accessibility: clean markup, flexibility
  • Usable: interaction, utility, UX
The PlayStation 4 web browser
You need to remember those weird browsers...

P1 Materials

Some things to think about

You are not required to generate your own images and icons for this project. That being said, the branding must still be your own work. Here are some recommended suggestions:


Cascading Style Sheets

While HTML defines the structure of the content on the page, CSS styles the page to ensure the user get's something usable. Good code will clearly separate semantic markup from styling.

Keeping Them Apart

A real Romeo/Juliet scenario

Rules for keeping them separate

  • Do not use HTML to define styling; i.e. <br>, <i>, <b>...
  • Do not use inline CSS styling; <section style="color: blue;">
  • Keep files separate; .html defines content, .css defines style, never shall they meet

Basics of CSS

Here we go...

selector {
property1: value;
property2: other-value;

Smart CSS

You want to aim for CSS stylings that are scalable and modular. Here are some divisions suggested as a framework:

  1. Base rules: direct styling of elements for normalizing or defaults
  2. Layout: structural styling for the page (i.e. .grid, .grid-column)
  3. Modules: styling for different components (i.e. .nav-bar, .nav-button)
  4. State Rules: styling different states (i.e. .is-current, .is-opened)

Coding Conventions

When you get started on planning out elements

More things to ensure:

  • Use a purpose-oriented naming convention: .external-link (describe the content)
  • Avoid naming based on style: .blue-border
  • Use understandable names: #footer makes more sense then #lower-bar
  • Agree with your teammate: You need to understand one another

CSS Sampler

nav {}
#nav-main {}
.nav-button {}
.nav-button.is-current {}
.nav-dropdown.is-opened {}

ID vs. Class

IDs must always be unique, <section id="kittens"> they can only be specified once. While classes can be used as many times as needed<section class="group">


The order in which things are read

  1. Inline styles: should never be used
  2. ID's: #home, #cool-stuff
  3. Classes, attributes & pseudo-classes: .home, [class], :hover
CSS specificity illustrated by Star Wars characters


Why we care

At the end of the day, it's about your mental sanity. But good clean, clear coding conventions, page and file structure typically loads and runs faster. Computers thrive on cleanliness.

Dev Tools

Your new best friend

Ever wanted to know what the slides would look like with a red background? Right-click and 'Inspect Element' opens up the development tools to mess around with things in.

Units in CSS

In the journey to responsiveness, we want to aim for relative and scalable units as much as possible.

Ems and Rems

Multiples of the base

As a general rule of thumb, setting your paragraphs to 1rem and scaling other things accordingly is better practice.


50 pixel font size

0.8em font-size
0.8em font-size
0.8em font-size
0.8em font-size

Rems (root-em)

50 pixel font size

0.8rem font-size
0.8rem font-size
0.8rem font-size
0.8rem font-size

A red and white picnic blanket
The web is just blocks

Block vs Inline

An overview

Inline level elements (i.e. em, strong, span...) act like text, with size dictated by the content.

Block level elements (i.e. div, p, ul...) form a new block of content on a new line, and have a definable size.

Some content in this div with an inline tag.
Some more content in another div.

The Stellar Box Model

Your other new best friend

This is block #1
This is block #2

Break time

Please make sure to have downloaded this week's tutorial package by the end of the break. Otherwise, have fun!

This week's labs

The low-down

  • Continuation of CSS basics
  • P1 crits

Next week's lecture

Like Building Blocks

  • CSS grids
  • Style guides
  • Site structure
The progression of atoms through to pages as proposed by 'Atomic Design'
Please read Chapter 2 "Atomic Design Methodology" from Atomic Design by Brad Frost

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Wednesdays from 11:00-11:50am and Fridays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna