Writing CSS

Modified from slideshow by GU Yiling (original).

In this lecture:

  • General knowledge
  • Syntax
  • Cascading
  • Values & units
  • Layout basics

What is CSS?

Cascading Style Sheets

History

  • CSS 1 (1996)

    font, color, align, box-model, #id, .class, ...

  • CSS 2 (1998)

    position, z-index, media, text-shadow, ...

  • CSS 2.1 (2011)

    CSS 2.1 vs CSS 2

CSS3

CSS Modules (incomplete)

Module Latest Level (2014/05) Example
Text 3 text-justify, word-break
Text Decoration 3 text-shadow, text-emphasis
Flexible Box 1 flex, justify-content
Color 4 hwb(), color()
Animations 1 animation, @keyframes
Transforms 1 transform, perspective
Transitions 1 transition, timing functions
Cascading Variables 1 --foo, var()

More...

Including CSS into HTML

How?

1. <link> element

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
...

2. <style> element

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello World</title>
    <style type="text/css">
        /* ... */
    </style>
</head>
<body>
...

3. Inline styles

<body>
    <h1 style="color: red;">
        Hello World
    </h1>
    <p style="margin: 2em 0;">
        Paragraph here
    </p>
</body>

4. @import rules

@import url(normalize.css);
@import url(layout.css);
@import url(typography.css);

nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 3em;
}

Performs worse than the <link> way!
See don’t use @import.

Recap

  • Cascading Style Sheets
  • CSS 1, CSS 2, CSS 2.1, CSS 3
  • CSS Modules + Level
  • 4 ways to use CSS in HTML

/* break */

CSS Syntax
— writing valid CSS

At-rules

  • @charset
    (before anything else — any character)
  • @import
    (before any statement except @charset)
  • @media
  • @font-face
  • ...
@charset "UTF-8";
@import "styles.css" screen and (min-width: 960px);

Properties

  • display
  • position
  • height
  • font-family
  • transition

Be aware of vendor prefixes

Declarations

property: value

Declaration blocks

{ declaration; declaration; ... }

/* single-line */
{ display: block; height: 300px }

/* multi-line */
{
    display: block;
    height: 300px;
}

Semicolons (;) are only required between declarations.

Selectors

Pattern matching against document trees

Selectors (simple selectors)

Name a few?

Basic simple selectors Example
Type selectors section, p, span
Universal selectors *
Attribute selectors [title], [rel~="copyright"]
Class selectors .comment, .post
ID selectorss #nav, #main
Pseudo classes :hover, :lang(zh), :checked

Selectors (combinators)

Combinators Example
Descendent combinator () .post p
Child combinator (>) ul > li
Adjacent sibling combinator (+) h1 + h2, :checked + label
General sibling combinator (~) h1 ~ pre

Quiz!

Based on this selector declaration block rule set, tell me how the elements will be styled.

JS Bin on jsbin.com

Selectors (pseudo elements)

  • ::first-line
  • ::first-letter
  • ::before
  • ::after

Selectors (pseudo elements)

JS Bin on jsbin.com

Pseudo classes

How many pseudo classes do you know?

Type Example
Linguistic :dir(), :lang()
Location :link, :visited, :target, ...
User action :hover, :focus, ...
Input :checked, :valid, :disabled, ...
Tree-structural :first-child, :nth-child(), ...

:nth-child() (pseudo-class)

JS Bin on jsbin.com

Recap

via Vocabs

/* break */

Cascading & Inheritance

CSS3 Value processing

declared → cascaded → specified → computed → used → actual

cascading → defaulting → absolutizing → calculation → UA adjustment

See some examples of value processing.

Understanding Containing Blocks

to understand Cascading & Inheritance

Containing blocks are established by parent box-context.

Containing blocks are established by parent box-context. (See W3C spec.)

Cascading

Some human values shaping howelement/property combinations are computed:

  1. Origin and importance
  2. Specificity
  3. Order of appearance

1. Cascading: Origins & importance

UA, user, author

and !important

See this article on "The Cascade"

Cascading (origin and importance)

  1. Important + UA
  2. Important + user
  3. Important + author
  4. Normal + author
  5. Normal + user
  6. Normal + UA

See also CSS Cascading and Inheritance Level 3.

2. Specificity

  1. ID
    #main
  2. class, attribute, pseudo-class
    .title, [title], :hover
  3. type, pseudo-element
    article, ::before

Compare [a, b, c] and choose a winner!

style attribute > selectors

Quiz

JS Bin on jsbin.com

