SlideShare a Scribd company logo
Introduction to

         &
   Andrew Christian
Obligatory Intro
                                                So, who is this guy?


•   Coding HTML since 1996

•   WordPress since 2004 (v1.0.2 Art Blakely)

•   New York WP Community since WordCamp
    NYC 2009.

•   Tadpole.cc - WordPress Hosting, Support,
    Training and Consulting
I’m assuming...

• You are somewhat familiar with previous
  versions of HTML and CSS .
• You know your way around a WordPress
  theme, but not necessarily hard-core dev.
A Little History
• HTML was created to link documents via
  HyperText (the “HT” in HTML)
• Quickly grew into a more rich markup
  language (the “ML”)
• Browser Wars: Microsoft vs. Netscape.
A Little History
• XHTML created in order to transition from
  HTML to XML
• XHTML required stricter coding standards.
• If not coded properly, it would break...
  Horribly.
A Little History
• 2002: W3C created XHTML 2.0
• 2004: Apple, Mozilla, and Opera created the
  WHATWG, when W3C shot down HTML5.
• 2007: W3C created HTML 5 working group.
• 2009: W3C abandons XHTML 2.0 in favor of
  HTML5.
HTML5 Philosophy
• Must be backwards compatible with older
  versions of HTML.
• Everything added or removed must be done
  so for a practical purpose.
• The process of deciding what goes in is an
  open process, involving blogs, twitter, etc.
Can we use it now?
• The spec is not 100% finalized, but is broken
  into “modules,” many of which are finalized.
• Most features are supported by all major
  browsers (Chrome, Firefox 4+, Safari, IE9+)
• Most features degrade gracefully in older
  browsers.
Document Heading
<!DOCTYPE html PUBLIC “=//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml-1-transitional.dtd”>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">

<head>                                               <title>Page Title
goes hear</title>                           <meta http-equiv=”Content-
Type” content=”text/html; charset=iso-8859-1” />
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<script src=”javascript.css” type=”text/javascript” />               </
head>
Document Heading
<!DOCTYPE html>

<html lang="en-us">

<head>

<title>Page Title goes hear</title>

<meta charset=”utf-8”>

<link rel=”stylesheet” href=”style.css”>
HTML Code Syntax

<IMG SRC=”image.png” ALT=”This is an image, Duh!” />



                   is the same as



  <Img sRc=image.png ALt=’This is an image, Duh!’>
New HTML Elements
• article     • footer




<                                  >
• aside       • header
• bdi         • hgroup
• command     • mark
• details     • nav
• summary     • ruby, rt, and rp
• figure       • section
• figcaption   • time
Changed Elements
•   <a> can now wrap around block elements.

•   <b> and <i> are back (but not presentational).

•   <cite> defined to be the title of a work.

•   <hr> is now a “paragraph-level thematic break.”

•   <small> is now for small-print, i.e., legal boilerplate.
Removed Elements
•   <big>

•   <center> and <font>

•   <strike> and <u>

•   <frame>, <frameset>, and <noframes>

•   <acronym> is now <abbr>

•   <applet> is now <object>
Blog Page Structure
<div id=”header”>
 <h1>Page Title</h1>
 <p>Tag Line text...</p>
</div>
<div id=”nav”>
 <ul>...list of nav links...</ul>
</div>
<div id=”sidebar”>...sidebar links...</div>
<div id=”content”>
 <div class=”article”>
  <h2>Article Title</h2>
  <p>Published on June 9, 2012.</p>
  <p>Article Content</p>
  <div class=”entry-meta”>...comments, permalink, etc...</div>
 </div>
</div>
<div id=”footer”>
Blog Page Structure
<header>
 <hgroup>
  <h1>Page Title</h1>
  <h2>Tag Line text...</h2>
 </hgroup>
</header>

<nav><ul>...list of nav links...</ul></nav>

<aside>...sidebar links...</aside>

<article>
 <header>
  <h1>Article Title</h1>
  <time datetime=”2012-06-09” pubdate”>Published on June 9, 2012.</time>
 </header>
 <p>Article Content</p>
 <footer>...comments, permalink, etc...</footer>
<header> & <hgroup>
•   When <header> is used outside of other
    elements, it’s assumed to be the page header.

•   When <header> is used inside of elements like
    <aside> and <article>

•   <header> isn’t necessary when an <h1> is the only
    element of the header.

•   Cannot be placed inside a <footer>, <address> or
    another <header> element.
<header> & <hgroup>
•   <header> allows you to group other content in
    with the heading, such as publication date, etc.

•   <hgroup> links together multiple headings into
    one header.

•   Great for headers that have multiple lines, or the
    Page Title with a Site Description.
<footer>
•    Just like <header>, you can use more than one
     <footer> on a page.
•    A footer typically, but not always, goes at the
     bottom of content.
•    For example, if you use a <footer> for next/
     previous blog post links, you can use
<article>
 <header>...</header>
 <footer>...Next/Previous nav links</footer>
 <p>...Content</p>
 <footer>...Next/Previous nav links</footer>
<nav>
•   Usually contains a <ul> list of links.

•   You can have more than one <nav> list on a page.

•   Placing the <nav> outside of other elements
    means it’s navigation across your site.

•   Placing <nav> inside an <article> means it’s
    navigation for that article only (useful on single
    post pages for Next/Previous links).
<article> and <section>
•   <article> should be a complete block of content
    that is wholly separate from other content.
•   <section> divides content into, yes, sections. A
    section does not stand on its own.
