css page design
TRANSCRIPT
![Page 1: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/1.jpg)
PAGE DESIGN CSS
Tuesday, April 16, 13
![Page 2: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/2.jpg)
The Web is made of
boxes
Tuesday, April 16, 13
![Page 3: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/3.jpg)
Boxes inside of boxesTuesday, April 16, 13
![Page 4: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/4.jpg)
Boxes inside of boxesTuesday, April 16, 13
![Page 5: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/5.jpg)
Boxes inside of boxesTuesday, April 16, 13
![Page 6: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/6.jpg)
Boxes inside of boxesTuesday, April 16, 13
![Page 7: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/7.jpg)
What do we already know about boxes?
Tuesday, April 16, 13
![Page 8: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/8.jpg)
(Block-level elements are boxes)
Tuesday, April 16, 13
![Page 9: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/9.jpg)
Headers (h1 - h6)
Tuesday, April 16, 13
![Page 10: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/10.jpg)
Paragraphs
Tuesday, April 16, 13
![Page 11: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/11.jpg)
List items
Tuesday, April 16, 13
![Page 12: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/12.jpg)
Any observations about boxes?
Tuesday, April 16, 13
![Page 13: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/13.jpg)
Boxes take up spaceBy default they
• inherit their width• inherit their height• inherit their padding• inherit their margin• have no borders, but can
Tuesday, April 16, 13
![Page 14: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/14.jpg)
Boxes take up spaceBy default they
• inherit their width• inherit their height• inherit their padding• inherit their margin• have no borders, but can
Tuesday, April 16, 13
![Page 15: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/15.jpg)
Boxes take up spaceBy default they
• inherit their width• inherit their height• inherit their padding• inherit their margin• have no borders, but can
Tuesday, April 16, 13
![Page 16: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/16.jpg)
Boxes take up spaceBy default they
• inherit their width• inherit their height• inherit their padding• inherit their margin• have no borders, but can
Tuesday, April 16, 13
![Page 17: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/17.jpg)
Boxes take up spaceBy default they
• inherit their width• inherit their height• inherit their padding• inherit their margin• have no borders, but can
Tuesday, April 16, 13
![Page 18: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/18.jpg)
Terminology
(and some math!)
boxes.htmlTuesday, April 16, 13
![Page 19: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/19.jpg)
300px
p{ width: 300px;
}
WidthTuesday, April 16, 13
![Page 20: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/20.jpg)
5px
p{ width: 300px; border: 5px solid #000000;
}
Border
300px
5px
310px
Tuesday, April 16, 13
![Page 21: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/21.jpg)
300px
25 25
360px
Padding
p{ width: 300px;
border: 5px solid #000000; padding: 25px;
}
5px5px
Tuesday, April 16, 13
![Page 22: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/22.jpg)
25 25
padding: 25px;
padding-top: 25px;padding-right: 25px;padding-bottom: 25px;padding-left: 25px;
padding: 25px 25px 25px 25px;
Tuesday, April 16, 13
![Page 23: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/23.jpg)
2525
360px
Margin
p{ width: 300px;
border: 5px solid #000000; margin: 25px;
}
300px5px5px
25
Tuesday, April 16, 13
![Page 24: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/24.jpg)
2525
360px
margin: 25px;
25 25
360px
padding: 25px;
Margin PaddingTuesday, April 16, 13
![Page 25: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/25.jpg)
300px
25
360px
25
25
410px
p{ width: 300px;
border: 5px solid #000000; margin: 25px;
padding: 25px;}
5px5px
Margin + PaddingTuesday, April 16, 13
![Page 26: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/26.jpg)
300px
2525
360px
margin: 25px;
300px
25 25
360px
padding: 25px;
300px
2
360px
22
410px
padding: 25px;margin: 25px;
Compare padding & marginTuesday, April 16, 13
![Page 27: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/27.jpg)
This is my 300px paragraph. It has20x of padding, 50px of margin anda 10px border.
Margin + Border + Padding + (content) Width
50 + 10 + 20 + 300 + 20 + 10 + 50=
460px
mar
gin
mar
gin
bord
er
bord
er
padd
ing
padd
ingcontent
Tuesday, April 16, 13
![Page 28: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/28.jpg)
boxes1-1.htmlTuesday, April 16, 13
![Page 29: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/29.jpg)
Tuesday, April 16, 13
![Page 30: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/30.jpg)
400px
Tuesday, April 16, 13
![Page 31: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/31.jpg)
h1, h2, p, blockquote{width: 400px;background-color: #cccccc;
}
Tuesday, April 16, 13
![Page 32: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/32.jpg)
Tuesday, April 16, 13
![Page 33: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/33.jpg)
h2{ margin-top: 0; margin-bottom: 5px; margin-left: 0; margin-right: 0; padding: 0;} .date, .byline{ margin: 0; padding: 0;}
Tuesday, April 16, 13
![Page 34: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/34.jpg)
10px
10px5px
5px
Tuesday, April 16, 13
![Page 35: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/35.jpg)
blockquote{ margin-left: 10px; padding-left: 5px; border-left: 5px solid #000000; padding-top: 10px; padding-bottom: 10px; }
Tuesday, April 16, 13
![Page 36: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/36.jpg)
Tuesday, April 16, 13
![Page 37: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/37.jpg)
400px
400px10 5
5
Tuesday, April 16, 13
![Page 38: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/38.jpg)
blockquote{ margin-left: 10px; padding-left: 5px; border-left: 5px solid #000000; padding-top: 10px; padding-bottom: 10px; width: 380px;}
Tuesday, April 16, 13
![Page 39: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/39.jpg)
blockquote{ margin-left: 10px; padding-left: 5px; border-left: 5px solid #000000; padding-top: 10px; padding-bottom: 10px; width: 380px;}
blockquote:first-letter{ font-size: 1.9em;}
Tuesday, April 16, 13
![Page 40: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/40.jpg)
boxes2-1.htmlTuesday, April 16, 13
![Page 41: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/41.jpg)
Tuesday, April 16, 13
![Page 42: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/42.jpg)
header
content
footer
Tuesday, April 16, 13
![Page 43: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/43.jpg)
header
article
footer
#nav
wrapper
Tuesday, April 16, 13
![Page 44: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/44.jpg)
<body><div id=”wrapper”><header><h1>North Gate</h1><div id=”nav”> UL ...</div>
</header>
<article> .... </article>
<footer>...</footer>
</div></body>
header
article
footer
#nav
wrapper
Tuesday, April 16, 13
![Page 45: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/45.jpg)
#wrapper{width: 700px;background-color: #ffffff;margin: 10px auto 30px auto;
}
Tuesday, April 16, 13
![Page 46: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/46.jpg)
Sometimes you want a box to not be a box
Tuesday, April 16, 13
![Page 47: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/47.jpg)
What if LI could be inline?
Tuesday, April 16, 13
![Page 48: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/48.jpg)
What if LI could be inline?
Tuesday, April 16, 13
![Page 49: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/49.jpg)
#nav ul, #nav li { margin: 0; padding: 0; list-style: none; } #nav ul { background-color: #000000; margin-top: 10px; margin-bottom: 10px; } #nav li { display: inline; color: #FFF; padding-left: 10px; line-height: 25px; }
Tuesday, April 16, 13
![Page 50: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/50.jpg)
Designing on a Grid
Tuesday, April 16, 13
![Page 51: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/51.jpg)
Building On A Grid
Tuesday, April 16, 13
![Page 52: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/52.jpg)
Tuesday, April 16, 13
![Page 53: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/53.jpg)
Tuesday, April 16, 13
![Page 54: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/54.jpg)
Tuesday, April 16, 13
![Page 55: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/55.jpg)
Margin + Border + Padding + (content) Width
Tuesday, April 16, 13
![Page 56: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/56.jpg)
Tuesday, April 16, 13
![Page 57: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/57.jpg)
Tuesday, April 16, 13
![Page 58: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/58.jpg)
<body><div id=”wrapper”>
<div id=”header”><h1>North Gate</h1><div id=”nav”> UL ...</div>
</div>
<div id=”content”> .... </div>
<div id=”sidebar”> .... </div>
<div id=”footer”>...</div></div>
</body>
Tuesday, April 16, 13
![Page 59: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/59.jpg)
<body><div id=”wrapper”>
<div id=”header”><h1>North Gate</h1><div id=”nav”> UL ...</div>
</div>
<div id=”content”> .... </div>
<div id=”sidebar”> .... </div>
<div id=”footer”>...</div></div>
</body>
Tuesday, April 16, 13
![Page 60: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/60.jpg)
<body><div id=”wrapper”>
<div id=”header”><h1>North Gate</h1><div id=”nav”> UL ...</div>
</div>
<div id=”content”> .... </div>
<div id=”sidebar”> .... </div>
<div id=”footer”>...</div>
</div></body>
Tuesday, April 16, 13
![Page 61: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/61.jpg)
<body><div id=”wrapper”>
<div id=”header”><h1>North Gate</h1><div id=”nav”> UL ...</div>
</div>
<div id=”content”> <div id=”article-inline”>
<h3>MacArthur</h3> </div>
<p>lorem</p></div>
<div id=”sidebar”> .... </div>
Tuesday, April 16, 13
![Page 62: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/62.jpg)
<body><div id=”wrapper”>
<div id=”header”><h1>North Gate</h1><div id=”nav”> UL ...</div>
</div>
<div id=”content”> .... </div>
<div id=”sidebar”> .... </div>
<div id=”footer”>...</div>
</div></body>
Tuesday, April 16, 13
![Page 63: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/63.jpg)
How wide?
Tuesday, April 16, 13
![Page 64: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/64.jpg)
How wide?
Tuesday, April 16, 13
![Page 65: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/65.jpg)
How wide?
Tuesday, April 16, 13
![Page 66: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/66.jpg)
How wide?
Tuesday, April 16, 13
![Page 67: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/67.jpg)
No ConsistencyTuesday, April 16, 13
![Page 68: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/68.jpg)
No ConsistencyTuesday, April 16, 13
![Page 69: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/69.jpg)
ConsistencyTuesday, April 16, 13
![Page 70: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/70.jpg)
How wide?
Tuesday, April 16, 13
![Page 71: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/71.jpg)
BTW, is that margin
on the #content?
on the #sidebar?
on both?
Tuesday, April 16, 13
![Page 72: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/72.jpg)
BTW, is that margin or padding
on the #content?
on the #sidebar?
on both?
Tuesday, April 16, 13
![Page 73: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/73.jpg)
I propose a tradeoff
Tuesday, April 16, 13
![Page 74: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/74.jpg)
Let me take away a little of your flexibilityand I’ll answer a lot of those questions.
Tuesday, April 16, 13
![Page 75: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/75.jpg)
GRIDTuesday, April 16, 13
![Page 76: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/76.jpg)
Tuesday, April 16, 13
![Page 77: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/77.jpg)
940px
620px
220px
20px
10px 10px
300px
Tuesday, April 16, 13
![Page 78: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/78.jpg)
Tuesday, April 16, 13
![Page 79: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/79.jpg)
Tuesday, April 16, 13
![Page 80: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/80.jpg)
Tuesday, April 16, 13
![Page 81: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/81.jpg)
Tuesday, April 16, 13
![Page 82: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/82.jpg)
Tuesday, April 16, 13
![Page 83: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/83.jpg)
Tuesday, April 16, 13
![Page 84: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/84.jpg)
Tuesday, April 16, 13
![Page 85: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/85.jpg)
Tuesday, April 16, 13
![Page 86: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/86.jpg)
Tuesday, April 16, 13
![Page 87: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/87.jpg)
Tuesday, April 16, 13
![Page 88: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/88.jpg)
Tuesday, April 16, 13
![Page 89: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/89.jpg)
Tuesday, April 16, 13
![Page 90: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/90.jpg)
How it works
Tuesday, April 16, 13
![Page 91: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/91.jpg)
940px
Tuesday, April 16, 13
![Page 92: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/92.jpg)
940? 960?
Tuesday, April 16, 13
![Page 93: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/93.jpg)
width=940pxmargin-left: 10px
margin-right: 10px
940 + 10 + 10 = 960
Tuesday, April 16, 13
![Page 94: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/94.jpg)
940px
10 10
Tuesday, April 16, 13
![Page 95: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/95.jpg)
20px60px
12 column layout
Tuesday, April 16, 13
![Page 96: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/96.jpg)
5 columns 7 columns
380px 540px
60 20 60 20 60 20 60 20 60 60 20 60 20 60 20 60 20 60 20 60 20 60
Tuesday, April 16, 13
![Page 97: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/97.jpg)
5 columns 7 columns
380px
540px
60 20 60 20 60 20 60 20 60
5 columns 2 col
380px
60 20 60 20 60 20 60 20 60 60 20 60
140px
Tuesday, April 16, 13
![Page 98: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/98.jpg)
5 columns
Your boxes must go to the lines, not the gutters
380px
Tuesday, April 16, 13
![Page 99: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/99.jpg)
Many Grids to Choose From
Tuesday, April 16, 13
![Page 100: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/100.jpg)
Tuesday, April 16, 13
![Page 101: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/101.jpg)
Tuesday, April 16, 13
![Page 102: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/102.jpg)
cascade is the “C” in
CSSTuesday, April 16, 13
![Page 103: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/103.jpg)
Tuesday, April 16, 13
![Page 104: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/104.jpg)
body {background-color: #ffffff;
}
Tuesday, April 16, 13
![Page 105: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/105.jpg)
unless told otherwise, a child element inherits applicable rules from its parents
Tuesday, April 16, 13
![Page 106: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/106.jpg)
body{ background-color: #ffffff;}
Tuesday, April 16, 13
![Page 107: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/107.jpg)
<body><p>Because this paragraph is inside the body tag (like all page elements) it inherits the text properties of the body. </p>
</body>
Tuesday, April 16, 13
![Page 108: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/108.jpg)
But what about the other element backgrounds that aren’t white?
Tuesday, April 16, 13
![Page 109: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/109.jpg)
#header{ background-color: #F3F5F9;}
#nav{ background-color: #CBD7E7;}
Tuesday, April 16, 13
![Page 110: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/110.jpg)
Now add a link and see what happens
Tuesday, April 16, 13
![Page 111: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/111.jpg)
body { color: #FF0000;font-size: 15px;
}
p{font-size: 10px;
}
a{color: #0000FF;
}
Tuesday, April 16, 13
![Page 112: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/112.jpg)
specificity
Tuesday, April 16, 13
![Page 113: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/113.jpg)
p { color: #FF0000; background-color: #000000;}
Unless a more specific rule applies to a paragraph, this “type” selector defines how all paragraphs in your document will look.
Tuesday, April 16, 13
![Page 114: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/114.jpg)
.alert { color: #00FF00; background-color: #0000FF;}
<p class=“alert”>This is a paragraph with the “alert” class rules applied to it. Where its rules conflict with a less specific “type” selector, the class selector takes precedence.
</p>
Tuesday, April 16, 13
![Page 115: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/115.jpg)
selectors2.html
Tuesday, April 16, 13
![Page 116: CSS Page Design](https://reader033.vdocuments.net/reader033/viewer/2022052823/5552a587b4c905d9508b4694/html5/thumbnails/116.jpg)
SELECTOR CONFLICTSCSS SELECTORS
CSS Selectors have weight
<div id=”storyblock”><p>What color am I?</p><p class=”alert’>What color am I?</p>
</div>
<p>What color am I?</p><p class=”alert”>What color am I?</p>
ID | Class | Type Position
High Value Low Value Tie Breaker
(p)(.byline)(#nav)
Tuesday, April 16, 13