Pro Yearly is on sale from $80 to $50! »

ASOS Prince's Trust Get Into Technology - CSS

4c967f43fa170c77f3a7ae60dafa0ec8?s=47 Si Jobling
February 23, 2016

ASOS Prince's Trust Get Into Technology - CSS

4c967f43fa170c77f3a7ae60dafa0ec8?s=128

Si Jobling

February 23, 2016
Tweet

Transcript

  1. Prince’s Trust Get Into Tech Basic Coding with Si Jobling

    Tuesday 23 February 2016 CSS Adding some style
  2. • What is CSS? • Curly braces and colons •

    Elements, classes and IDs • Colo(u)rs • Fonts • Decorative stuff (borders, backgrounds) • Layout and sizes
  3. Basic Coding with Si Jobling Cascading Style Sheets

  4. Basic Coding with Si Jobling selector { property: value; }

  5. Basic Coding with Si Jobling body { background: black; }

  6. Basic Coding with Si Jobling .class-name { background: black; }

  7. Basic Coding with Si Jobling #unique-identifier { background: black; }

  8. Basic Coding with Si Jobling #one .product img { background:

    black; }
  9. Basic Coding with Si Jobling #one .product img { background:

    black; color: white; }
  10. Basic Coding with Si Jobling Colours

  11. Basic Coding with Si Jobling a { color: white; }

    US spellings! 216 reserved words
  12. Basic Coding with Si Jobling a { color: #FFFFFF; }

    RED GREEN BLUE
  13. Basic Coding with Si Jobling a { color: #000000; }

    Black
  14. Basic Coding with Si Jobling Try it out

  15. Basic Coding with Si Jobling Typography

  16. Basic Coding with Si Jobling body { font-family: Arial, sans-serif;

    } Fallback
  17. Basic Coding with Si Jobling h1 { font-size: 25px; }

    Pixels
  18. Basic Coding with Si Jobling a { text-decoration: underline; }

    or none
  19. Basic Coding with Si Jobling .description { text-transform: uppercase; }

    capitals
  20. Basic Coding with Si Jobling Try it out

  21. Basic Coding with Si Jobling Borders & Backgrounds

  22. Basic Coding with Si Jobling img { border: 2px solid

    #000000; } colour width Style
  23. Basic Coding with Si Jobling .product img { border-color: grey;

    } just colour
  24. Basic Coding with Si Jobling .product img { border-top-width: 5px;

    } position & SIZE
  25. Basic Coding with Si Jobling button { background: black; }

    reserved colours
  26. Basic Coding with Si Jobling button { background: #000; }

    Short-hand hex code
  27. Basic Coding with Si Jobling button { background: url(my-image.gif) repeat

    top center; } path to any image any repeating position (US!)
  28. Basic Coding with Si Jobling Try it out

  29. Basic Coding with Si Jobling Layouts

  30. Basic Coding with Si Jobling p { text-align: center; }

    left, right or center
  31. Basic Coding with Si Jobling <div id=“my-box”>content</div> #my-box { width:

    300px; height: 300px; } 300px wide 300px high
  32. Basic Coding with Si Jobling .my-box { width: 300px; height:

    300px; margin: 100px; } 100px outside
  33. Basic Coding with Si Jobling .my-box { width: 300px; height:

    300px; margin: 100px; padding: 50px; } 50px inside
  34. Basic Coding with Si Jobling .my-box { width: 300px; height:

    300px; margin: 100px; padding: 50px; padding-top: 100px; } one side only
  35. Basic Coding with Si Jobling Try it out

  36. Basic Coding with Si Jobling What else?

  37. display: block / inline / inline-block; float: left / right

    / none; position: absolute / relative / fixed; top / left / bottom / right: 10px; list-style: none / bullet / square;
  38. Basic Coding with Si Jobling Your task

  39. • Set your page colours (fonts and background) • Apply

    borders to image thumbnails • Set font sizes of product details and prices • Apply colours and borders to form elements • Place thumbnails next to each other • Position product price top right of thumbnail
  40. Basic Coding with Si Jobling Questions?