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.
HTML, or Hyper Text Markup Language, is the standard markup language for creating web documents.
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.
Browsers follow a series of steps in order to render a web document. In simple terms, the steps are:
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 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 and DOM trees are combined into a Render tree.
The coordinates for each Render tree element are then calculated. This is called the “layout”.
The layout is them used to render all of the pixels on the screen in a process called “painting”.
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
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
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
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
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
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.
Before displaying HTML documents, browsers need to which version of the HTML language the document uses.
This is achieved using a
<!doctype> declaration must appear on the first line of code within an HTML document.
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 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 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 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>
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
<p> cannot contain other block-level elements.
<!-- Cannot contain blocks --> <h1>Cannot contain blocks</h1> <p>Cannot contain blocks</p>
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>
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>
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 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 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.
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.
<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 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 (
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.
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).