CSS is used to style and beautify HTML elements. CSS references HTML elements by their name, id, or class and allows assigning visual attributes like colors, backgrounds, borders, positioning and more. There are three main types of CSS references: elements, classes, and ids. CSS declarations specify visual attributes and behaviors for referenced HTML elements.

1. CSS
Styling your site
ramses.cabello@gmail.com @ramsescabello

2. CSS helps HTML looking
a lot more beautiful.

3. each element in the HTML
body has a reference.
CSS uses that reference
to give attributes to it.

4. give everything a name.
and THINK carefully
about it.

5. there’s 3 main kind of
references.
elements (body, ...)

6. there’s 3 main kind of
references.
elements (body, ...)
classes (p, div, ul ...)

7. there’s 3 main kind of
references.
elements bodyv
classes .name
identity #name

8. let’s see an example.

9. class=”black”
.black .black .black

10. class=”black”
id=”roundcorners”
.black .black
#roundcorners
.black

11. let’s see an example.

12. we have a box called:
example

13. example is 650px wide

14. example is 325px tall

15. example is black

16. example is at the bottom

17. example has no border

18. example has rounded
corners of 50px

19. example is not visible.

20. CSS gives visual attributes.
background
color
border
position
font-face
shadow
gradient
width

21. CSS gives visual attributes.
CSS declares behaviours.

22. CSS gives visual attributes.
CSS declares behaviours.

23. CSS gives visual attributes.
CSS declares behaviours.

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. css syntax
reference {
attribute: value;
}

26. css syntax
body {
background-color: #000000;
}

27. css syntax
.cita {
background-color: #FFFFFF;
color: #000000;
border-left: 3px solid #555555;
}
<p class=”cita”>
“Keep it simple” - Anonymous
</p>

28. css syntax
“Keep it simple” - Anonymous

29. css syntax
#nueva {
background-color: #29ABE2;
border-left: #2E3192;
}
<p class=”cita” id=”nueva”>
“Keep it simple” - Anonymous
</p>

30. “Keep it simple” - Anonymous
css syntax

31. online resources
http://css3generator.com/

32. online resources
http://www.w3schools.com/css/

33. online resources
http://realworldcss3.com/resources/

34. #ProdGrafULPGC