css - style your site

34
CSS Styling your site [email protected] @ramsescabello

Upload: ramses-cabello

Post on 05-Dec-2014

589 views

Category:

Design


1 download

DESCRIPTION

Brief keynote explaining CSS use and syntax.

TRANSCRIPT

Page 1: CSS - Style your site

CSSStyling your site

[email protected] @ramsescabello

Page 2: CSS - Style your site

CSS helps HTML lookinga lot more beautiful.

Page 3: CSS - Style your site

each element in the HTMLbody has a reference.

CSS uses that referenceto give attributes to it.

Page 4: CSS - Style your site

give everything a name.and THINK carefullyabout it.

Page 5: CSS - Style your site

there’s 3 main kind ofreferences.

elements (body, ...)

Page 6: CSS - Style your site

there’s 3 main kind ofreferences.

elements (body, ...)classes (p, div, ul ...)

Page 7: CSS - Style your site

there’s 3 main kind ofreferences.

elements bodyvclasses .nameidentity #name

Page 8: CSS - Style your site

let’s see an example.

Page 9: CSS - Style your site

class=”black”

.black .black .black

Page 10: CSS - Style your site

class=”black”id=”roundcorners”

.black .black#roundcorners

.black

Page 11: CSS - Style your site

let’s see an example.

Page 12: CSS - Style your site

we have a box called:example

Page 13: CSS - Style your site

example is 650px wide

Page 14: CSS - Style your site

example is 325px tall

Page 15: CSS - Style your site

example is black

Page 16: CSS - Style your site

example is at the bottom

Page 17: CSS - Style your site

example has no border

Page 18: CSS - Style your site

example has roundedcorners of 50px

Page 19: CSS - Style your site

example is not visible.

Page 20: CSS - Style your site

CSS gives visual attributes.

backgroundcolorborderpositionfont-faceshadowgradientwidthheight

Page 21: CSS - Style your site

CSS gives visual attributes.

CSS declares behaviours.

Page 22: CSS - Style your site

CSS gives visual attributes.

CSS declares behaviours.

Page 23: CSS - Style your site

CSS gives visual attributes.

CSS declares behaviours.

Page 24: CSS - Style your site

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.

Page 25: CSS - Style your site

css syntax

reference { attribute: value;}

Page 26: CSS - Style your site

css syntax

body { background-color: #000000;}

Page 27: CSS - Style your site

css syntax

.cita { background-color: #FFFFFF; color: #000000; border-left: 3px solid #555555;}

<p class=”cita”> “Keep it simple” - Anonymous</p>

Page 28: CSS - Style your site

css syntax

“Keep it simple” - Anonymous

Page 29: CSS - Style your site

css syntax

#nueva { background-color: #29ABE2; border-left: #2E3192;}

<p class=”cita” id=”nueva”> “Keep it simple” - Anonymous</p>

Page 30: CSS - Style your site

“Keep it simple” - Anonymous

css syntax

Page 31: CSS - Style your site

online resources

http://css3generator.com/

Page 32: CSS - Style your site

online resources

http://www.w3schools.com/css/

Page 33: CSS - Style your site

online resources

http://realworldcss3.com/resources/

Page 34: CSS - Style your site

#ProdGrafULPGC