Date post: | 13-May-2015 |
Category: |
Technology |
Upload: | zachwise |
View: | 654 times |
Download: | 1 times |
PAGE DESIGN CSS
Tuesday, April 16, 13
The Web is made of
boxes
Tuesday, April 16, 13
Boxes inside of boxesTuesday, April 16, 13
Boxes inside of boxesTuesday, April 16, 13
Boxes inside of boxesTuesday, April 16, 13
Boxes inside of boxesTuesday, April 16, 13
What do we already know about boxes?
Tuesday, April 16, 13
(Block-level elements are boxes)
Tuesday, April 16, 13
Headers (h1 - h6)
Tuesday, April 16, 13
Paragraphs
Tuesday, April 16, 13
List items
Tuesday, April 16, 13
Any observations about boxes?
Tuesday, April 16, 13
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
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
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
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
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
Terminology
(and some math!)
boxes.htmlTuesday, April 16, 13
300px
p{ width: 300px;
}
WidthTuesday, April 16, 13
5px
p{ width: 300px; border: 5px solid #000000;
}
Border
300px
5px
310px
Tuesday, April 16, 13
300px
25 25
360px
Padding
p{ width: 300px;
border: 5px solid #000000; padding: 25px;
}
5px5px
Tuesday, April 16, 13
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
2525
360px
Margin
p{ width: 300px;
border: 5px solid #000000; margin: 25px;
}
300px5px5px
25
Tuesday, April 16, 13
2525
360px
margin: 25px;
25 25
360px
padding: 25px;
Margin PaddingTuesday, April 16, 13
300px
25
360px
25
25
410px
p{ width: 300px;
border: 5px solid #000000; margin: 25px;
padding: 25px;}
5px5px
Margin + PaddingTuesday, April 16, 13
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
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
boxes1-1.htmlTuesday, April 16, 13
Tuesday, April 16, 13
400px
Tuesday, April 16, 13
h1, h2, p, blockquote{width: 400px;background-color: #cccccc;
}
Tuesday, April 16, 13
Tuesday, April 16, 13
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
10px
10px5px
5px
Tuesday, April 16, 13
blockquote{ margin-left: 10px; padding-left: 5px; border-left: 5px solid #000000; padding-top: 10px; padding-bottom: 10px; }
Tuesday, April 16, 13
Tuesday, April 16, 13
400px
400px10 5
5
Tuesday, April 16, 13
blockquote{ margin-left: 10px; padding-left: 5px; border-left: 5px solid #000000; padding-top: 10px; padding-bottom: 10px; width: 380px;}
Tuesday, April 16, 13
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
boxes2-1.htmlTuesday, April 16, 13
Tuesday, April 16, 13
header
content
footer
Tuesday, April 16, 13
header
article
footer
#nav
wrapper
Tuesday, April 16, 13
<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
#wrapper{width: 700px;background-color: #ffffff;margin: 10px auto 30px auto;
}
Tuesday, April 16, 13
Sometimes you want a box to not be a box
Tuesday, April 16, 13
What if LI could be inline?
Tuesday, April 16, 13
What if LI could be inline?
Tuesday, April 16, 13
#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
Designing on a Grid
Tuesday, April 16, 13
Building On A Grid
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Margin + Border + Padding + (content) Width
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
<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
<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
<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
<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
<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
How wide?
Tuesday, April 16, 13
How wide?
Tuesday, April 16, 13
How wide?
Tuesday, April 16, 13
How wide?
Tuesday, April 16, 13
No ConsistencyTuesday, April 16, 13
No ConsistencyTuesday, April 16, 13
ConsistencyTuesday, April 16, 13
How wide?
Tuesday, April 16, 13
BTW, is that margin
on the #content?
on the #sidebar?
on both?
Tuesday, April 16, 13
BTW, is that margin or padding
on the #content?
on the #sidebar?
on both?
Tuesday, April 16, 13
I propose a tradeoff
Tuesday, April 16, 13
Let me take away a little of your flexibilityand I’ll answer a lot of those questions.
Tuesday, April 16, 13
GRIDTuesday, April 16, 13
Tuesday, April 16, 13
940px
620px
220px
20px
10px 10px
300px
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
How it works
Tuesday, April 16, 13
940px
Tuesday, April 16, 13
940? 960?
Tuesday, April 16, 13
width=940pxmargin-left: 10px
margin-right: 10px
940 + 10 + 10 = 960
Tuesday, April 16, 13
940px
10 10
Tuesday, April 16, 13
20px60px
12 column layout
Tuesday, April 16, 13
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
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
5 columns
Your boxes must go to the lines, not the gutters
380px
Tuesday, April 16, 13
Many Grids to Choose From
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
cascade is the “C” in
CSSTuesday, April 16, 13
Tuesday, April 16, 13
body {background-color: #ffffff;
}
Tuesday, April 16, 13
unless told otherwise, a child element inherits applicable rules from its parents
Tuesday, April 16, 13
body{ background-color: #ffffff;}
Tuesday, April 16, 13
<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
But what about the other element backgrounds that aren’t white?
Tuesday, April 16, 13
#header{ background-color: #F3F5F9;}
#nav{ background-color: #CBD7E7;}
Tuesday, April 16, 13
Now add a link and see what happens
Tuesday, April 16, 13
body { color: #FF0000;font-size: 15px;
}
p{font-size: 10px;
}
a{color: #0000FF;
}
Tuesday, April 16, 13
specificity
Tuesday, April 16, 13
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
.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
selectors2.html
Tuesday, April 16, 13
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