What's the color and text-decoration of the “Go to post” link?

3. Order of appearance + On defaulting

Computed value of the parent element: initial value, inherited value, inherit keyword

JS Bin on jsbin.com

Inherited value

line-height is defined with initial value of normal and is inherited.
  • line-height: 2
    Specified → 2
  • line-height: 200%
    line-height: 2em
    Absolute → 2 * 16px = 32px

Recap

  • Value processing start from cascading and defaulting
  • Origin/importance > specificity > order
  • Author > user > UA, reversed when important
  • Count simple selectors/pseudo elements to calculate specificity
  • Inherited values are computed values of the parent

/* break */

Values and Units

  • 1.2rem
  • 60deg
  • rebeccapurple
  • 1000ms
  • url(logo.png)
  • ...

Quoted Strings: string

a[rel~="next"]::after {
    content: "→";
}

Resource Locators: url

body {
    background: url(starrynight.png);
}

Numeric Data

  • Integers: integer
    z-index: 1; order: 3;
  • Numbers: number
    line-height: 1.5; flex: 0.618;
  • Percentages: percentage
    width: 80%; font-size: 120%;

Distance Units: length

  • Relative
  • Absolute

0px0

length only!

Relative lengths

em, ex, ch, rem, vw, vh, ...

ex is the x-height, ch is the width of character "0"
ex and ch

Absolute lengths

px, pt, in, cm, mm, ...

Physical or pixel?

Pixels must become larger if the viewing distance increases.

Colors: color

  • Keywords
    lightgreen, gold, currentColor, transparent ← transparent, ...
  • Hexadecimal notation
    #69c, #abcdef, ...
  • Functional notation
    rgb(200, 150, 100), hsla(120, 100%, 50%, 0.5), ...

See more in CSS Color Module Level 4.

Other Units

angle, time, image, ...

.box {
    transform: rotate(30deg);
    transition-duration: 2s;
    background: linear-gradient(to top, red 0%, blue 100%);
}

Recap

  • Data types: number, integer, length, color, ...
  • Length: relative vs. “absolute”
  • Color: keywords, hex, rgb(a), hsl(a), ...

Dimension units after zero values are optional for length only!

Layout Basics

canvas and viewport
The canvas (not <canvas>) and the viewport

Box Model

box model consists of content, padding, border and margin

Why box-sizing?

What about * { box-sizing: border-box }?

GRIDS!

See the Pen CSS Grid Layout Module: Defining a Grid by Chris Lindgren (@lndgrn) on CodePen.

Positioning Schemes (cf. Duckett, pp. 363-364)

  • Normal flow
  • Relative flow
  • Floats (cf. Duckett, p. 370)
  • Absolute positioning
  • Fixed positioning

Determined by position and float

Use case: Absolute positioning + Containing block

JS Bin on jsbin.com

Normal Flow

  • Block Formatting Context (cf. Duckett, p. 361)
  • Inline Formatting Context (cf. Duckett, p. 361)
  • Flex Formatting Context
  • Grid Formatting Context
  • Relative positioning

BFC vs. IFC

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

display property

See the list of display behaviors. (cf. Duckett, p. 317)

Floats

float: left;
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

What's “clear fix”?

Clear fix solution for containing block behavior

See the Pen Clearfix Example by Chris Lindgren (@lndgrn) on CodePen.

Absolute Positioning

position: absolute/fixed

Finding the containing block

(See detail here.)

position: absolute

  • Closest parent with position other than static
    or with transform other than none
Initial containing block starts from the origin of the canvas and has the same size of the viewport.
no such parent → initial containing block
Initial containing block
body {
  width: 120%;
  background-color: khaki;
}

.box {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 64px;
  height: 64px;
  background-color: lightgreen;
}

See the Pen dooBPz by GU Yiling (@Justineo) on CodePen.

position: fixed

  • The viewport
  • Closest parent with transform other than none
position: fixed & transform
.out {
  margin: 64px;
  width: 256px;
  height: 256px;
  background-color: khaki;
  transform: scale(1);
}

.in {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 64px;
  height: 64px;
  background-color: lightgreen;
}

See the Pen yNNdNB by GU Yiling (@Justineo) on CodePen.

Recap

  • The canvas & the viewport
  • Box model & box-sizing
  • 3 position schemes:
    normal flow / floats / absolute positioning
  • BFC/IFC/FFC/...
  • Finding containing blocks for absolute positioning

Summary

  • History
  • Syntax
  • Cascading
  • Values & units
  • Layout basics

Further Reading

Resources