Introduction to HTML/CSS

Things you need

Your preferred web browser (e.g. Mozilla Firefox)

Your preferred code editor (e.g. VS Code)

Things to keep with you

MDN Web Docs

HTML 5 specification

HyperText Markup Language

est. 1990

A basic HTML document

Open simple-page.html in your browser.

A basic HTML document

Open simple-page.html in your code editor.

<!DOCTYPE html>
<html>
  <head></head>
  <body>Hackerschool 2020&#8230; The start of Reccess Week!</body>
</html>

Document type declaration

<!DOCTYPE html>
<html>
  <head></head>
  <body>Hackerschool 2020&#8230; The start of Reccess Week!</body>
</html>

Declares that this document is a HTML document.

MDN; HTML 5 specification

HTML element

<!DOCTYPE html>
<html>
  <head></head>
  <body>Hackerschool 2020&#8230; The start of Reccess Week!</body>
</html>

HTML element

<!DOCTYPE html>
<html>
  <head></head>
  <body>Hackerschool 2020&#8230; The start of Reccess Week!</body>
</html>

HTML element

<!DOCTYPE html>
<html>
  <head></head>
  <body>Hackerschool 2020&#8230; The start of Reccess Week!</body>
</html>

Open tag

<!DOCTYPE html>
<html>
  <head></head>
  <body>Hackerschool 2020&#8230; The start of Reccess Week!</body>
</html>

Close tag

<!DOCTYPE html>
<html>
  <head></head>
  <body>Hackerschool 2020&#8230; The start of Reccess Week!</body>
</html>

`<head>`

<!DOCTYPE html>
<html>
  <head></head>
  <body>Hackerschool 2020&#8230; The start of Reccess Week!</body>
</html>

Contains page metadata, like title, links to stylesheets, etc.

MDN

`<body>`

<!DOCTYPE html>
<html>
  <head></head>
  <body>Hackerschool 2020&#8230; The start of Reccess Week!</body>
</html>

Contains page contents.

MDN

Text content

<!DOCTYPE html>
<html>
  <head></head>
  <body>Hackerschool 2020&#8230; The start of Reccess Week!</mark></body>
</html>

HTML Entities

<!DOCTYPE html>
<html>
  <head></head>
  <body>Hackerschool 2020&#8230; The start of Reccess Week!</mark> Preparing to lift off!</body>
</html>

String that begins with & and ends with ; to display special characters.

MDN, Reference chart

Exploring HTML elements

Let's try out more HTML elements.

Follow by modifying simple-page.html, or by adding the elements via the document inspector.

Document inspector

Open by F12 or Ctrl+Shift+C (Cmd+Shift+C on Mac).

Create new node

Creates new node in the selected element.

Does not exist in Chrome; right-click or press F2 to edit-as-HTML instead.

Create new node

New node created.

Edit things

Double click anything to edit it. Enter to commit.

`<div>` element

MDN

<div>Some content</div>

Along with <span>, two of the most generic tags for content.

Simply helps to divide up your content.

Semantic meaning

Many elements have some special meaning to them, even though they have no special default styling. E.g.

<p> is a paragraph
<main> contains the "main" content of the page
<article> contains an "article" e.g. forum post, news article, etc
<header>, <footer> should contain the header and footer

See MDN's guide.

Semantic Elements

Why use Semantic Elements?

Accessibility
Search Engine Optimization
Convey type of data it is carrying

`<title>` element

MDN

<title>Page title</title>

Goes into <head>.

It is the title shown in the tab title, and in search engines, etc.

Heading elements

<h1> to <h6>; MDN


<h1>This is a H1.</h1>
<h2>This is a H2.</h2>
<h3>This is a H3.</h3>
<h4>This is a H4.</h4>
<h5>This is a H5.</h5>
<h6>This is a H6.</h6>

Heading elements

Paragraph element

<p>; MDN


<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

(Never use <br> to break paragraphs!)

List elements

<ul>, <ol>, <li>


<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

Anchor element

<a>; MDN


<a href="https://google.com">Google</a>

Results in: Google

Attribute


<a href="https://google.com">Google</a>

