102
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.
Doctypes
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 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"%gt;
<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"%gt;
<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"%gt;
<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"%gt;
<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"%gt;
<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"%gt;
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.
The full list of allowed void elements:
<!-- HTML5 void elements - part 1 -->
<area>
<base>
<br>
<col>
<embed>
<hr>
<img>
<input>
<!-- HTML5 void elements - part 2 -->
<link>
<meta>
<param>
<source>
<track>
<wbr>
Some void elements are now considered deprecated, which means that they should not be used:
<!-- Deprecated void elements -->
<command>
<keygen>
<menuitem>
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.
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.
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>
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 -->
<iframe>
<video>
<embed>
<img>
Other elements are treated as replaced elements only in specific cases:
<!-- Replaced elements -->
<option>
<audio>
<canvas>
<object>
<applet>
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>
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 -->
async
autofocus
autoplay
checked
contenteditable
controls
default
defer
disabled
<!-- HTML5 boolean attributes - part 2 -->
formNoValidate
frameborder
hidden
ismap
itemscope
loop
multiple
muted
nomodule
<!-- HTML5 boolean attributes - part 3 -->
novalidate
open
readonly
required
reversed
scoped
selected
typemustmatch
Some boolean attributes are now considered deprecated, which means that they should not be used:
<!-- Depricated boolean attributes -->
compact
nohref
noresize
noshade
nowrap
scrolling
There are also some boolean attributes that were considered before being removed from specifications:
<!-- Removed boolean attributes -->
seamless
sortable
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 -->
<span>
<div></div>
</span>
<!-- Correct -->
<div>
<span></span>
</div>
Mistake 4: Failing to include closing tags for elements.
All HTML elements (exclusing void elements) must include a closing tag.
<!-- Incorrect -->
<p>
<p>
<!-- Correct -->
<p></p>
<p></p>
Mistake 5: Incorrectly nesting elements
HTML elements cannot be incorrectly nested inside other elements.
<!-- Incorrect -->
<ul>
<li>item one
<li>sub-item</li>
</li>
</ul>
<!-- Correct -->
<ul>
<li>item one
<ul>
<li>sub-item</li>
</ul>
</li>
</ul>
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.
<blockquote></blockquote>
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.
<div></div>
The <span> represents an inline generic container.
<span></span>
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.
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.
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.
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.
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.
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.
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:
- Construct the DOM
- Construct the CSSOM
- Construct the Render tree
- Layout the Render tree
- Paint the Render tree on screen
The DOM (Document Object Model)
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 CSSOM (CSS Object Model)
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 Render tree
The CSSOM and DOM trees are combined into a Render tree.
Layout
The coordinates for each Render tree element are then calculated. This is called the “layout”.
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.
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.
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.
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.
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.
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.