• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS Page Design
 

CSS Page Design

on

  • 639 views

 

Statistics

Views

Total Views
639
Views on SlideShare
267
Embed Views
372

Actions

Likes
0
Downloads
3
Comments
0

5 Embeds 372

http://medill.co 360
http://fall405.medill.co 8
http://www.medill.co 2
http://webcache.googleusercontent.com 1
http://2011.medill.co 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS Page Design CSS Page Design Presentation Transcript

    • PAGE DESIGN CSSTuesday, April 16, 13
    • The Web is made 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
    • 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
    • ParagraphsTuesday, April 16, 13
    • List itemsTuesday, April 16, 13
    • Any observations about boxes?Tuesday, April 16, 13
    • Boxes take up space By default they • inherit their width • inherit their height • inherit their padding • inherit their margin • have no borders, but canTuesday, April 16, 13
    • Boxes take up space By default they • inherit their width • inherit their height • inherit their padding • inherit their margin • have no borders, but canTuesday, April 16, 13
    • Boxes take up space By default they • inherit their width • inherit their height • inherit their padding • inherit their margin • have no borders, but canTuesday, April 16, 13
    • Boxes take up space By default they • inherit their width • inherit their height • inherit their padding • inherit their margin • have no borders, but canTuesday, April 16, 13
    • Boxes take up space By default they • inherit their width • inherit their height • inherit their padding • inherit their margin • have no borders, but canTuesday, April 16, 13
    • Terminology ome m at h!) (and s boxes.htmlTuesday, April 16, 13
    • 300px p{ width: 300px; } WidthTuesday, April 16, 13
    • 310px 300px 5px 5px p{ width: 300px; border: 5px solid #000000; } BorderTuesday, April 16, 13
    • 300px 5px 5px 25 25 360px p{ width: 300px; border: 5px solid #000000; padding: 25px; } PaddingTuesday, April 16, 13
    • padding: 25px; padding: 25px 25px 25px 25px; 25 25 padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px;Tuesday, April 16, 13
    • 300px 5px 5px 25 25 25 360px p{ width: 300px; border: 5px solid #000000; margin: 25px; } MarginTuesday, April 16, 13
    • 25 25 25 25 360px 360px margin: 25px; padding: 25px; Margin PaddingTuesday, April 16, 13
    • 300px 5px 5px 25 25 25 360px 410px p{ width: 300px; border: 5px solid #000000; margin: 25px; padding: 25px; } Margin + PaddingTuesday, April 16, 13
    • 300px 300px 300px 25 25 25 225 2 2 360px 360px 360px 410px padding: 25px; margin: 25px; padding: 25px; margin: 25px; Compare padding & marginTuesday, April 16, 13
    • 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 = 460pxTuesday, April 16, 13
    • boxes1-1.htmlTuesday, April 16, 13
    • Tuesday, April 16, 13
    • 400pxTuesday, 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
    • 5px 10px 5px 10pxTuesday, 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 400px 10 5 5Tuesday, 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 footerTuesday, April 16, 13
    • header #nav article footer wrapperTuesday, April 16, 13
    • <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>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 boxTuesday, 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 GridTuesday, April 16, 13
    • Building On A GridTuesday, April 16, 13
    • Tuesday, April 16, 13
    • Tuesday, April 16, 13
    • Tuesday, April 16, 13
    • Margin + Border + Padding + (content) WidthTuesday, 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 tradeoffTuesday, April 16, 13
    • Let me take away a little of your flexibility and I’ll answer a lot of those questions.Tuesday, April 16, 13
    • Tuesday, April 16, 13 GRID
    • Tuesday, April 16, 13
    • 940px 620px 300px 10px 10px 20px 220pxTuesday, 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 worksTuesday, April 16, 13
    • 940pxTuesday, April 16, 13
    • 940? 960?Tuesday, April 16, 13
    • width=940px margin-left: 10px margin-right: 10px 940 + 10 + 10 = 960Tuesday, April 16, 13
    • 940px 10 10Tuesday, April 16, 13
    • 12 column layout 60px 20pxTuesday, 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 60Tuesday, April 16, 13
    • 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 540pxTuesday, April 16, 13
    • 5 columns 380px Your boxes must go to the lines, not the guttersTuesday, April 16, 13
    • Many Grids to Choose FromTuesday, 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 parentsTuesday, 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{ #nav{ background-color: #F3F5F9; background-color: #CBD7E7; } }Tuesday, April 16, 13
    • Now add a link and see what happensTuesday, April 16, 13
    • body { color: #FF0000; font-size: 15px; } p{ font-size: 10px; } a{ color: #0000FF; }Tuesday, April 16, 13
    • specific ityTuesday, 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.htmlTuesday, April 16, 13
    • CSS Selectors have weight High Value Low Value Tie Breaker ID | Class | Type Position (#nav) (.byline) (p) SELECTOR CONFLICTS CSS SELECTORSTuesday, April 16, 13