Attribute name


<a href="https://google.com">Google</a>

Attribute value


<a href="https://google.com">Google</a>

Image element

<img>; MDN


<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">

Results in:

Note: <img> is a void element.

It does not need to be closed with </img> (this is invalid), or self-closed like <img ... /> (this is redundant but acceptable).

Combining elements

Many elements can contain other elements, and combining them usually leads to what you'd expect.

How to make a clickable image?


<a href="https://google.com"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></a>

Results in:

Exercise 1

Recreate this page. Note: Your font may be different. That's alright! We'll fix it soon™

Cascading Style Sheets

est. 1994

Inline `style`


<p style="color: blue;">Blue text!</p>

Results in:

Blue text!

Property


<p style="color: blue;">Blue text!</p>

Value


<p style="color: blue;">Blue text!</p>

CSS properties

There are many properties. See the MDN list.

Some common properties are:

color
background properties
font properties
border properties
padding properties
margin properties

Try them out!

HTML/CSS box model

What if we have many elements?


<p style="color: blue;">Blue text!</p>
<p style="color: blue;">Blue text!</p>
<p style="color: blue;">Blue text!</p>
<p style="color: blue;">Blue text!</p>
<p style="color: blue;">Blue text!</p>
<p style="color: blue;">Blue text!</p>
<p style="color: blue;">Blue text!</p>
<p style="color: blue;">Blue text!</p>


<style>
  p {
    color: blue;
  }
</style>

<p>Blue text!</p>
<p>Blue text!</p>
<p>Blue text!</p>
<p>Blue text!</p>
<p>Blue text!</p>
<p>Blue text!</p>
<p>Blue text!</p>
<p>Blue text!</p>

Selector


<style>
  p {
    color: blue;
  }
</style>

Declaration block


<style>
  p {
    color: blue;
  }
</style>

Declaration


<style>
  p {
    color: blue;
  }
</style>

`id`, `class`


<style>
  #my-p {
    /* some declarations */
  }

  .red {
    color: red;
  }

  .em {
    font-weight: bold;
  }
</style>

<p id="my-p" class="red em">Red bold paragraph</p>

Basic CSS selectors

tag: selects elements of tag tag
#element-id: selects element with ID element-id
.class: selects elements of class class
*: selects all elements
[attr]: selects elements based on attr (MDN)

Combining selectors

tag.class: selects tag elements of class class
.class1.class2: selects elements of class class1 AND class2
.class1, .class2: selects elements of class class1 OR class2

External stylesheets

CSS is often put in a separate file from the HTML, and it is simply linked in.

In <head>:


<link rel="stylesheet" type="text/css" href="theme.css">

Exercise 2

Style exercise 1 like so, using an external stylesheet (no inline styles!).

The font is Montserrat from Google Fonts. Feel free to explore around!

Combinators

X Y: match Y that is a descendant of X
X > Y: match Y that is a direct child of X
X ~ Y: match Y that is after X
X + Y: match Y that is directly after X

Back to `<div>` and `<span>`

<div> is a generic block-level (by default) element.

<span> is a generic inline (by default) element.

They have no separate semantic meaning; they're just used to apply CSS on. ID and classes come in useful here.

CSS pseudo-classes

Special classes that allow you to select elements in a certain state. Commonly used:

:hover: elements being hovered over
:focus: focussed element
:nth(-last)-of-type(): nth (last) element of the same type among siblings (1-based)
:nth(-last)-child(): nth (last) element among siblings (1-based)
:first/last/only-of-type: first/last/only of the same type among siblings
:first/last/only-child: first/last/only among siblings
:not(selector): elements which do not match selector

MDN

`nth` syntax

The nth/nth-last-child/of-type selectors accept an argument in parentheses, which can be:

odd: odd numbered elements
even: even numbered elements
An+B: where A, B are integers, elements whose order matches the pattern. You can just specify either An or B only as well.

Colouring tables

The nth-of-type selector is commonly used to give tables alternating colours.

Demo


<style>
  table tr:nth-of-type(odd):not(:first-of-type) {
    background-color: #aaa;
  }
</style>

Exercise 3

