Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS - Style your site

1,206 views

Published on

Brief keynote explaining CSS use and syntax.

Published in: Design, Technology, Education
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×