CSS - Style your site
-
Upload
ramses-cabello -
Category
Design
-
view
589 -
download
1
description
Transcript of CSS - Style your site
![Page 2: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/2.jpg)
CSS helps HTML lookinga lot more beautiful.
![Page 3: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/3.jpg)
each element in the HTMLbody has a reference.
CSS uses that referenceto give attributes to it.
![Page 4: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/4.jpg)
give everything a name.and THINK carefullyabout it.
![Page 5: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/5.jpg)
there’s 3 main kind ofreferences.
elements (body, ...)
![Page 6: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/6.jpg)
there’s 3 main kind ofreferences.
elements (body, ...)classes (p, div, ul ...)
![Page 7: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/7.jpg)
there’s 3 main kind ofreferences.
elements bodyvclasses .nameidentity #name
![Page 8: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/8.jpg)
let’s see an example.
![Page 9: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/9.jpg)
class=”black”
.black .black .black
![Page 10: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/10.jpg)
class=”black”id=”roundcorners”
.black .black#roundcorners
.black
![Page 11: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/11.jpg)
let’s see an example.
![Page 12: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/12.jpg)
we have a box called:example
![Page 13: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/13.jpg)
example is 650px wide
![Page 14: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/14.jpg)
example is 325px tall
![Page 15: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/15.jpg)
example is black
![Page 16: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/16.jpg)
example is at the bottom
![Page 17: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/17.jpg)
example has no border
![Page 18: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/18.jpg)
example has roundedcorners of 50px
![Page 19: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/19.jpg)
example is not visible.
![Page 20: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/20.jpg)
CSS gives visual attributes.
backgroundcolorborderpositionfont-faceshadowgradientwidthheight
![Page 21: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/21.jpg)
CSS gives visual attributes.
CSS declares behaviours.
![Page 22: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/22.jpg)
CSS gives visual attributes.
CSS declares behaviours.
![Page 23: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/23.jpg)
CSS gives visual attributes.
CSS declares behaviours.
![Page 24: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/24.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/25.jpg)
css syntax
reference { attribute: value;}
![Page 26: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/26.jpg)
css syntax
body { background-color: #000000;}
![Page 27: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/27.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/28.jpg)
css syntax
“Keep it simple” - Anonymous
![Page 29: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/29.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/30.jpg)
“Keep it simple” - Anonymous
css syntax
![Page 31: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/31.jpg)
online resources
http://css3generator.com/
![Page 32: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/32.jpg)
online resources
http://www.w3schools.com/css/
![Page 33: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/33.jpg)
online resources
http://realworldcss3.com/resources/
![Page 34: CSS - Style your site](https://reader034.fdocuments.us/reader034/viewer/2022051514/54816ec75906b5096d8b465c/html5/thumbnails/34.jpg)
#ProdGrafULPGC