CSS - Style your site
-
Upload
ramses-cabello -
Category
Design
-
view
589 -
download
1
description
Transcript of CSS - Style your site
CSSStyling your site
[email protected] @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