css page design

PAGE DESIGN CSS

Tuesday, April 16, 13

The Web is made of

boxes


Boxes inside of boxesTuesday, April 16, 13

What do we already know about boxes?


(Block-level elements are boxes)


Headers (h1 - h6)


Paragraphs


List items


Any observations about boxes?


Boxes take up spaceBy default they

• inherit their width• inherit their height• inherit their padding• inherit their margin• have no borders, but can


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


300px

25 25

360px

Padding

p{ width: 300px;

border: 5px solid #000000; padding: 25px;

}

5px5px


25 25

padding: 25px;

padding-top: 25px;padding-right: 25px;padding-bottom: 25px;padding-left: 25px;

padding: 25px 25px 25px 25px;


2525

360px

Margin

p{ width: 300px;

border: 5px solid #000000; margin: 25px;

}

300px5px5px

25


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


boxes1-1.htmlTuesday, April 16, 13

400px


h1, h2, p, blockquote{width: 400px;background-color: #cccccc;

}


h2{ margin-top: 0; margin-bottom: 5px; margin-left: 0; margin-right: 0; padding: 0;} .date, .byline{ margin: 0; padding: 0;}


10px

10px5px

5px


blockquote{ margin-left: 10px; padding-left: 5px; border-left: 5px solid #000000; padding-top: 10px; padding-bottom: 10px; }


400px

400px10 5

5


blockquote{ margin-left: 10px; padding-left: 5px; border-left: 5px solid #000000; padding-top: 10px; padding-bottom: 10px; width: 380px;}


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;}


boxes2-1.htmlTuesday, April 16, 13

header

content

footer


header

article

footer

#nav

wrapper


<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


#wrapper{width: 700px;background-color: #ffffff;margin: 10px auto 30px auto;

}


Sometimes you want a box to not be a box


What if LI could be inline?


#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; }


Designing on a Grid


Building On A Grid


Margin + Border + Padding + (content) Width


<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>




</div>



<div id=”footer”>...</div>

</div></body>




</div>

<div id=”content”> <div id=”article-inline”>

<h3>MacArthur</h3> </div>

<p>lorem</p></div>





</div>



<div id=”footer”>...</div>

</div></body>


How wide?


No ConsistencyTuesday, April 16, 13

ConsistencyTuesday, April 16, 13

How wide?


BTW, is that margin

on the #content?

on the #sidebar?

on both?


BTW, is that margin or padding

on the #content?

on the #sidebar?

on both?


I propose a tradeoff


Let me take away a little of your flexibilityand I’ll answer a lot of those questions.


GRIDTuesday, April 16, 13

940px

620px

220px

20px

10px 10px

300px


How it works


940px


940? 960?


width=940pxmargin-left: 10px

margin-right: 10px

940 + 10 + 10 = 960


940px

10 10


20px60px

12 column layout


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


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


5 columns

Your boxes must go to the lines, not the gutters

380px


Many Grids to Choose From


cascade is the “C” in

CSSTuesday, April 16, 13

body {background-color: #ffffff;

}


unless told otherwise, a child element inherits applicable rules from its parents


body{ background-color: #ffffff;}


<body><p>Because this paragraph is inside the body tag (like all page elements) it inherits the text properties of the body. </p>

</body>


But what about the other element backgrounds that aren’t white?


#header{ background-color: #F3F5F9;}

#nav{ background-color: #CBD7E7;}


Now add a link and see what happens


body { color: #FF0000;font-size: 15px;

}

p{font-size: 10px;

}

a{color: #0000FF;

}


specificity


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.


.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>


selectors2.html


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)


css page design

Technology

nav north gate ul

footer wrapper