•   Think of <article> as something you might see in
    an RSS feed.
•   However, you can use <article> within another
    <article> tag. For example, comments could be in
    separate <article> tags inside of a blog post.
<aside>
•   Used for “Secondary Content”

•   Meant for content that is related to, but not
    necessarily important for understanding, content.

•   Can be used as a sidebar for a page.

•   Can also be used inside <article>, etc., for
    information related to the article.
<aside>
•   Used for “Secondary Content”

•   Meant for content that is related to, but not
    necessarily important for understanding, content.

•   Can be used as a sidebar for a page.

•   Can also be used inside <article>, etc., for
    information related to the article.
Forms - New Attributes
•   required

•   autofocus

•   placeholder

•   form

•   autocomplete

•   pattern
Forms - New Input Types
•   email                    •   tel (telephone)

•   date                     •   color

•   search                   •   number


•   New input types fall back to type=”text” in older
    browsers, but newer browsers can display a special
    input (keyboard, color chooser, number dial, etc.)
Video - the old way
<object width=”400 height=”300”>

 <param name=”movie” value=”http://www.youtube.com/v/ddO9idmax0o” />
 <param name=”allowFullScreen” value=”true” />
 <param name=”allowscriptaccess” value=”always” />

 <embed src=”http://www.youtube.com/v/ddO9idmax0o” type=”application/x-
  shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true”
  width=”400” height=”300” />




•    Code is complex and confusing

•    Relies on 3rd party plugins for functionality.
Video - the new way


<video src=”movie.mp4”>
Video - the new way
<video controls autoplay>

 <source src=”movie.mp4” type=”video/mp4; codecs=avc1.42E01E,mp4a.40.2”>
 <source src=”movie.ogv” type=”vidio/off; codecs=theora,vorbis”>

 <p>Get the video in <a href=”movie.mp4”>MP4</a> or <a
 href=”movie.ofv”>Ogg Vorbis</a> format.</p>




•    Code is easier to read.

•    Video playback doesn’t require any plugins.

•    Multiple sources depending on browser support.
Audio - Just as easy!

<audio src=”audio.mp3”>
Now it’s time to dig in to
Browser Support
•   Webkit (Safari and Chrome)
•   Firefox 4+
•   Opera
•   IE 9+
•   CSS3 doesn’t deprecate anything from CSS 2.1.


•   Currently uses -moz-, -webkit-, and other browser
    specific prefixes on many modifiers.
CSS3 and Color
•   The old way - background-color: #1a2b3c;

•   RGBa - background-color: rgba(0, 255, 0, 0.7);

•   HSLa - background-color: hsla(0, 100%, 35%, 0.4);




•   “a” stands for “alpha”, or opacity.
Opacity and Gradients
     •    You can also specify the opacity of an object:

    header {
      background-color: #000;
      opacity: 0.7;
    }


     •    or specify a color gradient.
    background-image: -webkit-gradient(

      linear, left 50, right 50,

      color-stop(0.08, rgb(255,255,255)),

      color-stop(0.54, rgb(133,133,133)),

      color-stop(0.77, rgb(0,0,0))
    );
New selectors
•   input[type=”text”] { css rules }
•   li:nth-child(3) { css rules }
•   li:nth-child(3n+3) { css rules }
•   li:nth-child(even) { css rules }
•   li:nth-child(odd) { css rules }
•   li:first-child { css rules }
•   li:last-child { css rules }
Text-shadow and Web fonts
 •     You can apply a drop-shadow:

.quote {

}
  text-shadow: 2px 2px 4px #fff;      Quote Text

 •     or embed a font on the web
@font-face {
  font-family: “BiauKai”;
  src: url(“fonts/BiauKai.ttf”);
}
Web-font resources
•   fontsquirrel.com

•   typekit.com

•   fontdeck.com

•   webfonts.fonts.com

•   google.com/webfonts
Rounded Corners
 •    You can round off the corners of a container:

