Your SlideShare is downloading. ×
card flip
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
628
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. More CSS! Dave KanterAcademy of Art University Inside Programming May 1, 2012
    • 2. Length UnitsCan be absolute or relative. Relative: em: relative to base font ex: relative to the height of “x” px: relative to resolution of device
    • 3. Absolute UnitsAbsolute Units: in: inches cm: centimeters mm: millimeters pt: points pc: picas
    • 4. Absolute Size Keywords xx-small x-small small medium large x-large xx-large
    • 5. Relative Size Keywords smaller larger
    • 6. Sizing Set the base font:body { font-size: small;} Then scale:h1 { font-size : 150%; }
    • 7. Sizing For instance:body { font-size: small; }h1 { font-size: 150%; }h2 { font-size: 130%; }h3 { font-size: 120%; }ul li { font-size: 90%; }.note { font-size: 85%; }
    • 8. Try it!Create a page using the stylesheet shown onthe last page.Create each type of text described in thestylesheet.Try changing things around and see whathappens!What happens when you nest percentages?
    • 9. Float and ClearsYou can only float block level elements div, ol, ul, p, img, etc...Inline elements don’t float <i>, <strong>, <span>, <br />, etc...Float determines how item is positionedrelative to container it’s in.Can float left or right. Other items willaccommodate themselves to the float.
    • 10. Floats and ClearsFloats float: left; float: right;Clears clear floats: clear: left; clear: right; clear: both;
    • 11. Classes and ID’sClass:.myclass { something }ID:#myid {something}
    • 12. Other Effects Let’s round some corners! .boxbg { background-color:#ccc; } .all-round { border-radius:1em; -moz-border-radius:1em; -webkit-border-radius:1em; }<div class=”boxbg all-round”>
    • 13. Fun With Hover.block{ border:5px solid #ccc; padding:10px; -webkit-border-radius:5px;}#fade{ opacity: 1; -webkit-transition: opacity 1s linear;}#fade:hover{opacity: 0;}

    ×