Modify the table demo so the colours invert when you hover over the table.

No JavaScript needed!

Hint: :not, :hover

CSS inheritance

When a property is not specified, the element either inherits it from its parent, or it gets a default value.

E.g. inherited properties: color, font-*, etc

E.g. non-inherited properties: border-*, background-*, etc

Layout with CSS

CSS units

When specifying lengths in CSS (width, height, margin, padding), you will have to specify them with units.

Common units:

em: font point size
pt: 1/72 inch
px: 1/96 inch

CSS layout

There are many ways to lay out a page with CSS.

Grid: essentially a table
Flexbox: somewhat like if you restricted CSS grid to 1-D
CSS frameworks: like Bootstrap, Foundation, etc.
Legacy: with floats, etc

CSS grid

CSS grid usage


<style>
  #grid {
    display: grid;
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  }
</style>
<div id="grid">
  <div>1</div>
  ...
  <div>9</div>
</div>

Rows


<style>
  #grid {
    display: grid;
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  }
</style>
<div id="grid">
  <div>1</div>
  ...
  <div>9</div>
</div>

Columns


<style>
  #grid {
    display: grid;
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  }
</style>
<div id="grid">
  <div>1</div>
  ...
  <div>9</div>
</div>

CSS grid 2

CSS grid column lines

CSS grid row lines

Specifying row and col. span


<style>
  .box1 {
    grid-column: 1;
    grid-row: 1 / 4;
  }
  .box2 {
    grid-column: 3;
    grid-row: 1 / 3;
  }
  ...
</style>
<div id="grid">
  <div class="box1">1</div>
  <div class="box2">2</div>
  ...
</div>

Starting "line"


<style>
  .box1 {
    grid-column: 1;
    grid-row: 1 / 4;
  }
  .box2 {
    grid-column: 3;
    grid-row: 1 / 3;
  }
  ...
</style>
<div id="grid">
  <div class="box1">1</div>
  <div class="box2">2</div>
  ...
</div>

Ending "line"


<style>
  .box1 {
    grid-column: 1;
    grid-row: 1 / 4;
  }
  .box2 {
    grid-column: 3;
    grid-row: 1 / 3;
  }
  ...
</style>
<div id="grid">
  <div class="box1">1</div>
  <div class="box2">2</div>
  ...
</div>

Exercise 4

Recreate this.

Where to go from here?

Modern JS libraries/frameworks

Rare to write HTML by hand when developing applications nowadays
Modern JS libraries allow you to write "components" in JS, which the library then generates HTML from

React Example

Check out the React workshop to learn React!

Others

Experiment!
Look through MDN tutorials
Check out some CSS frameworks: Bootstrap, Foundation, etc
Design your own website ☺

Introduction to HTML/CSS

Things you need

Things to keep with you

HyperText Markup Language

A basic HTML document

A basic HTML document

Document type declaration

HTML element

HTML element

HTML element

Open tag

Close tag

<head>

<body>

Text content

HTML Entities

Exploring HTML elements

Document inspector

Create new node

Create new node

Edit things

<div> element

Semantic meaning

Semantic Elements

<title> element

Heading elements

Heading elements

Paragraph element

List elements

Anchor element

Attribute

Attribute name

Attribute value

Image element

Combining elements

Exercise 1

Cascading Style Sheets

Inline style

Property

Value

CSS properties

HTML/CSS box model

Selector

Declaration block

Declaration

id, class

Basic CSS selectors

Combining selectors

External stylesheets

Exercise 2

Combinators

Back to <div> and <span>

CSS pseudo-classes

nth syntax

Colouring tables

Exercise 3

CSS inheritance

Layout with CSS

CSS units

CSS layout

CSS grid

CSS grid usage

Rows

Columns

CSS grid 2

CSS grid column lines

CSS grid row lines

Specifying row and col. span

Starting "line"

Ending "line"

Exercise 4

Where to go from here?

Modern JS libraries/frameworks

React Example

Others

End

`<head>`

`<body>`

`<div>` element

`<title>` element

Inline `style`

`id`, `class`

Back to `<div>` and `<span>`

`nth` syntax