HTML & CSS

An HTML page is a tree of elements

HTML

<section>
  <header>
    <h2>Header Title</h2>
  </header>
  <p>A paragraph</p>
</section>

Page

A root; nodes contains other nodes
Show DOM inspector in Chrome

Syntax of elements

Void elements need no closing tag
<img src="cat.jpg">

Browsers are lenient in parsing

HTML

<section>
  <header>
    <h2>Header Title</h3>
  <p>A paragraph<p>
</scetion>

Page

Badly-formed HTML may still render correctly

Use validators (or offline tools)

Elements can have attributes

A description text

<img src="moa-moe.jpg"
     title="A description text"
     alt="Picture of a moa bird
          with moe eyes"/>

A link to example.com

<a href="http://example.com">
  A link to example.com
</a>

Syntax:
<tag attr1="val" attr2="val" ...>

Syntax: name="string"

Some attributes apply to all elements

<div id="specialDiv"></div>
id is used for navigation.
The value of `id` is unique in the page.

<span class="literal number">12 </span> class is useful for styling.
Elements can share one or more classes.

Two classes here; share semantics of elements
No space in id
Used for CSS, JS

Common HTML elements

h1, h2, ..., h6 for headings
p for paragraphs
a for links
div for blocks
img for images (also audio, video)
ul, ol for unordered, ordered lists
li for list items
table, tr, td for tables, table rows, table cells

Reference list on MDN

HTML stands for HyperText

<a href="/pages/about.html"> links to a page on the same domain

href="https://example.com/welcome/" links to another domain

href="#el" links to the element with attribute id="el"

Elements give semantic structure to content

main for the main content
section, article for divisions inside the content
header, footer for header/footers in content or section
nav for navigation
aside for notes

Semantic tags help readability and accessibility (MDN tutorial)

Semantic: use tags for intention
Gross categories: container, content, metadata

A typical HTML page has three parts

doctype

head (metadata)

body (content)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Create event</title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Create event</h1>
    <!-- Rest of content here ... -->
  </body>
</html>

Go over each line
There are comments, use them
Live example

CSS are composed of declarations

Syntax:
property : value;

Examples:
background-color: red;
font-family: sans-serif;
margin: 30px;

Example text

Property name in lowercase
Value depends, text, number, color, url ...
Apply to one element inline, or several in rules

Declarations are grouped in blocks

{
  background-color: red;
  font-family: sans-serif;
  margin: 30px;
}

{
  color: blue;
}

Blocks are applied using selectors

h1 {
  background-color: red;
  font-family: sans-serif;
  margin: 30px;
}

This block styles all h1 elements in the page

selectors + block = rule

Can use any tag name here
Not all properties make sense for all elements
Switch to live example

Select by tag name
h2 { ... }
p { ... }
div { ... }

Select by class attribute
.check { ... }
span.number { ... }

Go over each one
You can chain classes with .
Spaces are significant

Select by id
#specialDiv { ... }
section#main { ... }

Select by ancestry
section p { ... }
div p { ... }
div > p { ... }

And many others

2nd one is overspecifying (unique id)
Any level is fine, beware the space
Can combine selectors

CSS box model example

First paragraph

Second paragraph

border: 10px solid #fa1;
padding: 10px;
padding-left: 50px;
margin: 15px 5px;

CSS layouts

inline (p) vs. block (div)
Flexbox
Grid

CSS layouts on MDN

Flexbox froggy

Grid garden

Useful length units

px pixels (for ~96ppi)

em relative to font size of the element

rem relative to font size of the root element

pt points, for fonts

See length on MDN

html font-size + rem = win for newer browsers
px is the good fallback
exercises use rem

How to include CSS in a page?

In the <head> part, as a file
<link rel="stylesheet" href="style.css">

Using the <style> tag
<style>h1 { font-weight: bold; }</style>

Inline with the style attribute
<p style="color: yellow;">...</p>

First one is best
You can combine, have multiple sheets

Cascading Style Sheets

Multiple rules can apply for the same element

Priority is given to the more specific,
latest rule (full story)

Elements inherit style from their parents

Specificity is more complex, but good approx.
Inherit from browser style, refine
Illustrate in live example

Cascading example

CSS

html {
  font-size: 20pt;
  color: red;
}
ul {
  font-size: 10pt;
}
li {
  color: green;
}

Page

Paste in live example, explain there

Why CSS frameworks?

to get around browser differences
to get a not-bad layout from the start
to get a layout that works for every form factor
to solve common problems quickly

Feasible in CSS, easier with a framework

Bootstrap is the most popular, but others may fit other needs (e.g., Material Design)

Resources on CSS

Mozilla Developer Network CSS tutorials
Devdocs for reference

Design inspiration

MDN has tuto, guide, refs
Devdocs invaluable again
Aparte on design: it matters in EVERYTHING
Use sensible palettes for your projects

HTML & CSS

HTML

Resources to go further

CSS

Resources on CSS

Design inspiration

FIN