Writing CSS

Modified from slideshow by GU Yiling (original).

In this lecture:

  1. General knowledge
  2. Linking CSS Files
  3. Cascading
  4. Syntax

What is CSS?

Cascading Style Sheets

Elements Defined by Flows
Here are the Normal Flow Definitions

  • Block Formatting Context (cf. Duckett, p. 361)
  • Inline Formatting Context (cf. Duckett, p. 361)

Review: BFC vs. IFC

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

Box Model
All elements have the definable properties below.

box model consists of content, padding, border and margin

Test it out with your Inspect Element.

Positioning Schemes

Because elements are boxes, we can change how they behave!

  • Normal flow (default): display: block or display: inline
  • Floats: float: left or right or none, etc.
  • Positioning: position: absolute or fixed, sticky, relative, or static

Floats

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

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="style.css" />

</head>
<body>
...

USE this method.
DO NOT copy/paste this code below.
The quotation characters will cause your link element not to function. Instead, write it out manually.

2. <style> element

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

DO NOT use this method.

3. Inline styles

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

DO NOT use this method.

4. @import rules

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

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

Use this method, when your site's big enough.

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

CSS Syntax
A primer

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

Types of Selectors

Selectors help you point to (select) specific HTML elements.

Basic simple selectors Examples
Type selectors HTML tags: nav, section, header, p
Class selectors HTML classes that uses dot scheme in CSS: .ds-body-img
ID selectors HTML classes that uses hash scheme in CSS: #data-story-personal
Universal selector Selects all-the-HTML-things: *
Attribute selectors Selects HTML tag attributes: [title], [rel~="copyright"]
Pseudo classes Adds a CSS-defined class to an HTML element: :hover

Combinator Selectors

Combinators Example
Descendent combinator (␣) .section__text_container p {...}
Child combinator (>) ul > li {...}
Adjacent sibling combinator (+) h1 + h2 {...}
General sibling combinator (~) img ~ p {...}

Question: How can combinators work on the document tree?
Answer: CSS uses HTML parent containing block rules.

Containing blocks are established by parent box-context.

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

Pseudo-element Selectors

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

Pseudo classes

Type Example
Location :link, :visited, :target, ...
User action :hover, :focus, ...
Tree-structural :first-child, :nth-child(), ...

The Cascade & Inheritance

Basic Cascading Heuristic

  1. Importance
    What level of importance does it have? There are 4 tiers, but most are the default normal rules for elements.
  2. Origin
    Where did the CSS sheet and rule come from? From the UA, User, or Website?
  3. Specificity
    How specific is the declaration's selector? More specific selections are used over more general.
  4. Position: Last Rule / Order of appearance
    Where is the declaration block declared in the stylesheet?

Cascade Resource

Review Wattenberger's interactive CSS Cascade reference.

Recap

  • 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

Further Reading

Resources