CSS - Style your site

947 views
884 views

Published on

Brief keynote explaining CSS use and syntax.

Published in: Design, Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
947
On SlideShare
0
From Embeds
0
Number of Embeds
333
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CSS - Style your site

  1. 1. CSS Styling your site ramses.cabello@gmail.com @ramsescabello
  2. 2. CSS helps HTML looking a lot more beautiful.
  3. 3. each element in the HTML body has a reference. CSS uses that reference to give attributes to it.
  4. 4. give everything a name. and THINK carefully about it.
  5. 5. there’s 3 main kind of references. elements (body, ...)
  6. 6. there’s 3 main kind of references. elements (body, ...) classes (p, div, ul ...)
  7. 7. there’s 3 main kind of references. elements bodyv classes .name identity #name
  8. 8. let’s see an example.
  9. 9. class=”black” .black .black .black
  10. 10. class=”black” id=”roundcorners” .black .black #roundcorners .black
  11. 11. let’s see an example.
  12. 12. we have a box called: example
  13. 13. example is 650px wide
  14. 14. example is 325px tall
  15. 15. example is black
  16. 16. example is at the bottom
  17. 17. example has no border
  18. 18. example has rounded corners of 50px
  19. 19. example is not visible.
  20. 20. CSS gives visual attributes. background color border position font-face shadow gradient width
  21. 21. CSS gives visual attributes. CSS declares behaviours.
  22. 22. CSS gives visual attributes. CSS declares behaviours.
  23. 23. CSS gives visual attributes. CSS declares behaviours.
  24. 24. summing up CSS gives style. CSS calls elements from the body you decide the name of the elements element > classes > id Feel free to play with the CSS.
  25. 25. css syntax reference { attribute: value; }
  26. 26. css syntax body { background-color: #000000; }
  27. 27. css syntax .cita { background-color: #FFFFFF; color: #000000; border-left: 3px solid #555555; } <p class=”cita”> “Keep it simple” - Anonymous </p>
  28. 28. css syntax “Keep it simple” - Anonymous
  29. 29. css syntax #nueva { background-color: #29ABE2; border-left: #2E3192; } <p class=”cita” id=”nueva”> “Keep it simple” - Anonymous </p>
  30. 30. “Keep it simple” - Anonymous css syntax
  31. 31. online resources http://css3generator.com/
  32. 32. online resources http://www.w3schools.com/css/
  33. 33. online resources http://realworldcss3.com/resources/
  34. 34. #ProdGrafULPGC

×