Wk 2/Tut 1 : HTML5 & CSS3 Core Review

Basic Review of a Page Structure

The material here is not visible on the page but informs the browser what it is loading, what type of screen it is intended for, and what dependencies it also needs to load (external CSS, javascript, PHP include files, etc.)

DOCTYPE

This tells the browser what type of content it is loading.

<!DOCTYPE html>

Fortunately you don’t need to use this from the past!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict/dtd">

META

Tell the browser what character encoding the page is using.

The rest of your meta tags are optional and we’ll get to that at a later stage.

Link your external support files. For now we are just focusing on your external stylesheet(s) but this is also where you would include javascript files as well.

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

I prefer to add additional ones as import links in the main stylesheet (more on this later).


This brings us to our top level visible components of your page.

HEADER

You normally include introductory elements here such as:

  • Logo
  • tagline
  • branding elements (images)
  • main navigation
  • search
  • other key elements.
  • NAV – specified element of HEADER that states it’s a Navigation Menu

SECTION

  • generally these are used as the container for any larger element of the body of your page that may enclose even more specific elements within. These might be:
  • full-page width
  • multiple columns (left, middle, right – fluid or fixed)
  • multiple rows
  • can contain even more specific elements such as:
  • ARTICLE – an unique element such as a news article, or just think stylistically modular component of a larger body of text or graphics.
  • ASIDE – another unique element such as block quotes, non-essential side information.
  • end page content such as: Copyright Info, maybe text version of nav menu, other top level links that aren’t foreground enough to include in HEADER.
  • might also be broken up in to multiple SECTIONS (e.g. sub-footer, footer)

DIV

DIVs can technically be used for any of the above elements and still validate as HTML5, however the practice going forward is to generally be as specific as possible so the semantic structure is clear to not only Browsers, but Screen Readers for Visually Impaired as well as any potential future interfaces we haven’t conceived of yet! You can still use them for non-specific or repetitive components such as:

  • page wrappers
  • sub sections within sections
  • widgets
  • smaller blocks of text or media that have their own unique style and placement

Any of the above components would of course include an array of:
* Headings
* Captions
* Paragraphs
* Images
* Audio/Video


Cascading Style Sheets (CSS)

Going hand in hand with your HTML is obviously your design markup that we will separate out to an external file.

Where can you include your CSS

There are technically 3 places you can locate your CSS but we are ONLY going to use Option 3 as it is best-practice for numerous reasons that should become obvious.

1. Inline style attributes

This means including directly within your HTML code. This is bad practice as it’s horribly difficult to maintain, you can’t easily change a style across your whole site in one move. But it IS handy occasionally (and temporarily) to quickly try something out without going back and putting it in your css files in the correct order (see Cascade Order below).

Example:

<p style="color: blue;">This is some blue text/</p>

2. In the HEAD

Advantage over inline is it keeps it all in one place (but only on the one page).

Example:

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

3. Externally Linked

All your styles succinctly contained in one file, referenced by every page on your site. You can even include other CSS files through the IMPORT function.

Example:

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

3 Major Types of Selectors

Element Selector

This includes styling your specific elements such as: body, h1, p, a, ul, li, etc.
More advanced usage includes using these as ‘childs’ of another element such as:

p a { text-decoration: underline; }

This would style anchors with an underline, but ONLY if they are inside of a Paragraph.

Class Selector

Class styles should the most common you use after specific Elements. As a general rule, if you think you may want to apply a style to multiple types of elements (such as a uniform color, size, box treatment, etc.) then use a class.

In your HTML:

<p class="blue">blue text.</p>

In your CSS:

.blue { color: blue; }

ID Selector

If your styling an ID there better be a really deliberate reason for using one as they are rigid and CANNOT be re-used within a page. If at all possible: use an ELEMENT, CLASS or even a PSUEDO-CLASS first.

Believe it or not, there’s actually about 27 more possible Selectors or combinations of Selectors! If you’re interested in advanced possibilities, there’s an excellent rundown here

CSS Box Model

Understanding the Box Model will take you a long way towards successful layout and spacing of your page components. Start with the W3C and CSS=Tricks references on this topic.


Some Emerging Web Design Trends

  • Responsive/Adaptive Design
  • Flexbox
  • ???

HTML/CSS Core Principles Review Exercise

For this tutorial’s Exercise plus some additional resources, please refer to Dave Wallace’s tutorial page.

You can download, examine, tweak, break, fix my solution for this exercise:
Tutorial1-Exercise_Solution.zip