header {
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 border-radius: 20px;




 •    always specify the non-browser specific modifier
      last, so compliant browsers will use it.
And so much more!
•   Box shadows (like text-shadow, but for block-level)

•   Specify multiple backgrounds.

•   Set transition times on “:hover”ed elements

•   “Transform” objects (rotate, skew, resize)
Implementing CSS3 Today
 •    caniuse.com - compatibility check for HTML5,
      CSS3 and more based on browser.
 •    HTML5 for Internet Explorer 6 to 8
<head<
 <!-- [if lt IE9]>
  <script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”>
 <![endif] -->
</head>

 •    Use a reset.css to start with a clean slate.
 •    Use Progressive Enhancement
Why use HTML5/CSS3?

•   Less reliance on JavaScript.
•   Less reliance on heavy images.
•   Less reliance on 3rd party plugins.
•   Better SEO
•   Better UX for website visitors.
•   They can do some really cool things.
Credits

•   Joe Lewis: http://www.slideshare.net/sanbeiji/
    introduction-to-html5-and-css3-revised
•   Bruce Lawson and Remy Sharp: Introducing
    HTML5 (2nd Edition)
•   w3schools.com/html and w3schools.com/css
•   HTML5doctor.com

More Related Content

What's hot (20)

Html intro
Html introHtml intro
Html intro
Robyn Overstreet
 
CSS
CSSCSS
CSS
Jussi Pohjolainen
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSS
Shay Howe
 
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Laura Scott
 
Html5 shubelal
Html5 shubelalHtml5 shubelal
Html5 shubelal
Shub
 
Grok Drupal (7) Theming
Grok Drupal (7) ThemingGrok Drupal (7) Theming
Grok Drupal (7) Theming
PINGV
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
Russ Weakley
 
Please dont touch-3.5
Please dont touch-3.5Please dont touch-3.5
Please dont touch-3.5
Francesco Fullone
 
Intro to WordPress theme development
Intro to WordPress theme developmentIntro to WordPress theme development
Intro to WordPress theme development
Thad Allender
 
Unit 3 (it workshop).pptx
Unit 3 (it workshop).pptxUnit 3 (it workshop).pptx
Unit 3 (it workshop).pptx
Dr.Lokesh Gagnani
 
Html5 public
Html5 publicHtml5 public
Html5 public
doodlemoonch
 
ePUB 3 and Publishing e-books
ePUB 3 and Publishing e-booksePUB 3 and Publishing e-books
ePUB 3 and Publishing e-books
Kerem Karatal
 
Please Don't Touch the Slow Parts V3
Please Don't Touch the Slow Parts V3Please Don't Touch the Slow Parts V3
Please Don't Touch the Slow Parts V3
Federico Galassi
 
Introduction to Drupal (7) Theming
Introduction to Drupal (7) ThemingIntroduction to Drupal (7) Theming
Introduction to Drupal (7) Theming
Robert Carr
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Deepak Sharma
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
 
What is HTML5?
What is HTML5?What is HTML5?
What is HTML5?
Anas AbuDayah
 
Arizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress ThemeArizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress Theme
certainstrings
 
Html5
Html5Html5
Html5
Mohammed Qasem
 
Modular HTML & CSS Workshop
Modular HTML & CSS WorkshopModular HTML & CSS Workshop
Modular HTML & CSS Workshop
Shay Howe
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSS
Shay Howe
 
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Laura Scott
 
Html5 shubelal
Html5 shubelalHtml5 shubelal
Html5 shubelal
Shub
 
Grok Drupal (7) Theming
Grok Drupal (7) ThemingGrok Drupal (7) Theming
Grok Drupal (7) Theming
PINGV
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
Russ Weakley
 
Intro to WordPress theme development
Intro to WordPress theme developmentIntro to WordPress theme development
Intro to WordPress theme development
Thad Allender
 
ePUB 3 and Publishing e-books
ePUB 3 and Publishing e-booksePUB 3 and Publishing e-books
ePUB 3 and Publishing e-books
Kerem Karatal
 
Please Don't Touch the Slow Parts V3
Please Don't Touch the Slow Parts V3Please Don't Touch the Slow Parts V3
Please Don't Touch the Slow Parts V3
Federico Galassi
 
Introduction to Drupal (7) Theming
Introduction to Drupal (7) ThemingIntroduction to Drupal (7) Theming
Introduction to Drupal (7) Theming
Robert Carr
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Deepak Sharma
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
 
Arizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress ThemeArizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress Theme
certainstrings
 
Modular HTML & CSS Workshop
Modular HTML & CSS WorkshopModular HTML & CSS Workshop
Modular HTML & CSS Workshop
Shay Howe
 

Viewers also liked (20)

Mastering CSS3 gradients
Mastering CSS3 gradientsMastering CSS3 gradients
Mastering CSS3 gradients
Lea Verou
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
Amit Tyagi
 
Css presentation lecture 4
Css presentation lecture 4Css presentation lecture 4
Css presentation lecture 4
Mudasir Syed
 
Compass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperCompass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS Developer
Wynn Netherland
 
Incorporating ePortfolios into Advising Practice
Incorporating ePortfolios  into Advising PracticeIncorporating ePortfolios  into Advising Practice
Incorporating ePortfolios into Advising Practice
G. Alex Ambrose
 
Examining the Role of Digital Badges in a University's Massive Open Online Co...
Examining the Role of Digital Badges in a University's Massive Open Online Co...Examining the Role of Digital Badges in a University's Massive Open Online Co...
Examining the Role of Digital Badges in a University's Massive Open Online Co...
G. Alex Ambrose
 
CSS
CSS CSS
CSS
Sunil OS
 
Web Design
Web DesignWeb Design
Web Design
Speedy Little Website
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
Alberto Apellidos
 
Colors In CSS3
Colors In CSS3Colors In CSS3
Colors In CSS3
Lea Verou
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
Randy Oest II
 
Mobile Web App development multiplatform using phonegap-cordova
Mobile Web App development multiplatform using phonegap-cordovaMobile Web App development multiplatform using phonegap-cordova
Mobile Web App development multiplatform using phonegap-cordova
Khirulnizam Abd Rahman
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
Karolina Coates
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you need
Dipen Parmar
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Dan Phiffer
 
Frames tables forms
Frames tables formsFrames tables forms
Frames tables forms
nobel mujuji
 
JavaScript Operators
JavaScript OperatorsJavaScript Operators
JavaScript Operators
Charles Russell
 
Introdution to HTML 5
Introdution to HTML 5Introdution to HTML 5
Introdution to HTML 5
onkar_bhosle
 
Html 5
Html 5Html 5
Html 5
manujayarajkm
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
Steven Chipman
 
Mastering CSS3 gradients
Mastering CSS3 gradientsMastering CSS3 gradients
Mastering CSS3 gradients
Lea Verou
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
Amit Tyagi
 
Css presentation lecture 4
Css presentation lecture 4Css presentation lecture 4
Css presentation lecture 4
Mudasir Syed
 
Compass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperCompass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS Developer
Wynn Netherland
 
Incorporating ePortfolios into Advising Practice
Incorporating ePortfolios  into Advising PracticeIncorporating ePortfolios  into Advising Practice
Incorporating ePortfolios into Advising Practice
G. Alex Ambrose
 
Examining the Role of Digital Badges in a University's Massive Open Online Co...
Examining the Role of Digital Badges in a University's Massive Open Online Co...Examining the Role of Digital Badges in a University's Massive Open Online Co...
Examining the Role of Digital Badges in a University's Massive Open Online Co...
G. Alex Ambrose
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
Alberto Apellidos
 
Colors In CSS3
Colors In CSS3Colors In CSS3
Colors In CSS3
Lea Verou
 
Mobile Web App development multiplatform using phonegap-cordova
Mobile Web App development multiplatform using phonegap-cordovaMobile Web App development multiplatform using phonegap-cordova
Mobile Web App development multiplatform using phonegap-cordova
Khirulnizam Abd Rahman
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
Karolina Coates
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you need
Dipen Parmar
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Dan Phiffer
 
Frames tables forms
Frames tables formsFrames tables forms
Frames tables forms
nobel mujuji
 
Introdution to HTML 5
Introdution to HTML 5Introdution to HTML 5
Introdution to HTML 5
onkar_bhosle
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
Steven Chipman
 
Ad

Similar to Intro to HTML 5 / CSS 3 (20)

Html5 training
Html5 trainingHtml5 training
Html5 training
James VanDyke
 
Light introduction to HTML
Light introduction to HTMLLight introduction to HTML
Light introduction to HTML
abidibo Contini
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
Darren Wood
 
Html starting
Html startingHtml starting
Html starting
Rahul Dihora
 
Supplement web design
Supplement web designSupplement web design
Supplement web design
shelly3160
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
Abzetdin Adamov
 
41915024 html-5
41915024 html-541915024 html-5
41915024 html-5
Nitin Samariya
 
Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction
Diego Scataglini
 
Class1slides
Class1slidesClass1slides
Class1slides
Alexis Goldstein
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
Pamela Fox
 
Html n CSS
Html n CSSHtml n CSS
Html n CSS
Sukrit Gupta
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Erin M. Kidwell
 
The Language of the Web - HTML and CSS
The Language of the Web - HTML and CSSThe Language of the Web - HTML and CSS
The Language of the Web - HTML and CSS
kcasavale
 
Slides 2 - HTML
Slides 2 - HTMLSlides 2 - HTML
Slides 2 - HTML
Massimo Callisto
 
web technologiesUnit 1
web technologiesUnit 1web technologiesUnit 1
web technologiesUnit 1
Pathi Radhika
 
IntroHTMzczczscasasaklahduasihiaSUJScgGJKKL.ppt
IntroHTMzczczscasasaklahduasihiaSUJScgGJKKL.pptIntroHTMzczczscasasaklahduasihiaSUJScgGJKKL.ppt
IntroHTMzczczscasasaklahduasihiaSUJScgGJKKL.ppt
diciembrejatcs
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introduction
Diego Scataglini
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
Aditya Varma
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
BG Java EE Course
 
Light introduction to HTML
Light introduction to HTMLLight introduction to HTML
Light introduction to HTML
abidibo Contini
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
Darren Wood
 
Supplement web design
Supplement web designSupplement web design
Supplement web design
shelly3160
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
 
Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction
Diego Scataglini
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
Pamela Fox
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Erin M. Kidwell
 
The Language of the Web - HTML and CSS
The Language of the Web - HTML and CSSThe Language of the Web - HTML and CSS
The Language of the Web - HTML and CSS
kcasavale
 
web technologiesUnit 1
web technologiesUnit 1web technologiesUnit 1
web technologiesUnit 1
Pathi Radhika
 
IntroHTMzczczscasasaklahduasihiaSUJScgGJKKL.ppt
IntroHTMzczczscasasaklahduasihiaSUJScgGJKKL.pptIntroHTMzczczscasasaklahduasihiaSUJScgGJKKL.ppt
IntroHTMzczczscasasaklahduasihiaSUJScgGJKKL.ppt
diciembrejatcs
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introduction
Diego Scataglini
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
Aditya Varma
 
Ad

More from Tadpole Collective (8)

Troubleshooting Common WordPress-Problems
Troubleshooting Common WordPress-ProblemsTroubleshooting Common WordPress-Problems
Troubleshooting Common WordPress-Problems
Tadpole Collective
 
An Intro: WordPress with CiviCRM at Civicon 2014
An Intro: WordPress with CiviCRM at Civicon 2014An Intro: WordPress with CiviCRM at Civicon 2014
An Intro: WordPress with CiviCRM at Civicon 2014
Tadpole Collective
 
WordPress Workshop with Tadpole, SATW 2013 Conference
WordPress Workshop with Tadpole, SATW 2013 ConferenceWordPress Workshop with Tadpole, SATW 2013 Conference
WordPress Workshop with Tadpole, SATW 2013 Conference
Tadpole Collective
 
Type on the Web (with WordPress)
Type on the Web (with WordPress)Type on the Web (with WordPress)
Type on the Web (with WordPress)
Tadpole Collective
 
Getting on the web with WordPress
Getting on the web with WordPressGetting on the web with WordPress
Getting on the web with WordPress
Tadpole Collective
 
CiviCRM with WordPress: A Dynamic Duo!
CiviCRM with WordPress: A Dynamic Duo!CiviCRM with WordPress: A Dynamic Duo!
CiviCRM with WordPress: A Dynamic Duo!
Tadpole Collective
 
Using Web Fonts in WordPress
Using Web Fonts in WordPress Using Web Fonts in WordPress
Using Web Fonts in WordPress
Tadpole Collective
 
WordPress for Nonprofits Using CiviCRM
WordPress for Nonprofits Using CiviCRMWordPress for Nonprofits Using CiviCRM
WordPress for Nonprofits Using CiviCRM
Tadpole Collective
 
Troubleshooting Common WordPress-Problems
Troubleshooting Common WordPress-ProblemsTroubleshooting Common WordPress-Problems
Troubleshooting Common WordPress-Problems
Tadpole Collective
 
An Intro: WordPress with CiviCRM at Civicon 2014
An Intro: WordPress with CiviCRM at Civicon 2014An Intro: WordPress with CiviCRM at Civicon 2014
An Intro: WordPress with CiviCRM at Civicon 2014
Tadpole Collective
 
WordPress Workshop with Tadpole, SATW 2013 Conference
WordPress Workshop with Tadpole, SATW 2013 ConferenceWordPress Workshop with Tadpole, SATW 2013 Conference
WordPress Workshop with Tadpole, SATW 2013 Conference
Tadpole Collective
 
Type on the Web (with WordPress)
Type on the Web (with WordPress)Type on the Web (with WordPress)
Type on the Web (with WordPress)
Tadpole Collective
 
Getting on the web with WordPress
Getting on the web with WordPressGetting on the web with WordPress
Getting on the web with WordPress
Tadpole Collective
 
CiviCRM with WordPress: A Dynamic Duo!
CiviCRM with WordPress: A Dynamic Duo!CiviCRM with WordPress: A Dynamic Duo!
CiviCRM with WordPress: A Dynamic Duo!
Tadpole Collective
 
WordPress for Nonprofits Using CiviCRM
WordPress for Nonprofits Using CiviCRMWordPress for Nonprofits Using CiviCRM
WordPress for Nonprofits Using CiviCRM
Tadpole Collective
 

Recently uploaded (20)

Unlock Tool 2025.06 Crack Latest Version Free Download 2025
Unlock Tool 2025.06 Crack Latest Version Free Download 2025Unlock Tool 2025.06 Crack Latest Version Free Download 2025
Unlock Tool 2025.06 Crack Latest Version Free Download 2025
Designer
 
Hot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWohee
Hot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWoheeHot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWohee
Hot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWohee
boheewohee
 
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
Yahoo
 
Minahil Mushtaq's Creative Portfolio 2024
Minahil Mushtaq's Creative Portfolio 2024Minahil Mushtaq's Creative Portfolio 2024
Minahil Mushtaq's Creative Portfolio 2024
MinahilMushtaq2
 
2025 Agile Manchester - error rates and data quality.pptx
2025 Agile Manchester - error rates and data quality.pptx2025 Agile Manchester - error rates and data quality.pptx
2025 Agile Manchester - error rates and data quality.pptx
Caroline Jarrett
 
Verayouth Chotivanich Portfolio
Verayouth Chotivanich PortfolioVerayouth Chotivanich Portfolio
Verayouth Chotivanich Portfolio
Verayouth Chotivanich
 
AnyMP4 DVD Ripper 8.1.12 + Crack Free Download [Latest 2025]
AnyMP4 DVD Ripper 8.1.12 + Crack Free Download [Latest 2025]AnyMP4 DVD Ripper 8.1.12 + Crack Free Download [Latest 2025]
AnyMP4 DVD Ripper 8.1.12 + Crack Free Download [Latest 2025]
salma
 
internship project company portable document
internship project company portable documentinternship project company portable document
internship project company portable document
MytecEnter
 
Total Uninstall Pro 7 Crack Free Download [Latest]
Total Uninstall Pro 7 Crack Free Download [Latest]Total Uninstall Pro 7 Crack Free Download [Latest]
Total Uninstall Pro 7 Crack Free Download [Latest]
Designer
 
IObit Malware Fighter Pro Crack with Crack Download [Latest]
IObit Malware Fighter Pro Crack with Crack Download [Latest]IObit Malware Fighter Pro Crack with Crack Download [Latest]
IObit Malware Fighter Pro Crack with Crack Download [Latest]
Ayesha khan
 
Directory Lister Pro 2.42 Enterprise + Crack Download [Latest]
Directory Lister Pro 2.42 Enterprise + Crack Download [Latest]Directory Lister Pro 2.42 Enterprise + Crack Download [Latest]
Directory Lister Pro 2.42 Enterprise + Crack Download [Latest]
Designer
 
Stardock WindowBlinds 10.85 Crack Full Version 2025
Stardock WindowBlinds 10.85 Crack Full Version 2025Stardock WindowBlinds 10.85 Crack Full Version 2025
Stardock WindowBlinds 10.85 Crack Full Version 2025
Google
 
Movavi Slideshow Maker 7.0.1 Crack + Activation Key [Latest]
Movavi Slideshow Maker 7.0.1 Crack + Activation Key [Latest]Movavi Slideshow Maker 7.0.1 Crack + Activation Key [Latest]
Movavi Slideshow Maker 7.0.1 Crack + Activation Key [Latest]
Developer
 
FL Studio Producer Edition Crack + Full Version [Latest]
FL Studio Producer Edition Crack + Full Version [Latest]FL Studio Producer Edition Crack + Full Version [Latest]
FL Studio Producer Edition Crack + Full Version [Latest]
Mudasir
 
Jjjkalmsnsxjxixnndixndnskaooashbd udnsnjsj
Jjjkalmsnsxjxixnndixndnskaooashbd udnsnjsjJjjkalmsnsxjxixnndixndnskaooashbd udnsnjsj
Jjjkalmsnsxjxixnndixndnskaooashbd udnsnjsj
sanskrutee2008
 
Service Design and Tourism with Hugo Mottier
Service Design and Tourism with Hugo MottierService Design and Tourism with Hugo Mottier
Service Design and Tourism with Hugo Mottier
sdnswitzerland
 
CV of Engineer AbdulRahman Rajab Al-Buhaysi
CV of Engineer AbdulRahman Rajab Al-BuhaysiCV of Engineer AbdulRahman Rajab Al-Buhaysi
CV of Engineer AbdulRahman Rajab Al-Buhaysi
Abdulrahman Albuhaysi
 
MiniTool Partition Wizard 12.8 Crack License Key [2025]
MiniTool Partition Wizard 12.8 Crack License Key [2025]MiniTool Partition Wizard 12.8 Crack License Key [2025]
MiniTool Partition Wizard 12.8 Crack License Key [2025]
Ayesha khan
 
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack DownloadApowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Designer
 
Shark Frp Tool Latest Version For PC & Windows
Shark Frp Tool Latest Version For PC & WindowsShark Frp Tool Latest Version For PC & Windows
Shark Frp Tool Latest Version For PC & Windows
Ayesha khan
 
Unlock Tool 2025.06 Crack Latest Version Free Download 2025
Unlock Tool 2025.06 Crack Latest Version Free Download 2025Unlock Tool 2025.06 Crack Latest Version Free Download 2025
Unlock Tool 2025.06 Crack Latest Version Free Download 2025
Designer
 
Hot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWohee
Hot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWoheeHot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWohee
Hot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWohee
boheewohee
 
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
Yahoo
 
Minahil Mushtaq's Creative Portfolio 2024
Minahil Mushtaq's Creative Portfolio 2024Minahil Mushtaq's Creative Portfolio 2024
Minahil Mushtaq's Creative Portfolio 2024
MinahilMushtaq2
 
2025 Agile Manchester - error rates and data quality.pptx
2025 Agile Manchester - error rates and data quality.pptx2025 Agile Manchester - error rates and data quality.pptx
2025 Agile Manchester - error rates and data quality.pptx
Caroline Jarrett
 
AnyMP4 DVD Ripper 8.1.12 + Crack Free Download [Latest 2025]
AnyMP4 DVD Ripper 8.1.12 + Crack Free Download [Latest 2025]AnyMP4 DVD Ripper 8.1.12 + Crack Free Download [Latest 2025]
AnyMP4 DVD Ripper 8.1.12 + Crack Free Download [Latest 2025]
salma
 
internship project company portable document
internship project company portable documentinternship project company portable document
internship project company portable document
MytecEnter
 
Total Uninstall Pro 7 Crack Free Download [Latest]
Total Uninstall Pro 7 Crack Free Download [Latest]Total Uninstall Pro 7 Crack Free Download [Latest]
Total Uninstall Pro 7 Crack Free Download [Latest]
Designer
 
IObit Malware Fighter Pro Crack with Crack Download [Latest]
IObit Malware Fighter Pro Crack with Crack Download [Latest]IObit Malware Fighter Pro Crack with Crack Download [Latest]
IObit Malware Fighter Pro Crack with Crack Download [Latest]
Ayesha khan
 
Directory Lister Pro 2.42 Enterprise + Crack Download [Latest]
Directory Lister Pro 2.42 Enterprise + Crack Download [Latest]Directory Lister Pro 2.42 Enterprise + Crack Download [Latest]
Directory Lister Pro 2.42 Enterprise + Crack Download [Latest]
Designer
 
Stardock WindowBlinds 10.85 Crack Full Version 2025
Stardock WindowBlinds 10.85 Crack Full Version 2025Stardock WindowBlinds 10.85 Crack Full Version 2025
Stardock WindowBlinds 10.85 Crack Full Version 2025
Google
 
Movavi Slideshow Maker 7.0.1 Crack + Activation Key [Latest]
Movavi Slideshow Maker 7.0.1 Crack + Activation Key [Latest]Movavi Slideshow Maker 7.0.1 Crack + Activation Key [Latest]
Movavi Slideshow Maker 7.0.1 Crack + Activation Key [Latest]
Developer
 
FL Studio Producer Edition Crack + Full Version [Latest]
FL Studio Producer Edition Crack + Full Version [Latest]FL Studio Producer Edition Crack + Full Version [Latest]
FL Studio Producer Edition Crack + Full Version [Latest]
Mudasir
 
Jjjkalmsnsxjxixnndixndnskaooashbd udnsnjsj
Jjjkalmsnsxjxixnndixndnskaooashbd udnsnjsjJjjkalmsnsxjxixnndixndnskaooashbd udnsnjsj
Jjjkalmsnsxjxixnndixndnskaooashbd udnsnjsj
sanskrutee2008
 
Service Design and Tourism with Hugo Mottier
Service Design and Tourism with Hugo MottierService Design and Tourism with Hugo Mottier
Service Design and Tourism with Hugo Mottier
sdnswitzerland
 
CV of Engineer AbdulRahman Rajab Al-Buhaysi
CV of Engineer AbdulRahman Rajab Al-BuhaysiCV of Engineer AbdulRahman Rajab Al-Buhaysi
CV of Engineer AbdulRahman Rajab Al-Buhaysi
Abdulrahman Albuhaysi
 
MiniTool Partition Wizard 12.8 Crack License Key [2025]
MiniTool Partition Wizard 12.8 Crack License Key [2025]MiniTool Partition Wizard 12.8 Crack License Key [2025]
MiniTool Partition Wizard 12.8 Crack License Key [2025]
Ayesha khan
 
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack DownloadApowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Designer
 
Shark Frp Tool Latest Version For PC & Windows
Shark Frp Tool Latest Version For PC & WindowsShark Frp Tool Latest Version For PC & Windows
Shark Frp Tool Latest Version For PC & Windows
Ayesha khan
 

Intro to HTML 5 / CSS 3

  • 1. Introduction to & Andrew Christian
  • 2. Obligatory Intro So, who is this guy? • Coding HTML since 1996 • WordPress since 2004 (v1.0.2 Art Blakely) • New York WP Community since WordCamp NYC 2009. • Tadpole.cc - WordPress Hosting, Support, Training and Consulting
  • 3. I’m assuming... • You are somewhat familiar with previous versions of HTML and CSS . • You know your way around a WordPress theme, but not necessarily hard-core dev.
  • 4. A Little History • HTML was created to link documents via HyperText (the “HT” in HTML) • Quickly grew into a more rich markup language (the “ML”) • Browser Wars: Microsoft vs. Netscape.
  • 5. A Little History • XHTML created in order to transition from HTML to XML • XHTML required stricter coding standards. • If not coded properly, it would break... Horribly.
  • 6. A Little History • 2002: W3C created XHTML 2.0 • 2004: Apple, Mozilla, and Opera created the WHATWG, when W3C shot down HTML5. • 2007: W3C created HTML 5 working group. • 2009: W3C abandons XHTML 2.0 in favor of HTML5.
  • 7. HTML5 Philosophy • Must be backwards compatible with older versions of HTML. • Everything added or removed must be done so for a practical purpose. • The process of deciding what goes in is an open process, involving blogs, twitter, etc.
  • 8. Can we use it now? • The spec is not 100% finalized, but is broken into “modules,” many of which are finalized. • Most features are supported by all major browsers (Chrome, Firefox 4+, Safari, IE9+) • Most features degrade gracefully in older browsers.
  • 9. Document Heading <!DOCTYPE html PUBLIC “=//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml-1-transitional.dtd”> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Page Title goes hear</title> <meta http-equiv=”Content- Type” content=”text/html; charset=iso-8859-1” /> <link rel=”stylesheet” href=”style.css” type=”text/css” /> <script src=”javascript.css” type=”text/javascript” /> </ head>
  • 10. Document Heading <!DOCTYPE html> <html lang="en-us"> <head> <title>Page Title goes hear</title> <meta charset=”utf-8”> <link rel=”stylesheet” href=”style.css”>
  • 11. HTML Code Syntax <IMG SRC=”image.png” ALT=”This is an image, Duh!” /> is the same as <Img sRc=image.png ALt=’This is an image, Duh!’>
  • 12. New HTML Elements • article • footer < > • aside • header • bdi • hgroup • command • mark • details • nav • summary • ruby, rt, and rp • figure • section • figcaption • time
  • 13. Changed Elements • <a> can now wrap around block elements. • <b> and <i> are back (but not presentational). • <cite> defined to be the title of a work. • <hr> is now a “paragraph-level thematic break.” • <small> is now for small-print, i.e., legal boilerplate.
  • 14. Removed Elements • <big> • <center> and <font> • <strike> and <u> • <frame>, <frameset>, and <noframes> • <acronym> is now <abbr> • <applet> is now <object>
  • 15. Blog Page Structure <div id=”header”> <h1>Page Title</h1> <p>Tag Line text...</p> </div> <div id=”nav”> <ul>...list of nav links...</ul> </div> <div id=”sidebar”>...sidebar links...</div> <div id=”content”> <div class=”article”> <h2>Article Title</h2> <p>Published on June 9, 2012.</p> <p>Article Content</p> <div class=”entry-meta”>...comments, permalink, etc...</div> </div> </div> <div id=”footer”>
  • 16. Blog Page Structure <header> <hgroup> <h1>Page Title</h1> <h2>Tag Line text...</h2> </hgroup> </header> <nav><ul>...list of nav links...</ul></nav> <aside>...sidebar links...</aside> <article> <header> <h1>Article Title</h1> <time datetime=”2012-06-09” pubdate”>Published on June 9, 2012.</time> </header> <p>Article Content</p> <footer>...comments, permalink, etc...</footer>
  • 17. <header> & <hgroup> • When <header> is used outside of other elements, it’s assumed to be the page header. • When <header> is used inside of elements like <aside> and <article> • <header> isn’t necessary when an <h1> is the only element of the header. • Cannot be placed inside a <footer>, <address> or another <header> element.
  • 18. <header> & <hgroup> • <header> allows you to group other content in with the heading, such as publication date, etc. • <hgroup> links together multiple headings into one header. • Great for headers that have multiple lines, or the Page Title with a Site Description.
  • 19. <footer> • Just like <header>, you can use more than one <footer> on a page. • A footer typically, but not always, goes at the bottom of content. • For example, if you use a <footer> for next/ previous blog post links, you can use <article> <header>...</header> <footer>...Next/Previous nav links</footer> <p>...Content</p> <footer>...Next/Previous nav links</footer>
  • 20. <nav> • Usually contains a <ul> list of links. • You can have more than one <nav> list on a page. • Placing the <nav> outside of other elements means it’s navigation across your site. • Placing <nav> inside an <article> means it’s navigation for that article only (useful on single post pages for Next/Previous links).
  • 21. <article> and <section> • <article> should be a complete block of content that is wholly separate from other content. • <section> divides content into, yes, sections. A section does not stand on its own. • Think of <article> as something you might see in an RSS feed. • However, you can use <article> within another <article> tag. For example, comments could be in separate <article> tags inside of a blog post.
  • 22. <aside> • Used for “Secondary Content” • Meant for content that is related to, but not necessarily important for understanding, content. • Can be used as a sidebar for a page. • Can also be used inside <article>, etc., for information related to the article.
  • 23. <aside> • Used for “Secondary Content” • Meant for content that is related to, but not necessarily important for understanding, content. • Can be used as a sidebar for a page. • Can also be used inside <article>, etc., for information related to the article.
  • 24. Forms - New Attributes • required • autofocus • placeholder • form • autocomplete • pattern
  • 25. Forms - New Input Types • email • tel (telephone) • date • color • search • number • New input types fall back to type=”text” in older browsers, but newer browsers can display a special input (keyboard, color chooser, number dial, etc.)
  • 26. Video - the old way <object width=”400 height=”300”> <param name=”movie” value=”http://www.youtube.com/v/ddO9idmax0o” /> <param name=”allowFullScreen” value=”true” /> <param name=”allowscriptaccess” value=”always” /> <embed src=”http://www.youtube.com/v/ddO9idmax0o” type=”application/x- shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”400” height=”300” /> • Code is complex and confusing • Relies on 3rd party plugins for functionality.
  • 27. Video - the new way <video src=”movie.mp4”>
  • 28. Video - the new way <video controls autoplay> <source src=”movie.mp4” type=”video/mp4; codecs=avc1.42E01E,mp4a.40.2”> <source src=”movie.ogv” type=”vidio/off; codecs=theora,vorbis”> <p>Get the video in <a href=”movie.mp4”>MP4</a> or <a href=”movie.ofv”>Ogg Vorbis</a> format.</p> • Code is easier to read. • Video playback doesn’t require any plugins. • Multiple sources depending on browser support.
  • 29. Audio - Just as easy! <audio src=”audio.mp3”>
  • 30. Now it’s time to dig in to
  • 31. Browser Support • Webkit (Safari and Chrome) • Firefox 4+ • Opera • IE 9+ • CSS3 doesn’t deprecate anything from CSS 2.1. • Currently uses -moz-, -webkit-, and other browser specific prefixes on many modifiers.
  • 32. CSS3 and Color • The old way - background-color: #1a2b3c; • RGBa - background-color: rgba(0, 255, 0, 0.7); • HSLa - background-color: hsla(0, 100%, 35%, 0.4); • “a” stands for “alpha”, or opacity.
  • 33. Opacity and Gradients • You can also specify the opacity of an object: header { background-color: #000; opacity: 0.7; } • or specify a color gradient. background-image: -webkit-gradient( linear, left 50, right 50, color-stop(0.08, rgb(255,255,255)), color-stop(0.54, rgb(133,133,133)), color-stop(0.77, rgb(0,0,0)) );
  • 34. New selectors • input[type=”text”] { css rules } • li:nth-child(3) { css rules } • li:nth-child(3n+3) { css rules } • li:nth-child(even) { css rules } • li:nth-child(odd) { css rules } • li:first-child { css rules } • li:last-child { css rules }
  • 35. Text-shadow and Web fonts • You can apply a drop-shadow: .quote { } text-shadow: 2px 2px 4px #fff; Quote Text • or embed a font on the web @font-face { font-family: “BiauKai”; src: url(“fonts/BiauKai.ttf”); }
  • 36. Web-font resources • fontsquirrel.com • typekit.com • fontdeck.com • webfonts.fonts.com • google.com/webfonts
  • 37. Rounded Corners • You can round off the corners of a container: header { -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; • always specify the non-browser specific modifier last, so compliant browsers will use it.
  • 38. And so much more! • Box shadows (like text-shadow, but for block-level) • Specify multiple backgrounds. • Set transition times on “:hover”ed elements • “Transform” objects (rotate, skew, resize)
  • 39. Implementing CSS3 Today • caniuse.com - compatibility check for HTML5, CSS3 and more based on browser. • HTML5 for Internet Explorer 6 to 8 <head< <!-- [if lt IE9]> <script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”> <![endif] --> </head> • Use a reset.css to start with a clean slate. • Use Progressive Enhancement
  • 40. Why use HTML5/CSS3? • Less reliance on JavaScript. • Less reliance on heavy images. • Less reliance on 3rd party plugins. • Better SEO • Better UX for website visitors. • They can do some really cool things.
  • 41. Credits • Joe Lewis: http://www.slideshare.net/sanbeiji/ introduction-to-html5-and-css3-revised • Bruce Lawson and Remy Sharp: Introducing HTML5 (2nd Edition) • w3schools.com/html and w3schools.com/css • HTML5doctor.com