Anatomy of a Webpage 2

This class is a continuation of the Anatomy series, discussing CSS. Students are expected to have a basic understanding of HTML.

First, discuss only HTML, and how it gets marked up for later use by CSS (ID, Class, the style tag and attribute)

Basic Terminology

Elements

HTML elements are also knows as tags.

<div>

ID

Used to identify an individual element in a document. There should be no duplicate IDs in an HTML document; each should be unique.

<div id="me"></div>

Class

When multiple HTML elements need to be styled, a class can be applied. An element can have an unlimited number of classes, separated by spaces.

<div class="grn"></div>
<div class="grn blu"></div>

Order of Operations

The browser will respect the order in which CSS files are loaded in the browser.

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

CSS in file2 can override any CSS declared in file1.

Specificity

More-specific CSS will override less-specific CSS.

div { background-color: blue; }

This will turn the background color on all <div>s to blue.

div.grn { background-color: green; }

This will affect all <div>s with class="grn" (<div class="grn"></div>).

!important

The !important directive is added to force that style to take precedence over any CSS which follows. This is often misused, and should be used only as a last resort.

div.blu { background-color: green !important; }

Selectors

. (period)

The period denotes a class name. They can be strung together:

div.grn.blu { background-color: red; }

# (pound)

The pound sign is used to denote an ID. It can be combined with the class operator.

div#me { background-color: red; }
div#me.grn { background-color: red; }
div#me.grn.blu { background-color: red; }

> (greater than)

A greater than sign is used to affect elements which are the descendants of other elements.

html > body > div { background-color: orange; }
html > body > div.grn { background-color: green; }

(space)

A space is used when the element structure should be more flexible.

html div { background-color: orange; }
html div.grn { background-color: green; }

, (comma)

Commas are used to include multiple elements in a style declaration.

div, div.grn { background-color: green; }

Instructor Notes

Students should launch Leafpad, and create a new, empty file on the desktop with their first name, in lowercase "name.css".
Students should also create a new HTML file. Contents should be the Beginning HTML Structure. (see below)
Double-click the HTML file to open it in the browser.
Begin building the CSS and altering the HTML structure, bit-by-bit, discussing things such as proper syntax.
- make changes
- save changes
- reload browser

Beginning HTML Structure

<html>
  <head>
    <title>My First Webpage</title>
    <link rel="stylesheet" type="text/css" href="name.css">
  </head>
  <body>
    <h1>Headline</h1>
    <p>Paragraph text.</p>
    <h2>Headline</h2>
    <p>
      Paragraph text.<br />
      <a href="http://www.freegeek.org/">LINK</a>
    </p>
    <div>
      <h1>Headline</h1>
      <p>Paragraph text.</p>
      <h2>Headline</h2>
      <p>
        Paragraph text.<br />
        <a href="http://www.freegeek.org/">LINK</a>
      </p>
    </div>
  </body>
</html>

Resources

Extra Credit

Saving these for the future, or if there's extra time in class.

Pseudo and Attribute Selectors

For selecting form types and other elements.

Browser Prefixes

CSS which applies only to certain browsers or rendering engines.

Media Queries

CSS which is dependent upon the size of the browser window.

Transitions

Making CSS move.

Frameworks & Utilities

LESS
Bootstrap