ASOS Prince's Trust Get Into Technology - CSS

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?