css page design

PAGE DESIGN CSS

Tuesday, April 16, 13

The Web is made of

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

p{ width: 300px;

WidthTuesday, April 16, 13

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

Border

Padding

p{ width: 300px;

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

5px5px

padding: 25px;

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

padding: 25px 25px 25px 25px;

Margin

p{ width: 300px;

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

300px5px5px

margin: 25px;

padding: 25px;

Margin PaddingTuesday, April 16, 13

p{ width: 300px;

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

padding: 25px;}

5px5px

Margin + PaddingTuesday, April 16, 13

margin: 25px;

padding: 25px;

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=

ingcontent

boxes1-1.htmlTuesday, April 16, 13

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

10px5px

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

400px10 5

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

wrapper

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

</header>

</div></body>

header

article

footer

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

<div id=”header”><h1>North Gate</h1><div id=”nav”> UL ...</div>

</div>

</body>

</div>

</body>

</div>

</div></body>

</div>

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

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

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

10px 10px

How it works

940? 960?

width=940pxmargin-left: 10px

margin-right: 10px

940 + 10 + 10 = 960

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

60 20 60 20 60 20 60 20 60

5 columns 2 col

60 20 60 20 60 20 60 20 60 60 20 60

5 columns

Your boxes must go to the lines, not the gutters

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.

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

nav north gate ul

footer wrapper

Technology

use css to implement a reusable design selecting a...

today’s objectives css | rules | declarations project...

html/css class 3 css for page layout - stephanie finken

html, css, and xml tutorial 3 designing a web page with css

with css grid + css variables · css grid + css variables....

interface design multimedia and web. today’s objectives...

demux academy · html basics. css (selectors, properties,...

useful css for responsive web design

motion design with css

css: cascading style sheets - polito.it · css: cascading...

la page web en html css

branding - web design - css artist

design with css

1 css more details reasons to use css for page layoutreasons...

chapter 1, page apperance and css

css sculptor 1.0 - getting started...

css study flexibility by design: the shanghai cooperation...

responsive design & css frameworks

web design and css

css: separating design and content