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?