css - style your site

CSSStyling your site

ramses.cabello@gmail.com @ramsescabello

CSS helps HTML lookinga lot more beautiful.

each element in the HTMLbody has a reference.

CSS uses that referenceto give attributes to it.

give everything a name.and THINK carefullyabout it.

there’s 3 main kind ofreferences.

elements (body, ...)

there’s 3 main kind ofreferences.

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

there’s 3 main kind ofreferences.

elements bodyvclasses .nameidentity #name

let’s see an example.

class=”black”

.black .black .black

class=”black”id=”roundcorners”

.black .black#roundcorners

.black

let’s see an example.

we have a box called:example

example is 650px wide

example is 325px tall

example is black

example is at the bottom

example has no border

example has roundedcorners of 50px

example is not visible.

CSS gives visual attributes.

backgroundcolorborderpositionfont-faceshadowgradientwidthheight

CSS gives visual attributes.

CSS declares behaviours.

CSS gives visual attributes.

CSS declares behaviours.

CSS gives visual attributes.

CSS declares behaviours.

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.

css syntax

reference { attribute: value;}

css syntax

body { background-color: #000000;}

css syntax

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

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

css syntax

“Keep it simple” - Anonymous

css syntax

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

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

“Keep it simple” - Anonymous

css syntax

online resources

http://css3generator.com/

online resources

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

online resources

http://realworldcss3.com/resources/

#ProdGrafULPGC