CSS Page Design

PAGE DESIGN CSS

Tuesday, April 16, 13

The Web is made of

boxes


Boxes inside of boxes

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 space
By default they
• inherit their width
• inherit their height
• inherit their padding
• inherit their margin
• have no borders, but can


Terminology
ome m at h!)
(and s

boxes.html

300px

p{
width: 300px;
}

Width

310px

300px

5px 5px

p{
width: 300px;
border: 5px solid #000000;
}

Border

300px
5px 5px
25 25

360px
p{
width: 300px;
padding: 25px;
}

Padding

padding: 25px;

padding: 25px 25px 25px 25px;

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


300px
5px 5px
25 25
25

360px
p{
width: 300px;
margin: 25px;
}

Margin

25 25 25 25

360px 360px

margin: 25px; padding: 25px;

Margin Padding

300px
5px 5px

25 25

25

360px
410px

p{
width: 300px;
margin: 25px;
padding: 25px;
}

Margin + Padding

300px 300px 300px

25 25 25 225 2
2

360px 360px 360px

410px

padding: 25px;
margin: 25px; padding: 25px;
margin: 25px;

Compare padding & margin

Margin + Border + Padding + (content) Width

content
This is my 300px paragraph. It has
20x of padding, 50px of margin and
padding
border

border
margin

margin
padding
a 10px border.

50 + 10 + 20 + 300 + 20 + 10 + 50
=
460px

boxes1-1.html

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


5px
10px
5px 10px


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


400px

400px
10 5

5


blockquote{
margin-left: 10px;
padding-left: 5px;
padding-top: 10px;
width: 380px;
}


blockquote{
margin-left: 10px;
padding-left: 5px;
padding-top: 10px;
width: 380px;
}

blockquote:ﬁrst-letter{
font-size: 1.9em;
}


boxes2-1.html

header

content

footer


header
#nav

article

footer

wrapper


<body> header
#nav
<div id=”wrapper”>
<header>
<h1>North Gate</h1>
<div id=”nav”> UL ...</div>
</header> article

<article> .... </article>

<footer>...</footer>
footer

</div> wrapper
</body>


#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=”header”>
<h1>North Gate</h1>
</div>

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

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

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


<body>
<h1>North Gate</h1>
</div>

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


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

</div>
</body>


<body>
<h1>North Gate</h1>
</div>

<div id=”content”>
<div id=”article-inline”>
<h3>MacArthur</h3>
</div>
<p>lorem</p>
</div>



How wide?


No Consistency

Consistency

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 ﬂexibility
and I’ll answer a lot of those questions.


GRID

940px
620px 300px

10px 10px

20px

220px

How it works


940px


940? 960?


width=940px
margin-left: 10px
margin-right: 10px

940 + 10 + 10 = 960


940px

10 10


12 column layout

60px 20px


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
5 columns 2 col
380px
60 20 60 20 60 20 60 20 60
380px 140px
60 20 60 20 60 20 60 20 60 60 20 60

540px


5 columns

380px

Your boxes must go to the lines, not the gutters


Many Grids to Choose From


cascade is the “C” in

CSS

body {
}


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


body{
}


<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{ #nav{
background-color: #F3F5F9; background-color: #CBD7E7;
} }


Now add a link and see what happens


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

p{
font-size: 10px;
}

a{
color: #0000FF;
}


specific
ity

p{
color: #FF0000;
background-color: #000000;
}

Unless a more speciﬁc rule applies to a
paragraph, this “type” selector deﬁnes 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 conﬂict with a less speciﬁc “type” selector, the
class selector takes precedence.
</p>


selectors2.html


CSS Selectors have weight

High Value Low Value Tie Breaker

ID | Class | Type Position

(#nav) (.byline) (p)

SELECTOR CONFLICTS
CSS SELECTORS


CSS Page Design

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

CSS Page Design