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.


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.


Before displaying HTML documents, browsers need to determine 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.

In both of these cases, there were three variations - strict, transitional and frameset.

<!-- HTML 4.01 Strict -->

<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

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>
    <title>Document title</title>
    <p>A paragraph element.</p>

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 -->
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>

<!-- 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 -->

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

<!-- Without trailing slashes -->
<!-- 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.

The full list of allowed void elements:

<!-- HTML5 void elements - part 1 -->
<!-- HTML5 void elements - part 2 -->

Some void elements are now considered deprecated, which means that they should not be used:

<!-- Deprecated void elements -->

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

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

<!-- Nested block-level elements -->

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

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

<!-- Nested inline elements -->

Almost all inline elements cannot contain block-level elements.

<!-- Block inside inline elements -->

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="#">

Replaced elements

In CSS, a replaced element is an element which is represented outside the scope of CSS.

These elements are external objects whose representation is independent of the CSS formatting model.

While replaced elements can be positioned using CSS, their contents are not affected by the current document's styles.

Some replaced elements, such as <iframe> elements, may have stylesheets of their own.

Some common replaced elements:

<!-- Replaced elements -->

Other elements are treated as replaced elements only in specific cases:

<!-- Replaced elements -->

HTML attributes

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

<p class="intro">
  Some text

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

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

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
<!-- Inside void elements -->
<hr class="special">

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

<!-- Three attributes in an element -->

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
<!-- Single quotes -->
<p class='intro'>
  Some text
<!-- No quotes -->
<p class=intro>
  Some text

Some attributes allow multiple values inside the one attribute.

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

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
<!-- Single quotes -->
<p class='intro highlight'>
  Some text

Boolean attributes

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>

The presence of a Boolean attribute means the value is true.

The absence of the attribute means the value is false.

The full list of all possible HTML5 boolean attributes:

<!-- HTML5 boolean attributes - part 1 -->
<!-- HTML5 boolean attributes - part 2 -->
<!-- HTML5 boolean attributes - part 3 -->

Some boolean attributes are now considered deprecated, which means that they should not be used:

<!-- Depricated boolean attributes -->

There are also some boolean attributes that were considered before being removed from specifications:

<!-- Removed boolean attributes -->

Valid markup

HTML has specific grammar and syntax rules defined in various HTML specifications.

All HTML documents are supposed to conform to these rules.

“Validation” is the process of testing an HTML document to see whether it follows these rules.

A document that passes this process without ant validation errors is determined to be “valid”.

HTML documents can be checked online using the W3C Markup Validation service.

Invalid documents will still display in a browser. However, they may not appear as intended.

Authors should aim to write valid markup for all of HTML documents, so that they perform as expected.

Common validation errors

Mistake 1: Failing to include an alt attribute with <img> elements.

Every <img> element is required to have an alt attribute for devices that cannot access the image.

<!-- Incorrect -->
<img src="example.png">

<!-- Correct -->
<img src="example.png" alt="Symbols">

Mistake 2: Using duplicate id values.

The id attribute is a unique identifier. Each id value must be unique within that document.

<!-- Duplicate ID value -->
<div id="value01"></div>
<div id="value01"></div>

Mistake 3: Placing a block-level element inside an inline element.

Block-level elements can be wrapped around inline elements, but inline elements cannot wrap around block-level elements.

<!-- Incorrect -->

<!-- Correct -->

Mistake 4: Failing to include closing tags for elements.

All HTML elements (exclusing void elements) must include a closing tag.

<!-- Incorrect -->

<!-- Correct -->

Mistake 5: Incorrectly nesting elements

HTML elements cannot be incorrectly nested inside other elements.

<!-- Incorrect -->
  <li>item one

<!-- Correct -->
  <li>item one

Semantic markup

HTML Elements, attributes, and attribute values are defined to have certain meanings, or semantics.

For example, the <blockquote> element represents a section that is quoted from another source.


And the lang attribute, which defines the language of the content within that element.

<div lang="fr"></div>

These definitions allow browsers and devices to present web documents consistently in different contexts.

This semantic information is critical to assistive technologies.

For example, a screen reader will query the browser for semantic information.

The screen reader will then use that information to present the document or application in synthetic speech.

If the semantic meaning is missing or incorrect, the document can become harder to navigate or comprehend.

There are two HTML elements that are an exception.

The <div> and the <span> are generic elements that have no meaning.

The <div> represents a block-level generic container.


The <span> represents an inline generic container.


These elements can be used to wrap around other elements.

Attributes such as class, id, lang can then be used to add semantics for groups of child elements.

<div class="intro"></div>
<div id="menu"></div>
<div lang="fr"></div>

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.

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.

   Some text

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.

   Some text

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.

    <title>Document title</title>

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).

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


s Layout

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


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.

Russ Weakley

Site Twitter Github Slideshare Linkedin

Next deck

203: CSS Rulesets