HTML & CSS 101

HTML
& CSS
101

Who am I?

( Josh Broton! )

  • Interactive Design Lead / Front-End Developer at VistaComm in Sioux Falls, SD
  • Freelance: Design, front-end development, UX audits
  • Front-end developer for KidBlog.org
    • Largest educational blog system in the world
    • 3rd largest WP Multisite install in the world
      (unconfirmed)Largest WP MultiSite with single db in the world

Who am I?

( Josh Broton! )

  • Computer & Network Security / Computer Science at DSU
  • joshbroton.com
  • twitter.com/joshbroton

Scaffolding

  • Structural - HTML
  • Presentational - CSS
  • Logic - JavaScript/server-side code

What is HTML?


Hypertext Markup Language

What makes up an HTML document?

  1. Doctype - Tells the browser what to expect
  2. Head - Metadata and external resources
  3. Body - actual content

Doctype

Start of the Markup

Head

What Is the Head For?

  1. Information about the site or page

Page Title

Metadata

Shortcut Icon

What Is the Head For?

  1. Information about the site or page
  2. CSS and links to external stylesheets

External CSS

Embedded CSS

Inline CSS

What Is the Head For?

  1. Information about the site or page
  2. CSS and links to external stylesheets
  3. JavaScript and external script includes

External JavaScript

Embedded JavaScript

Inline JavaScript

Body

Content

Element


This is an element.

Element


This is the opening tag.

Element


These is the element's attributes.

Element


This are the element's content.

Element


This is the closing tag.

Important Tags

  • <a href=""></a>
  • <div></div>
  • <ol></ol>
  • <ul></ul>
  • <table></table>

New Tags in HTML5

  • <header></header>
  • <footer></footer>
  • <section></section>
  • <article></article>
  • <nav></nav>
  • <aside></aside>
  • <video></video>

Lets
Talk
CSS

Selectors

Selector Practice

Selector Practice

Selector Practice

Selector Practice

Selector Practice

Selector Practice

CSS Specificity

CSS Specificity

Puts the "cascading" in cascading style sheets

Specificity Hierarchy

  1. Inline Styles
    <div style="color:red;">
  2. IDs
    #wrapper, #header
  3. Classes
    .content, .main-nav, .footer
  4. Elements
    div, a, h1

Calculating Specificity


a { color: red; } < .content { color: yellow; }

 

Calculating Specificity


a { color: red; } < .content { color: yellow; }

0,0,0,1 < 0,0,1,0

Calculating Specificity


#wrapper{ color:red; } > .sidebar>li>a{ color:blue; }

 

Calculating Specificity


#wrapper{ color:red; } > .sidebar>li>a{ color:blue; }

0,1,0,0 > 0,0,1,2

Specificity

Specificity Practice

Specificity Practice

Specificity Practice

Specificity Practice

Specificity Practice

Specificity Practice

Specificity Practice

Specificity

  • Equal - Use latter
  • Not Equal - Use more specific

Display Types

  • inline
    No margins, padding, or float
  • inline-block
    Can add margins or padding. Will not cause wrap.
  • block
    Will cause wrap. Can float. Default width is 100%.

display: inline;

<span style="background: red;">test</span> x4
 test test test test

display: inline-block;

<span style="display: inline-block;
        background: red;
        padding: 10px;
        margin: 20px;">
            test
        </span> x4
 test test test test

display: block;

<span style="display: block;
        background: red;
        padding: 10px;
        margin: 20px;">
            test
        </span> x4
 test test test test

Box Model

Box Model

THANK YOU!


Questions?


 twitter.com/joshbroton
joshbroton.com