CSS Box Model and Dimensions
1 like1,086 views
Here are the steps to change styles on hover and click for the navigation links: 1. Add a hover state: ul#navi li a:hover { background-color: gray; border-color: blue; } 2. Add an active/clicked state: ul#navi li a:active { background-color: darkgray; border-color: darkblue; } This will change the background and border colors when hovering over and clicking the links.
CSS Box Model and Dimensions
- 1. CSS BOXES & DIMENSIONS Advanced CSS techniques
- 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
- 6. PADDING padding:5px; padding-top:10%; padding-bottom:2em; padding-left:30px; padding-right:2.5em;
- 7. 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)
- 8. DIMENSIONS • The size of the box can be changed using these properties: • width:80% • height:300px
- 9. Add all the values to get the actual dimensions of the box
- 10. SPEED TEST 01 <div id="cool"> <p>this box is cool</p> </div> <div id="hot"> <p>this box is hot</p> </div>
- 11. speed test 01
- 12. speed test 01 #cool { background-color:blue; width:500px; height:200px; } #hot { background-color:red; width:200px; height:200px; }
- 13. speed test 02
- 14. speed test 02 #cool { background-color:blue; width:500px; height:200px; padding:10px; } #cool p { border:5px solid white; padding:10px; }
- 15. SPEED TEST 03
- 16. speed test 03 #hot { background-color:red; width:200px; height:200px; border-width:10px; border-style:dotted dashed; margin-left:520px; margin-top:-220px; }
- 17. speed test 04
- 18. speed test 04 #hot p { width:100px; border:3px solid yellow; margin-left:auto; margin-right:auto; font-size:30px; padding:5px; }
- 19. types of boxes • HTML boxes can be categorized into two types: 1. Block 2. Inline • They can be controlled by the CSS property display
- 20. 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
- 21. inline box • Only as wide as its content • Flows with text lines • Dimensions aren’t easily controllable <a> <span> <strong> <em> <img>
- 22. inline vs block
- 23. 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>
- 24. Speed Test 05
- 25. speed test 05 ul#navi { font-family:Rockwell; list-style:none; margin:0; padding:0; } ul#navi li a{ text-decoration:none; }
- 26. Speed Test 06
- 27. speed test 06 ul#navi li a{ text-decoration:none; border-left:5px solid red; border-right:5px solid red; padding:5px; } ul#navi li a:link, ul#navi li a:visited { color:black; }
- 28. Speed Test 07
- 29. speed test 07 ul#navi { width:100px; } ul#navi li a{ display:block; margin-top:5px; text-align:center; }
- 30. Speed Test 08 • Change the background color and the borders when you hover • Change the background color and the borders when you click