Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An Intro to HTML & CSS

Shay Howe
December 02, 2011

An Intro to HTML & CSS

HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.

Shay Howe

December 02, 2011
Tweet

More Decks by Shay Howe

Other Decks in Design

Transcript

  1. AN INTRO TO
    HTML & CSS
    Shay Howe
    November 2011
    www.shayhowe.com – @shayhowe

    View full-size slide

  2. An Intro to HTML & CSS
    SHAY HOWE
    www.shayhowe.com – @shayhowe
    @shayhowe

    View full-size slide

  3. An Intro to HTML & CSS
    WHAT IS DESIGN?
    @shayhowe

    View full-size slide

  4. An Intro to HTML & CSS
    WHAT IS DESIGN?
    “In most people’s vocabularies, design is a veneer. It’s
    interior decorating. It’s the fabric of the curtains, of the
    sofa. But to me, nothing could be further from the
    meaning of design. Design is the fundamental soul of a
    human-made creation that ends up expressing itself in
    successive outer layers of the product.”
    – Steve Jobs
    @shayhowe

    View full-size slide

  5. An Intro to HTML & CSS
    WHAT IS HTML & CSS?
    @shayhowe

    View full-size slide

  6. An Intro to HTML & CSS
    HTML
    Markup language to give
    content structure and
    meaning.
    @shayhowe
    CSS
    Presentation language to
    give content style and
    appearance.

    View full-size slide

  7. An Intro to HTML & CSS
    HTML
    Content.
    @shayhowe
    CSS
    Style.

    View full-size slide

  8. An Intro to HTML & CSS
    HTML
    Hyper Text Markup Language
    @shayhowe

    View full-size slide

  9. An Intro to HTML & CSS
    ELEMENTS, ATTRIBUTES, & TAGS
    Elements
    body,  h1,  p,  div,  strong,  em,  span
    Elements are HTML designators that define certain objects.
    Attributes
    href="http://shayhowe.com"  title="Shay  Howe"
    Attributes provide additional information to the given element.
    Tags

    Tags encompass elements and their corresponding attributes.
    @shayhowe

    View full-size slide

  10. BLOCK & INLINE ELEMENTS
    Block
    Block level elements begin on a new line within the document and occupy the full
    available width.
    Inline
    Inline level elements do not begin on a new line and fall into the flow of the document,
    maintaing their necessary width.
    An Intro to HTML & CSS @shayhowe
    header
    footer
    article
    section
    aside
    div
    h1...h6
    p
    table
    form
    ul,  ol,  li
    dl,  dt,  dd
    span
    a
    strong
    em
    img
    br
    input
    abbr

    View full-size slide

  11. An Intro to HTML & CSS
    DOCUMENT STRUCTURE


       
           Hello  World
       
       
           Hello  World
           This  is  a  website.
       

    @shayhowe

    View full-size slide

  12. An Intro to HTML & CSS
    QUIZ
    @shayhowe

    View full-size slide

  13. An Intro to HTML & CSS
    SAMPLE NAVIGATION HTML

       
           
               Code  Academy  Tumblr  Blog
           
       
       
           
               Email  Code  Academy
           
       
       
           
               Code  Academy  Twitter
           
       
       ...

    @shayhowe

    View full-size slide

  14. An Intro to HTML & CSS
    SAMPLE NAVIGATION CSS
    ul#social  {
       list-­‐style:  none;  }
    ul#social  li  {
       float:  left;
       margin:  12px  0  0  0;
       padding:  0  3px;  }
    ul#social  li  a  {
       background:  url("icons.png")  0  0  no-­‐repeat;
       display:  block;
       height:  17px;
       text-­‐indent:  -­‐9999px;
       width:  16px;  }
    ul#social  li.tumblr  a  {
       background-­‐position:  0  -­‐64px;  }
    ul#social  li.mail  a  {
       background-­‐position:  0  -­‐81px;  }
    ul#social  li.twitter  a  {
       background-­‐position:  0  -­‐98px;  }
    @shayhowe

    View full-size slide

  15. An Intro to HTML & CSS
    TAGS

       
           
               Code  Academy  Tumblr  Blog
           
       
       
           
               Email  Code  Academy
           
       
       
           
               Code  Academy  Twitter
           
       
       ...

    @shayhowe

    View full-size slide

  16. An Intro to HTML & CSS
    ELEMENTS

       
           
               Code  Academy  Tumblr  Blog
           
       
       
           
               Email  Code  Academy
           
       
       
           
               Code  Academy  Twitter
           
       
       ...

    @shayhowe

    View full-size slide

  17. An Intro to HTML & CSS
    ATTRIBUTES

       
           
               Code  Academy  Tumblr  Blog
           
       
       
           
               Email  Code  Academy
           
       
       
           
               Code  Academy  Twitter
           
       
       ...

    @shayhowe

    View full-size slide

  18. An Intro to HTML & CSS
    ID & CLASS

       
           
               Code  Academy  Tumblr  Blog
           
       
       
           
               Email  Code  Academy
           
       
       
           
               Code  Academy  Twitter
           
       
       ...

    @shayhowe

    View full-size slide

  19. An Intro to HTML & CSS
    REFERENCING A CSS FILE


       
           Hello  World
           
       
       
           Hello  World
           This  is  a  website.
       

    @shayhowe

    View full-size slide

  20. An Intro to HTML & CSS
    CSS
    Cascading Style Sheets
    @shayhowe

    View full-size slide

  21. An Intro to HTML & CSS
    SELECTOR, PROPERTY, VALUE
    Selector
    h1  {
       font:  bold  16px/24px  Arial,  sans-­‐serif;  }
    A selector determines which element to apply style to.
    Property
    h1  {
       font:  bold  16px/24px  Arial,  sans-­‐serif;  }
    A property is the style that will be applied to the element.
    Value
    h1  {
       font:  bold  16px/24px  Arial,  sans-­‐serif;  }
    A value is the determines the behavior of a property.
    @shayhowe

    View full-size slide

  22. An Intro to HTML & CSS
    RULE SETS & DECLARATIONS
    Rule Set
    h1  {
       font:  bold  16px/24px  Arial,  sans-­‐serif;  }
    A rule set includes a selector and all corresponding declarations.
    Declarations
    h1  {
       font:  bold  16px/24px  Arial,  sans-­‐serif;  }
    Declarations are individual lines of CSS within a rule set.
    @shayhowe

    View full-size slide

  23. An Intro to HTML & CSS
    ELEMENT, ID, & CLASS SELECTORS
    Element Selector
    h1  {
       font:  bold  16px/24px  Arial,  sans-­‐serif;  }
    An element selector targets and element by its name.
    ID Selector
    #logo  {
       background:  url("logo.png")  0  0  no-­‐repeat;  }
    An ID selector targets and element by its ID. ID’s are to be reserved to one a page.
    Class Selector
    .column  {
       width:  200px;  }
    A class selector targets and element by its class. Classes may appear multiple times
    within a page.
    @shayhowe

    View full-size slide

  24. An Intro to HTML & CSS
    QUIZ
    @shayhowe

    View full-size slide

  25. An Intro to HTML & CSS
    QUIZ
    ul#social  {
       list-­‐style:  none;  }
    ul#social  li  {
       float:  left;
       margin:  12px  0  0  0;
       padding:  0  3px;  }
    ul#social  li  a  {
       background:  url("icons.png")  0  0  no-­‐repeat;
       display:  block;
       height:  17px;
       text-­‐indent:  -­‐9999px;
       width:  16px;  }
    ul#social  li.tumblr  a  {
       background-­‐position:  0  -­‐64px;  }
    ul#social  li.mail  a  {
       background-­‐position:  0  -­‐81px;  }
    ul#social  li.twitter  a  {
       background-­‐position:  0  -­‐98px;  }
    @shayhowe

    View full-size slide

  26. An Intro to HTML & CSS
    SELECTORS
    ul#social  {
       list-­‐style:  none;  }
    ul#social  li  {
       float:  left;
       margin:  12px  0  0  0;
       padding:  0  3px;  }
    ul#social  li  a  {
       background:  url("icons.png")  0  0  no-­‐repeat;
       display:  block;
       height:  17px;
       text-­‐indent:  -­‐9999px;
       width:  16px;  }
    ul#social  li.tumblr  a  {
       background-­‐position:  0  -­‐64px;  }
    ul#social  li.mail  a  {
       background-­‐position:  0  -­‐81px;  }
    ul#social  li.twitter  a  {
       background-­‐position:  0  -­‐98px;  }
    @shayhowe

    View full-size slide

  27. An Intro to HTML & CSS
    PROPERTIES
    ul#social  {
       list-­‐style:  none;  }
    ul#social  li  {
       float:  left;
       margin:  12px  0  0  0;
       padding:  0  3px;  }
    ul#social  li  a  {
       background:  url("icons.png")  0  0  no-­‐repeat;
       display:  block;
       height:  17px;
       text-­‐indent:  -­‐9999px;
       width:  16px;  }
    ul#social  li.tumblr  a  {
       background-­‐position:  0  -­‐64px;  }
    ul#social  li.mail  a  {
       background-­‐position:  0  -­‐81px;  }
    ul#social  li.twitter  a  {
       background-­‐position:  0  -­‐98px;  }
    @shayhowe

    View full-size slide

  28. An Intro to HTML & CSS
    VALUES
    ul#social  {
       list-­‐style:  none;  }
    ul#social  li  {
       float:  left;
       margin:  12px  0  0  0;
       padding:  0  3px;  }
    ul#social  li  a  {
       background:  url("icons.png")  0  0  no-­‐repeat;
       display:  block;
       height:  17px;
       text-­‐indent:  -­‐9999px;
       width:  16px;  }
    ul#social  li.tumblr  a  {
       background-­‐position:  0  -­‐64px;  }
    ul#social  li.mail  a  {
       background-­‐position:  0  -­‐81px;  }
    ul#social  li.twitter  a  {
       background-­‐position:  0  -­‐98px;  }
    @shayhowe

    View full-size slide

  29. An Intro to HTML & CSS
    THE BOX MODEL
    @shayhowe

    View full-size slide

  30. An Intro to HTML & CSS
    THE BOX MODEL
    div  {
       border:  4px  solid  #000;
       height:  300px;
       margin:  20px;
       padding:  20px;
       width:  300px;
    }
    Breakdown
    Total Width = Width + (Margin x 2) + (Border x 2) + (Padding x 2)
    388  Pixels  =  300  +  (20  x  2)  +  (4  x  2)  +  (20  x  2)
    Total Height = Height + (Margin x 2) + (Border x 2) + (Padding x 2)
    388  Pixels  =  300  +  (20  x  2)  +  (4  x  2)  +  (20  x  2)
    @shayhowe

    View full-size slide

  31. An Intro to HTML & CSS
    FLOATS
    img  {
       border:  1px  solid  #ccc;
       float:  right
       margin:  10px  0  10px  20px;
       padding:  4px;
    }
    Ut  wisi  enin  ad  minim...

    Lorem  ipsum  dolor  sit  amet...
    Mimimum  veniami  ex  ea  con...
    @shayhowe

    View full-size slide

  32. An Intro to HTML & CSS
    FLOATS
    @shayhowe

    View full-size slide

  33. An Intro to HTML & CSS
    FLOATS & CLEARS
    .col  {
       float:  left;
       margin:  0  10px;
       width:  400px;
    }
    .clear  {
       clear:  both;
    }
    Lorem  ipsum  dolor  sit  amet...
    Con  minimim  venami  quis...

    Quis  nostrud  ad  nostris  pro  amat...
    @shayhowe

    View full-size slide

  34. An Intro to HTML & CSS
    FLOATS & CLEARS
    @shayhowe

    View full-size slide

  35. An Intro to HTML & CSS
    QUESTIONS?
    Thank you!
    @shayhowe

    View full-size slide