Basic HTML page


More semantic elements, better support for audio, visual, iframe improvements,

canvas, SVG, Drag and Drop API


Rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.

What's new?


Semantic - precisely describe content

Exhaustive HTML5 reference:


If you're building a Rails app, you'll need Embedded Ruby (ERB), a templating system for Ruby.

Cascading Style Sheets (CSS)

Why use CSS?

To describe the look and formatting of a document written in a markup language, eg. hypertext markup language (html)

It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.


let's create a new file with the extension .css so we can keep all of our styles there


  • Ids are unique
  • Each element can have only one ID
  • Each page can have only one element with that ID


  • Classes are not unique
  • You can use the same class on multiple elements.
  • You can use multiple classes on the same element.


<ul id="colorful-list">
  <li id="red-herring">Red Herring</li>
  <li id="orange-sherbert">Orange Sherbert</li>
  <li id="yellow-zest">Yellow Zest</li>
  <li id="green-apple">Green Apple</li>
  <li id="blueberry">Blueberry</li>
  <li id="indiegogo">Indiegogo</li>
  <li id="violet">Violet</li>


<ul class="navigation">
  <li class="navigation-link">Link 1</li>
  <li class="navigation-link">Link 2</li>
  <li class="navigation-link">Link 3</li>
  <li class="navigation-link">Link 4</li>
  <li class="navigation-link">Link 5</li>
#red-herring {
    color: red;

#violet {
    color: violet;
.navigation {
    list-style: none;

.navigation-link {
    font-size: large;

What we'll review

  • inline vs block level elements
  • margins/padding
  • image replacement
  • responsive background image
  • lists
  • forms
  • anything else you ask about

block-level elements:


  • <div>
  • <h1> - <h6>
  • <p>
  • <form>

inline elements

  • <span>
  • <a>
  • <img>

    <div id="business_links">


#business_links {
    width: 300px;
    margin: 0 auto;

Centering a div

"White space"

Margins provide spacing around the DOM element and are not calculated as part of the width.  Borders and padding


margin: top right bottom left;

padding: top right bottom left;


eg:  a { padding: 30px; } will expand the clickable area by 30px in every direction

Let's take a closer look at this in our browsers.

Let's style this together:

Image Replacement for SVG Icon

<nav class="main-nav">
  <a href="#" title="Home" class="home-button">
    <i>Company Logo</i>
    <h1>Company Name</h1>
    <h2>We Build Things</h2>


.home-button {
  i {
    content: "";
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 50px 50px;
    background: url("images/logo/allovue_logo.svg");
    display: block;
    float: left;
    height: 150%;
    margin-right: 50px;
    text-indent: -9999px;
    width: 100px;
  h1 {}
  h2 {}


Additional Image Replacement Strategies:

Let's style this together:

Responsive Background Image

Let's find ourselves a splash image!


body {
  background-attachment: fixed;
  background-image: url(milkway_splash.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;


fn + F5 to sort CSS properties alphabetically

Let's take a closer look:

(navigation) list

Let's start simple

  • Remove those ugly bullets
  • Make the nav horizontal
  • Add a hover effect
  <ul class="navigation">
      <a href="/AboutMe/index.html">About Me</a>
      <a href="/Resources/index.html">Resources</a>
ul.navigation {
  background-color: white;
  display: block;
  list-style: none;
  margin-top: 0;
  width: 100%;
  height: 35px;

ul.navigation li {
  display: inline-block;
  float: left;

ul.navigation a {
  color: black;
  display: block;
  padding: 10px;
  text-decoration: none;

ul.navigation a:hover {
  background-color: black;
  color: white;

Let's take a closer look:

Basic Form


  • label
  • input
  • output
  • button
<form oninput="result.value=500-parseInt(comment.length)">
    <label for="comment">
        <input id="comment" type="text" name="comment" autofocus="true" maxlength="500">
    <span class="character-counter"><output name="result"></output>Characters Remaining</span>
    <button type="submit" disabled="true">Comment</button>


What didn't I cover that you're still curious about?


Browse through usTwo's Pixel Perfect Precision Handbook:

Layer Comps

A handy way to save the appearance and visibility of the layers in Photoshop


This is the percentage of time you will spend maintaining code

  • Patterns
  • Modules
  • Optimization


  • Read SMACSS
  • Developer-ready comps
    • Homepage
    • Wildcard web page
      • KE - Contact Page
      • MQ - Calendar/Upcoming shows page
      • JZ - Gallery Page
      • JW - Next Bus Page
      • Rizzo - Purchasing ticket page


By brigittewarner


  • 323
Loading comments...

More from brigittewarner