HTML
CSS

Separate

Content

Meaning of the text

  • Paragraph
  • Section
  • Title
  • List
  • etc

Coded with HTML

from

Presentation

How it looks

  • Color
  • Font
  • Position
  • Size
  • etc

Coded with CSS

HTML

  • HyperText Markup Language
  • Language based on SGML
    • Fixed set of tags and attributes
    • With a grammar describing valid trees

(up/down arrow to unfold)

Structure

Example of HTML document

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="UTF-8">
    <title> Titre du document </title>
  </head>
  <body>
    Contenu du document
  </body>
</html>

Structure

Starts with the specification of the language

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="UTF-8">
    <title> Titre du document </title>
  </head>
  <body>
    Contenu du document
  </body>
</html>

Structure

A single tree with root html

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="UTF-8">
    <title> Titre du document </title>
  </head>
  <body>
    Contenu du document
  </body>
</html>

Structure

Meta-data in the first child head of html

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="UTF-8">
    <title> Titre du document </title>
  </head>
  <body>
    Contenu du document
  </body>
</html>

Structure

Specify the character encoding

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="UTF-8">
    <title> Titre du document </title>
  </head>
  <body>
    Contenu du document
  </body>
</html>

Structure

Specify the window title

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="UTF-8">
    <title> Titre du document </title>
  </head>
  <body>
    Contenu du document
  </body>
</html>

Structure

The second child of html contains the actual document

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="UTF-8">
    <title> Titre du document </title>
  </head>
  <body>
    Contenu du document
  </body>
</html>

Main Concept

Block Elements

<main>
(main section of a document)
<header>, <footer>
(header and footer banner)
<section>
(for... sections)
<h1>, ..., <h6>
(section titles, sub-titles, etc)
<article>
(blog article, comments, etc)
<aside>
(side panel)
<nav>
(navigation panel, e.g. with links)
<address>
(contact information)
<p>
(paragraph)
<pre>
(block of preformatted text)
<iframe>
(embedded webpage)
<div>
(generic grouping)

More Block Elements

<ol>
(ordered lists)
<ul>
(unordered lists)
<li>
(list items)
<dl>
(descriptions)
<dt>, <dd>
(description title and description)
<table>
(table)
<tr>, <th>, <td>
(table row, header and cell)
<form>
(form)
<input>, <textarea>, <select>
(form elements)
<img>
(image)
<object>, <audio>, <video>
(multimedia objects)

Inline Elements

<a>
(link)
<em>, <strong>
(emphasis)
<cite>
(reference)
<quote>
(inline quote)
<abbr>
(abbreviation)
<time>
(date and time)
<code>, <var>
(code fragment, variable name)
<sup>, <sub>
(superscript, subscript)
<span>
(generic text fragment)

(Slightly) Flexible Syntax

No need to close always-empty tags

 <meta  charset="UTF-8">

 <img src="image.png">

 <link rel="stylesheet" href="style.css">

But not true for other XML languages, such as SVG

HTML tree in Browser

It is possible to inspect the HTML code of an element

With Firefox: Right-Click ⟶ Inspect Element

CSS

  • Cascading Style Sheets
  • Responsible for content presentation
    • Non-linear placement of elements
    • Color, font, size, etc
  • Advantages
    • Modularity: One style for multiple documents
    • Interoperability: Same document for screens, tablets, print-outs, accessibility devices, etc
    • Resilience: Easier to transition content to newer tech

(up/down arrow to unfold)

Versatility of CSS

CSS Zen Garden for an example of what can be done with CSS.

Try another CSS, and another one, and again another one...

Format

CSS associates declaration blocks to selectors 
h3 { /* h3 is the selector */
  font-family: sans-serif;
  font-style: italic !important; /* rule tagged as important */
}

A declaration is made of

  • a property,
  • a colon,
  • a value,
  • maybe a !tag,
  • and a semicolon

Beware Do NOT forget the semicolon...

Note: indentation is meaningless

Selectors

The main classes of selectors are as follows

*
(universal selector)
tag name, e.g. h1 or p
(all elements of the page with given tag name)
.classname
(all elements of the page featuring the given class)
#identifier
(the unique element of the page with this ID attribute)

Can be combined/adapted/modified in various manners

The official, complete list can be found on the W3C webpage

Decision algorithm

Whenever for a given elements two rules are contradictory,
a cascading decision algorithm is followed.

By increasing priority

  • Base rules from the web browser
  • Rules defined by the user
  • Rules defined by the author of the webpage
  • Rules defined by the author of the webpage and tagged with !important
  • Rules defined by the user and tagged with !important

If still tie, more specific selectors win, then order of apparition

Insertion in HTML

The recommended way: external file 
myfile.html
<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" 
          href="myfile.css">
    …
  </head>
  …
</html>
myfile.css
* {
  color: blue;
  text-align: left;
}

h2 {
  font-weigth: bold;
}

…

CSS layouts

CSS libraries

Accessibility

Wide range of user needs

  • High-contrast / large characters
  • Braille
  • Text-to-speech
  • ...

So make use of the semantics elements to give meaning

Stay agnostic on the presentation

Best practice thought and designed by... the W3C of course

Responsive Web Design

Wide scale of browser types

  • Regular computer (but many browsers!)
  • Smartphone (small screen, no mouse)
  • Tablet (large screen, no mouse)
  • TV (few/no color, small screen, ackward mouse)
  • Text-based

Need to adapt to different viewports

(up/down arrow to unfold)

Setting the viewport

Match the width of the page with the width of the device
and make sure CSS pixels are true pixels. 
<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    …
  </head>
  …
</html>
More information for example here

Notion of Media

Some types of media

all
No restriction
print
When printing
screen
Computer screen, tablets, smartphones, etc
speech
For screen readers

With constraints

  • screen and (min-width: 480px)
  • screen and (orientation: landscape)
  • ...

Media query

In the header

myfile.html
<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" 
           src="myfile.css" 
           media="print">
    …
  </head>
  …
</html>

Or in the css

myfile.css
h1 {
  color: blue;
  /* style for all media */
}


@media print {
  /* style only media print */
}

Examples

@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (orientation: portrait) {

  /* CSS, smartphone portrait */

}

@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (orientation: landscape) {

  /* CSS, smartphone landscape */

}

@media only screen
  and (min-device-width: 813px) {

  /* CSS Rules for "large" screens */

}

Beware: make sure to capture all cases,
or to give a default behavior.

Some documentation

The web is full of infos. Get wild!