CSS BOXES &DIMENSIONSAdvanced CSS techniques
the box model• All HTML elements are rendered as  boxes• Stylesheets can control how to display  these boxes (color, place...
BORDERSborder-width:3px;border-style:dashed;border-color:green;border-left-width:thick;border-bottom-style:solid;border-ri...
MARGINSmargin:5px;margin-top:30%;margin-bottom:-50px;margin-left:auto;margin-right:auto;
PADDINGpadding:5px;padding-top:10%;padding-bottom:2em;padding-left:30px;padding-right:2.5em;
box model shortcuts•   padding:5px; all sides 5px•   margin:5px 2px;    top & bottom=5px, left & right 2px•   border:1px 2...
DIMENSIONS• The size of the box can be changed  using these properties: •   width:80% •   height:300px
Add all thevalues to getthe actualdimensions ofthe box
Question 01width:300px;height:100px;border:10px	  2px	  3px;
Question 01 WIDTH     HEIGHT304	  px 113	  px
Question 02width:900px;height:35px;border:0px	  1px	  1px	  10px;padding:20px
Question 02 WIDTH      HEIGHT951	  px   76	  px
Question 03width:20em;height:8em;padding:2em;default	  font	  size=16px
Question 03  WIDTH     HEIGHT(24	  em) (12	  em) 384	  px 192	  px
Question 04width:960px;height:180px;padding:5px;margin-­‐right:20px;padding-­‐left:20px;
Question 04  WIDTH     HEIGHT1010	  px 190	  px
Question 05width:15.5em;height:2em;border:0.5em	  1.2em	  blue;default	  font	  size=10px
Question 05 WIDTH         HEIGHT(17.9em)	     (3	  em)	   179	  px      30	  px
Question 06width:440px;height:270px;margin:10px;padding:12px;border:3px	  4px	  0px	  1px;
Question 06 WIDTH     HEIGHT489	  px 317	  px
SPEED TEST 01	   <div id="cool">	   <p>this box is cool</p>	   </div>	   <div id="hot">	   <p>this box is hot</p>	   </div>
speed test 01
speed test 01	   	   #cool {	   	   background-color:blue;	   	   width:500px;	   	   height:200px;	   	   }	   	   #hot {...
speed test 02
speed test 02	   	   #cool {	   	   background-color:blue;	   	   width:500px;	   	   height:200px;	   	   padding:10px;	 ...
SPEED TEST 03
speed test 03	   	   #hot {	   	   background-color:red;	   	   width:200px;	   	   height:200px;	   	   border-width:10px...
speed test 04
speed test 04	   	   #hot p {	   	   width:100px;	   	   border:3px solid yellow;	   	   margin-left:auto;	   	   margin-r...
types of boxes• HTML boxes can be categorized into  two types: 1. Block 2. Inline• They can be controlled by the CSS  prop...
BLOCK BOX• Occupies the whole  width of the  container element• Has whitespace  before and after it• Dimensions are       ...
inline box• Only as wide as  its content• Flows with text  lines• Dimensions  aren’t easily  controllable           <a> <s...
inline vs block
speed test 05<ul><li><a href="#">Sisig</a></li>	<li><a href="#">Sinigang</a></li>	<li><a href="#">Tapsilog</a></li>	<li><a...
Speed Test 05
Speed Test 05
speed test 05	   	   ul#navi {	   	   list-style:none;	   	   margin:0;	   	   padding:0;	   	   }
Speed Test 05
speed test 05	   	   ul#navi li a{	   	   font-family:Impact;	   	   text-decoration:none;	   	   }
Speed Test 06
speed test 06        ul#navi li a{	   	   text-decoration:none;	   	   border-left:5px solid orange;	   	   border-right:5...
Speed Test 07
speed test 07    ul#navi li a:link,    ul#navi li a:visited {	 	 color:black;    }
Speed Test 08
speed test 08	   	   ul#navi {	   	   width:100px;	   	   }	   	   ul#navi li a{	   	   display:block;	   	   }
Speed Test 09
speed test 09	 	 ul#navi li a{	 	 margin-top:5px;    text-align:center;	 	 }
Speed Test 10
speed test 10	   	    ul#navi li a {	   	    text-transform:uppercase;	   	    }	   	    ul#navi li a:hover{	   	    color...
CSS Box Model
CSS Box Model
CSS Box Model
Upcoming SlideShare
Loading in...5
×

CSS Box Model

1,857

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,857
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
61
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

CSS Box Model

  1. 1. CSS BOXES &DIMENSIONSAdvanced CSS techniques
  2. 2. the box model• All HTML elements are rendered as boxes• Stylesheets can control how to display these boxes (color, placement, etc)• There arepaddingproperties of boxes: border, 3 basic and margin
  3. 3. BORDERSborder-width:3px;border-style:dashed;border-color:green;border-left-width:thick;border-bottom-style:solid;border-right-color:blue;
  4. 4. MARGINSmargin:5px;margin-top:30%;margin-bottom:-50px;margin-left:auto;margin-right:auto;
  5. 5. PADDINGpadding:5px;padding-top:10%;padding-bottom:2em;padding-left:30px;padding-right:2.5em;
  6. 6. box model shortcuts• padding:5px; all sides 5px• margin:5px 2px; top & bottom=5px, left & right 2px• border:1px 2px 3px; top=1px, left & right=2px, bottom=3px• padding:7px 3px 1px 6px; (clockwise from top)
  7. 7. DIMENSIONS• The size of the box can be changed using these properties: • width:80% • height:300px
  8. 8. Add all thevalues to getthe actualdimensions ofthe box
  9. 9. Question 01width:300px;height:100px;border:10px  2px  3px;
  10. 10. Question 01 WIDTH HEIGHT304  px 113  px
  11. 11. Question 02width:900px;height:35px;border:0px  1px  1px  10px;padding:20px
  12. 12. Question 02 WIDTH HEIGHT951  px 76  px
  13. 13. Question 03width:20em;height:8em;padding:2em;default  font  size=16px
  14. 14. Question 03 WIDTH HEIGHT(24  em) (12  em) 384  px 192  px
  15. 15. Question 04width:960px;height:180px;padding:5px;margin-­‐right:20px;padding-­‐left:20px;
  16. 16. Question 04 WIDTH HEIGHT1010  px 190  px
  17. 17. Question 05width:15.5em;height:2em;border:0.5em  1.2em  blue;default  font  size=10px
  18. 18. Question 05 WIDTH HEIGHT(17.9em)   (3  em)   179  px 30  px
  19. 19. Question 06width:440px;height:270px;margin:10px;padding:12px;border:3px  4px  0px  1px;
  20. 20. Question 06 WIDTH HEIGHT489  px 317  px
  21. 21. SPEED TEST 01 <div id="cool"> <p>this box is cool</p> </div> <div id="hot"> <p>this box is hot</p> </div>
  22. 22. speed test 01
  23. 23. speed test 01 #cool { background-color:blue; width:500px; height:200px; } #hot { background-color:red; width:200px; height:200px; }
  24. 24. speed test 02
  25. 25. speed test 02 #cool { background-color:blue; width:500px; height:200px; padding:10px; } #cool p { border:5px solid white; padding:10px; }
  26. 26. SPEED TEST 03
  27. 27. speed test 03 #hot { background-color:red; width:200px; height:200px; border-width:10px; border-style:dotted dashed; margin-left:520px; margin-top:-220px; }
  28. 28. speed test 04
  29. 29. speed test 04 #hot p { width:100px; border:3px solid yellow; margin-left:auto; margin-right:auto; font-size:30px; padding:5px; }
  30. 30. types of boxes• HTML boxes can be categorized into two types: 1. Block 2. Inline• They can be controlled by the CSS property display
  31. 31. BLOCK BOX• Occupies the whole width of the container element• Has whitespace before and after it• Dimensions are <p> <h1> to <h6> <div> <ul> <ol> <li> controllable
  32. 32. inline box• Only as wide as its content• Flows with text lines• Dimensions aren’t easily controllable <a> <span> <strong> <em> <img>
  33. 33. inline vs block
  34. 34. speed test 05<ul><li><a href="#">Sisig</a></li> <li><a href="#">Sinigang</a></li> <li><a href="#">Tapsilog</a></li> <li><a href="#">Kaldereta</a></li> <li><a href="#">Adobo</a></li> <li><a href="#">Bistek</a></li> <li><a href="#">Mechado</a></li> <li><a href="#">Laing</a></li></ul><a href="#">Back to Home</a>
  35. 35. Speed Test 05
  36. 36. Speed Test 05
  37. 37. speed test 05 ul#navi { list-style:none; margin:0; padding:0; }
  38. 38. Speed Test 05
  39. 39. speed test 05 ul#navi li a{ font-family:Impact; text-decoration:none; }
  40. 40. Speed Test 06
  41. 41. speed test 06 ul#navi li a{ text-decoration:none; border-left:5px solid orange; border-right:5px solid orange; padding:5px; }
  42. 42. Speed Test 07
  43. 43. speed test 07 ul#navi li a:link, ul#navi li a:visited { color:black; }
  44. 44. Speed Test 08
  45. 45. speed test 08 ul#navi { width:100px; } ul#navi li a{ display:block; }
  46. 46. Speed Test 09
  47. 47. speed test 09 ul#navi li a{ margin-top:5px; text-align:center; }
  48. 48. Speed Test 10
  49. 49. speed test 10 ul#navi li a { text-transform:uppercase; } ul#navi li a:hover{ color:white; background:red; }
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×