Introduction to HTML/CSS

Orbital 2019

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>Bring me Thanos!</body>
</html>

HTML element

<!DOCTYPE html>
<html>
  <head></head>
  <body>Bring me Thanos!</body>
</html>

HTML element

<!DOCTYPE html>
<html>
  <head></head>
  <body>Bring me Thanos!</body>
</html>

HTML element

<!DOCTYPE html>
<html>
  <head></head>
  <body>Bring me Thanos!</body>
</html>

Open tag

<!DOCTYPE html>
<html>
  <head></head>
  <body>Bring me Thanos!</body>
</html>

Close tag

<!DOCTYPE html>
<html>
  <head></head>
  <body>Bring me Thanos!</body>
</html>

Text content

<!DOCTYPE html>
<html>
  <head></head>
  <body>Bring me Thanos!</body>
</html>

<head>

<!DOCTYPE html>
<html>
  <head></head>
  <body>Bring me Thanos!</body>
</html>

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

MDN

<body>

<!DOCTYPE html>
<html>
  <head></head>
  <body>Bring me Thanos!</body>
</html>

Contains page contents.

MDN

Document type declaration

<!DOCTYPE html>
<html>
  <head></head>
  <body>Bring me Thanos!</body>
</html>

Declares that this document is a HTML document.

MDN; HTML 5 specification

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.

<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.

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:

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!). font-style may be useful.

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

<div>, <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.

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.

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.

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?

End