IAT-339: 02 Styling the Webs

IAT-339: 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.

A very ornate gold and blue curtain
Styling the Webs

Last Week

HTML5 + semantics

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

Coding Tasks

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

Static to Active

A how-to

You have spent time dealing with:

  • Layout
  • Hierarchy
  • Consistency
A Wii U displaying a web browser
You will be designing for weird browsers...

Weird Wireframing

User Flows

aka Wireframing a la papier

Key things to illustrate

  • Structural options: Where things appear
  • Hierarchy: How things appear
  • Interaction: What the user is doing

P01 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 Stylesheets

While HTML defines the DOM of what each item on the page is, 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

Sibling at 0.8em font-size
Child at 0.8em font-size
Child at 0.8em font-size
Child at 0.8em font-size

Rems (root-em)

50 pixel font size

Sibling at 0.8rem font-size
Child at 0.8rem font-size
Child at 0.8rem font-size
Child at 0.8rem font-size

A red and white picnic blanket
The web is just blocks

Block vs Inline

An overview

Inline elements (i.e. em, strong, span...) act like text, stay on the same line (in-line), with size dictated by the content.

Block elements (i.e. div, p, ul...) form a new block of content on a new line, are full-width by default, but have a definable size.

Inline-block elements stay on the same line, listen to their content for their sizing, but have a definable size.

Some content in this div with an inline tag to help demonstrate the difference.
Some more content in another div.

The Stellar Box Model

Your other new best friend

This is block #1
This is block #2
IAT-339: Help!

Break time

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

Validate, validate, validate, validate, validate, validate...

Validate * (infinity + beyond)

Yes, there is also CSS Validation.

(insert annoyed sighing)

This week's labs

The low-down

  • Continuation of CSS basics
  • P01 crits

Next week's lecture

Like Building Blocks

  • Flexbox
  • 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 — Mondays from 8:30-9:20am and Thursdays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna