202

Common terms

Slide instructions

SPACEBAR to move forward through slides.

SHIFT & SPACEBAR to move backwards through slides.

LEFT ARROW & RIGHT ARROW to move through sections.

ESC to see overview and ESC again to exit.

F to enter presentation mode and ESC to exit.

Introduction

Before diving into how CSS works, let’s will look at a range of terms used to describe aspects of HTML and CSS.

What is HTML?

HTML, or Hyper Text Markup Language, is the standard markup language for creating web documents.

HTML uses elements and attributes to describe the structure of web documents and provide meaning to content.

What is CSS?

CSS stands for “Cascading Style Sheets”.

CSS is a language that works with HTML documents to define the way web documents are presented.

CSS is used to control the appearance and position of HTML elements.

The DOM, CSSOM and Render tree

Browsers follow a series of steps in order to render a web document. In simple terms, the steps are:

  1. Construct the DOM
  2. Construct the CSSOM
  3. Construct the Render tree
  4. Layout the Render tree
  5. Paint the Render tree on screen
Browser render process

The DOM (Document Object Model)

Browser render process - the DOM

Browsers read the HTML document and construct a DOM (Document Object Model).

The DOM is a application programming interface (API) that treats HTML, XHTML, or XML documents as tree structures.

This is why the Document Object Model is also referred to as a DOM tree.

The DOM tree is made up of different types of nodes including element, attribute, text and comment nodes.

Each node in the DOM tree is an object representing a part of the document.

The DOM tree nodes

The CSSOM (CSS Object Model)

Browser render process - CSSOM

The browser also constructs a CSSOM (CSS Object Model)

The CSS Object Model takes the CSS code, and renders every selector and property into a tree structure.

The CSSOM tree

The Render tree

Browser render process - the Render tree

The CSSOM and DOM trees are combined into a Render tree.

The Render tree

Layout

s Layout

The coordinates for each Render tree element are then calculated. This is called the “layout”.

Painting

Browser render process - Painting

The layout is them used to render all of the pixels on the screen in a process called “painting”.

The DOM tree

The DOM tree is just like a family tree. An ancestor refers to any element that is further up the tree.

In the following example, the <body> element is the ancestor of the <p> and <span> elements.

The HTML document tree

A descendant refers to any element that is connected but further down the document tree.

In the following example, the two <p> elements and <span> elements are descendants of the <body> element.

The HTML document tree

A parent is an element that is connected and directly above another element in the document tree.

In the following example, the <p> element is the parent of the <span> element.

The HTML document tree

A child is an element that is connected and directly below another element in the DOM tree.

In the following example, the <span> element is the child element to the <p> element.

The HTML document tree

A sibling is an element that shares the same parent as another element.

In the following example, the <p> elements are both siblings as they share the same parent, the <body> element.

The HTML document tree

At any time an element could have many roles - a parent, a child, a sibling, a descendant or an ancestor.

CSS allows authors to use descendant, child and sibling elements in order to style elements more easily and effectively.

Doctypes

Before displaying HTML documents, browsers need to which version of the HTML language the document uses.

This is achieved using a <!doctype> declaration.

The <!doctype> declaration must appear on the first line of code within an HTML document.

Which version?

In the past, web authors had to write HTML in one of two possible versions of the language - HTML 4.01 or XHTML 1.0.

Today, almost all web authors write in HTML 5.

This newer version of HTML is simpler, more flexible and allows authors to use a range new elements and functions.

To declare that your document is HTML 5, you must use the following declaration:


<!doctype html>
<html>
  <head>
    <title>Document title</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>A paragraph element.</p>
  <body>
</html>

HTML elements

HTML elements are the building blocks of HTML markup. They help us define the content and structure of web documents.

In most cases, HTML elements consist of a start tag (or opening tag) and an end tag (or closing tag).

<p>This is a paragraph element.</p>

There is a wide range of HTML elements that can be used to give content specific meaning - such as headings, paragraphs, lists etc.

These elements should always be written in lower case only.


<!-- Heading levels -->
<h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>

<!-- Paragraph -->
<p>Paragraph element</p>

<!-- Unordered list -->
<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<!-- Push button -->
<button>button element</button>

<!-- Generic container -->
<div>Division element</div>

Void elements

Void elements are different to all other HTML elements as they have no content and no end tag.

<!-- Line break -->
<br>

They can be written in two different ways depending on the doctype you use - with or without the trailing forward slash.

<!-- Without trailing slashes -->
<br>
<hr>
<img>
<input>
<link>
<meta>
<!-- With trailing slashes -->
<br />
<hr />
<img />
<input />
<link />
<meta />

Using the HTML 5 doctype, you can use either of these methods.

Even though both of these methods can be used, it is best to choose one method and use it consistently.

HTML attributes

HTML attributes are used to assign additional properties to HTML elements.

<p class="intro">
  Some text
</p>

In almost all cases, attributes consist of an attribute name and an attribute value.

<!-- Attribute name -->
<p class="intro">
  Some text
</p>
<!-- Attribute value -->
<p class="intro">
  Some text
</p>

Attributes must appear in the start tag (or within the tag in the case of void elements)

<!-- Inside the start tag -->
<p class="intro">
  Some text
</p>
<!-- Inside void elements -->
<hr class="special">

There can be any number of attributes applied to an HTML element.

<!-- Three attributes in an element -->
<input
  id="email"
  name="email"
  type="text"
>

Attributes must be separated by spaces and can appear in any order.

Attribute values can be placed inside double quotes, single quotes or even no quotes at all.

<!-- Double quotes -->
<p class="intro">
  Some text
</p>
<!-- Single quotes -->
<p class='intro'>
  Some text
</p>
<!-- No quotes -->
<p class=intro>
  Some text
</p>

Some attributes allow multiple values inside the one attribute.

<!-- Two attribute -->
<p class="intro highlight">
  Some text
</p>

Attributes with more than one value must be enclosed in single or double quotes. They cannot be left unquoted.

<!-- Double quotes -->
<p class="intro highlight">
  Some text
</p>
<!-- Single quotes -->
<p class='intro highlight'>
  Some text
</p>

In HTML 5, some attributes, called boolean attributes, do not require a value.

<input type="radio" checked />
<input type="text" disabled />
<input type="email" multiple />
<input type="text" readonly />
<option selected> ... </option>

Block-level elements

In HTML 4.01, there is a distinction between block-level and inline elements.

HTML 5 uses a more complex set of content categories.

However, it is still important to understand the differences between block-level and inline elements.

Block-level elements are elements that are formatted visually as blocks.

A series of block-level elements including a heading and two paragraphs

Block-level elements include elements such as:

<!-- Block-level elements -->
<article>
<aside>
<blockquote>
<div>
<figure>
<footer>
<form>
<h1>
<header>
<p>
<section>

In almost all cases, block-level elements can be nested inside other block-level elements.

<!-- Nested block-level elements -->
<div>
  <div>
    <h1></h1>
    <p></p>
  </div>
</div>

However, block-level elements such as <h1>, <h2>, <h3>, <h4>, <h5>, <h6> and <p> cannot contain other block-level elements.

<!-- Cannot contain blocks -->
<h1>Cannot contain blocks</h1>
<p>Cannot contain blocks</p>

Inline elements

Inline elements are elements that do not form new blocks of content; the content is distributed in lines.

Two inline elements inside block-level elements - an emphasis and a bold element

Inline elements include elements such as:

<!-- Inline elements -->
<a>
<abbr>
<b> 
<cite>
<code>
<em>
<i>
<span>
<strong>
<sub>
<sup>

In almost all cases, inline elements can be nested inside other inline elements.

<!-- Nested inline elements -->
<span>
  <span></span>
  <em></em>
</span>

Almost all inline elements cannot contain block-level elements.

<!-- Block inside inline elements -->
<span>
  <div></div>
</span>

However, in HTML 5, the inline <a> element was redefined so that it could wrap around block-level elements.

<!-- Block inside inline elements -->
<a href="#">
  <div></div>
</a>

Line boxes

Inline boxes are laid out horizontally in a box called a line box.

If there isn’t enough horizontal space to fit all elements into a single line, another line box is created under the first one.

A single inline element may then be split across lines.

Line boxes are defined by the highest and lowest points of any inline boxes that are part of the line.

A series of line boxes inside block boxes

Anonymous boxes

Anonymous boxes are defined with two criteria:

1. Any content that inside a block-level parent element, but not wrapped directly inside another element.

2. There is at least one block-level element or inline element inside the parent element.

Anonymous boxes inside block boxes

In the example below, the “some text” is defined as an anonymous box.


<div>
   Some text
   <p>Paragraph</p>
</div>

In the example below, the “some text” is NOT defined as an anonymous box as there are no other elements present inside the parent element.


<div>
   Some text
</div>

The viewport

The viewport is the full extent of the viewing area within a browser window.

The browser window showing the viewport area

On a computer, you can resize the browser window to make it larger or smaller, automatically resizing the viewport as well.

The viewport also varies with the device and will be smaller on a mobile phone and tablet devices than on a computer screen.

Containing boxes

From a CSS perspective, all HTML elements are just a series of boxes.

A containing box is a box that contains other boxes - descendant boxes.

A containing box wrapped around other block-level boxes

The initial containing box

The <html> element is the top-level element of all HTML documents.


<html>
  <head>
    <title>Document title</title>
  </head>
  <body>
    ...
  <body>
</html>

It is also called the root element because all other elements are descendants of this element.

This root element is housed in a containing box called the “initial containing box”.

The initial containing box is the width of the viewport or the widest element if wider than the viewport.

The initial containing box is also the height of the viewport or deeper than the viewport for longer documents.

The initial containing box spreading to the full width of the viewport and deeper than the viewport

It is important to understand the initial containing box as it is a critical component of CSS positioning.

Elements are often positioned against a parent element, but they may need to be positioned in relation to this initial containing block.

Document flow

Document flow is how each HTML element is laid out and how other elements position themselves accordingly.

Imagine every HTML element is just like a piece of paper. You can stack some pieces of paper on top of others so that they overlap.

Elements that are stacked at the top are closest to the user. Elements that are below are further away.

Elements that are “in normal flow” will flow down the page based on their order in the document.

Eements that have been given some sort of positioning (absolute, relative, fixed, sticky) will be positioned “out of flow”.

These “out of flow” elements are positioned on one or more layers above “in flow” elements so that they are closer to the user.

An out-of-flow element positioned on top of in-flow content

These layers are described in detail in the Z-index and the stacking context slide deck.

User agents

The term “user agent” was coined in the early days of the Internet when users could only be navigated using the keyboard.

Later, tools were developed to be the users “agent”, so that the user didn’t have to understand complex keyboard commands.

Today, nearly everyone uses a web browser as a user agent. Common web browsers include Firefox, Chrome, Safari and Opera.

However, user agents can also include media players, search engine bots and assistive technologies (software to assist people with disabilities).

Russ Weakley

Site Twitter Github Slideshare Linkedin

Next deck

203: CSS Rulesets