CSCI E 12 Fundamentals of Website Development · Presentation (Cascading Style Sheets, CSS) A form...

CSCI E‐12 Fundamentals ofWebsite Development

Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home

Februrary 23, 2010

Harvard UniversityExtension School

Course Web Site: http://cscie12.dce.harvard.edu/

Instructor email: [email protected] staff email: [email protected]

CSCI E-12 - February 23, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100224/handout.html

1 of 69 2/24/2010 4:44 PM

Presentation (Cascading Style Sheets, CSS)

A form for lecture feedback is available from the course web site. Please take two minutes to fill it out afteryou have seen the lecture.

Image created at wordle.net


2 of 69 2/24/2010 4:44 PM

Firebug: Web Development Evolved

Edit CSS in Firebug: Disable CSS Rules in Firebug:


3 of 69 2/24/2010 4:44 PM

Show computed styles in Firebug:


4 of 69 2/24/2010 4:44 PM

margin

border

padding

content

Image from Cascading Style Sheets: The Definitive Guide, 3rd ed by Eric Meyer, published by O'Reilly

Firebug visualization of block model (Layout):


5 of 69 2/24/2010 4:44 PM

list‐style‐type

disc | circle | square | decimal | lower‐roman | upper‐roman | lower‐alpha | upper‐alpha |none

list‐style‐image

list‐style‐position

list‐stylea shorthand property

Ordered List

An ordered list:

Example 5.1 ‐ Ordered List: upper‐roman ‐ View example by itself (Without Styles)

view plain print ?

<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong> 1.<ol class="basketball"> 2. <li>Roy Williams</li> 3. <li>Mark Few</li> 4. <li>Jamie Dixon</li> 5. <li>Bruce Pearl</li> 6. <li>Bo Ryan</li> 7. <li>Mike Krzyzewski</li> 8. <li>John Calipari</li> 9. <li>Thad Matta</li> 10. <li>Mark Fox</li> 11. <li>Rick Pitino</li> 12. <li>Jim Boeheim</li> 13. <li>Bob Huggins</li> 14. <li>Bill Self</li> 15. <li>Rick Majerus</li> 16. <li>Sean Miller</li> 17.</ol> 18.

Markup Style


6 of 69 2/24/2010 4:44 PM

And now, let's add a basketball icon as a list bullet (image is at images/basketball.gif,

An unordered list controlled by CSS:

Example 5.2 ‐ List with images as bullets ‐ View example by itself (Without Styles)

view plain print ?

<div class="basketball"> 1.<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong> 2.<ul class="basketball"> 3. <li>Roy Williams</li> 4. <li>Mark Few</li> 5. <li>Jamie Dixon</li> 6. <li>Bruce Pearl</li> 7. <li>Bo Ryan</li> 8. <li>Mike Krzyzewski</li> 9. <li>John Calipari</li> 10. <li>Thad Matta</li> 11. <li>Mark Fox</li> 12. <li>Rick Pitino</li> 13. <li>Jim Boeheim</li> 14. <li>Bob Huggins</li> 15. <li>Bill Self</li> 16. <li>Rick Majerus</li> 17. <li>Sean Miller</li> 18.</ul> 19.</div> 20.

Markup Style


7 of 69 2/24/2010 4:44 PM

How to accomplish this without CSS.

Example 5.3 ‐ A bad way ‐ View example by itself (Without Styles)

view plain print ?

<p>Achieving the same effect using HTML and the IMG element (look at the source to s1.<div> 2.<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><br/> 3. <img src="images/basketball.gif" alt="*"/>Roy Williams<br/> 4. <img src="images/basketball.gif" alt="*"/>Mark Few<br/> 5. <img src="images/basketball.gif" alt="*"/>Jamie Dixon<br/> 6. <img src="images/basketball.gif" alt="*"/>Bruce Pearl<br/> 7. <img src="images/basketball.gif" alt="*"/>Bo Ryan<br/> 8. <img src="images/basketball.gif" alt="*"/>Mike Krzyzewski<br/> 9. <img src="images/basketball.gif" alt="*"/>John Calipari<br/> 10. <img src="images/basketball.gif" alt="*"/>Thad Matta<br/> 11. <img src="images/basketball.gif" alt="*"/>Mark Fox<br/> 12. <img src="images/basketball.gif" alt="*"/>Rick Pitino<br/> 13. <img src="images/basketball.gif" alt="*"/>Jim Boeheim<br/> 14. <img src="images/basketball.gif" alt="*"/>Bob Huggins<br/> 15. <img src="images/basketball.gif" alt="*"/>Bill Self<br/> 16. <img src="images/basketball.gif" alt="*"/>Rick Majerus<br/> 17. <img src="images/basketball.gif" alt="*"/>Sean Miller<br/> 18.</div> 19.

For the complete list: NCAA Men's Basketball Statistics

Markup Style


8 of 69 2/24/2010 4:44 PM

element, class, id

p {/* style rules */}

p.classname {/* style rules */}

.classname {/* style rules */}

#idname {/* style rules */}

descendant

thead th {/* style rules */}

wildcard

* {/* style rules */}

pseudo‐classes and pseudo‐elements

a:hover {/* style rules */}

input:focus {/* style rules */}

li:first-child {/* style rules */}

attribute value

input[type="submit"] {/* style rules */}

child, sibling

body > p {/* style rules */}


9 of 69 2/24/2010 4:44 PM

CSS 2.1 defines pseudo‐classes and pseudo‐elements. Examples are p:first-line, li:first-child, andinput:focus

Pseudo‐Classes Pseudo‐Elements

first‐child

link

visited

hover

active

focus

lang

first‐line

first‐letter

before

after


10 of 69 2/24/2010 4:44 PM

first-letter pseudo element.

Example 5.4 ‐ first‐letter pseudo element ‐ View example by itself (Without Styles)

first-line pseudo element

Example 5.5 ‐ first‐line pseudo element ‐ View example by itself (Without Styles)

Example 5.6 ‐ Opening paragraph with first‐letter pseudo element ‐ View example by itself (Without Styles)

Markup Style Screenshot




11 of 69 2/24/2010 4:44 PM

a:link

a:visited

a:hover

a:active

Use the "link‐visited‐hover‐active" or "LVHA" ordering (some like to remember this by "LoVe HAte").

Example 5.7 ‐ Links ‐ View example by itself (Without Styles)



12 of 69 2/24/2010 4:44 PM

Example 5.8 ‐ input:focus pseudo‐class ‐ View example by itself (Without Styles)



13 of 69 2/24/2010 4:44 PM

Multiple <link /> elements in markup

@import rule in CSS

Multiple <link /> Elements

@import


14 of 69 2/24/2010 4:44 PM


15 of 69 2/24/2010 4:44 PM

Image from Flickr user Cayusa, used under Creative Commons license.

See: CSS 2.1: Assigning property values, Cascading, and Inheritance

Stylesheet Origin

UA (Web Browser)stylesheet

reader stylesheet

author stylesheet

Specificity of Selector

style attribute

count "id" attributes

count number of otherattributes ("class")

count element names

Order

last occurence hashigher specificity

@imported stylesheetscome before rules in theimporting sheet.


16 of 69 2/24/2010 4:44 PM

Example 5.9 ‐ The Cascade ‐ View example by itself (Without Styles)

view plain print ?

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sap1. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. </p> 2.<div id="maincontent"> 3. <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla frin4. semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis veli5. nec placerat dolor pede nec nibh. 6. Vestibulum nibh.</p> 7. <div class="note"> 8. <ul> 9. <li>Proin sollicitudin ante vel eros.</li> 10. <li>Nunc tempus.</li> 11. <li>Quisque vitae quam non magna mattis volutpat.</li> 12. </ul> 13. <p>Quisque feugiat tellus ultricies urna. Pellentesque habitant morbi tristique 14. senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt.</p>15. </div> 16. <ul> 17. <li>Pellentesque sit amet metus.</li> 18. <li>Sed sollicitudin feugiat massa.</li> 19. <li>Sed magna.</li> 20. </ul> 21.</div> 22.<p>Sed malesuada elit non augue. Vestibulum nec nulla. Aenean orci. Ut sem leo, plac23.<div class="note"> 24. <p>Morbi faucibus ornare pede. Aenean bibendum pharetra arcu. Vestibulum a quam. D25. commodo ultricies tortor. Nulla mattis fermentum erat. Aliquam at tortor eget ve26. egestas aliquet. Nam quam.</p> 27.</div> 28.

Markup Style


17 of 69 2/24/2010 4:44 PM


18 of 69 2/24/2010 4:44 PM


19 of 69 2/24/2010 4:44 PM

You can choose class and id values when authoring your CSS and XHTML. A good rule is to create "logical"class and id values and not "descriptive" ones. Remember, you've gone to the trouble of separatingmarkup and presentation ‐‐ keep this separation when creating class names.

If you can guess how the class is styled based upon the name, this should cause you to consider changingthe name.

Good Class/ID Names Poor Class Names

pageheader

pagefooter

navigation

gallery

imgcaption

aside

warn

info

pagetop

rightcolumn

rightnav

thinborder

redbold

center


20 of 69 2/24/2010 4:44 PM

Sometimes it is useful to use a CSS stylesheet to "reset" styling for all elements. This attempts to start yourstyling with a "blank slate" instead of the browser defaults.

Eric Meyer's CSS Reset Reloaded

YUI Reset CSS

Basic Markup

Basic Markup with Eric Meyer CSS Reset

Basic Markup with YUI CSS Reset

Basic Markup: With CSS Reset:


21 of 69 2/24/2010 4:44 PM


22 of 69 2/24/2010 4:44 PM


23 of 69 2/24/2010 4:44 PM

view plain print ?

html, body, div, span, applet, object, iframe, 1.h1, h2, h3, h4, h5, h6, p, blockquote, pre, 2.a, abbr, acronym, address, big, cite, code, 3.del, dfn, em, font, img, ins, kbd, q, s, samp, 4.small, strike, strong, sub, sup, tt, var, 5.dl, dt, dd, ol, ul, li, 6.fieldset, form, label, legend, 7.table, caption, tbody, tfoot, thead, tr, th, td { 8. margin: 0; 9. padding: 0; 10. border: 0; 11. outline: 0; 12. font-weight: inherit; 13. font-style: inherit; 14. font-size: 100%; 15. font-family: inherit; 16. vertical-align: baselinebaseline; 17.} 18./* remember to define focus styles! */ 19.:focus { 20. outline: 0; 21.} 22.body { 23. line-height: 1; 24. color: black; 25. background: white; 26.} 27.ol, ul { 28. list-style: none; 29.} 30./* tables still need 'cellspacing="0"' in the markup */ 31.table { 32. border-collapse: separate; 33. border-spacing: 0; 34.} 35.caption, th, td { 36. text-align: left; 37. font-weight: normal; 38.} 39.blockquote:before, blockquote:after, 40.q:before, q:after { 41. content: ""; 42.} 43.blockquote, q { 44. quotes: "" ""; 45.} 46.

Choosing class and id names appropriately will help with:

evolutionYour #rightnav may very well become navigation positioned on the left side or the top.Your .redbold may very be changed to another color or background entirely.

specificity and semanticsIf you have a .dottedborder class, you may wish to change how your thumbnail images are styled,but leave presentation of other markup that you've given the same class to unchanged.


24 of 69 2/24/2010 4:44 PM

Tendency to over‐use "div" elements

Can you assign a class or id directy to another element?

Instead of...view plain print ?

<div id="header"><h1>Our Solar System</h1></div> 1.

why not...view plain print ?

<h1 id="header">Our Solar System</h1> 1.

Instead of...view plain print ?

<div class="basketball"> 1. <ul> 2. <li>Roy Williams</li> 3. <li>Mark Few</li> 4. <li>Jamie Dixon</li> 5. ... 6. 7.

why not...view plain print ?

<ul class="basketball"> 1. <li>Roy Williams</li> 2. <li>Mark Few</li> 3. <li>Jamie Dixon</li> 4. ... 5.


25 of 69 2/24/2010 4:44 PM

Float takes the block out of the flow of the containing block and moves it (right or left) within the containingblock.

Example 5.10 ‐ float: none; ‐ View example by itself (Without Styles)

Example 5.11 ‐ float: right; ‐ View example by itself (Without Styles)




26 of 69 2/24/2010 4:44 PM

The "clear" property defines the top clearance to push the block past a previous float.

Example 5.12 ‐ float: right; clear: none; ‐ View example by itself (Without Styles)

Example 5.13 ‐ float: right; clear: right; ‐ View example by itself (Without Styles)




27 of 69 2/24/2010 4:44 PM


28 of 69 2/24/2010 4:44 PM

The clear property defines the sides of a block where floated blocks cannot occur.

Example 5.14 ‐ clear: none; ‐ View example by itself (Without Styles)

Example 5.15 ‐ clear: right; ‐ View example by itself (Without Styles)




29 of 69 2/24/2010 4:44 PM

Float: right

Example 5.16 ‐ float: right; ‐ View example by itself (Without Styles)

Float: left

Example 5.17 ‐ float: left; ‐ View example by itself (Without Styles)




30 of 69 2/24/2010 4:44 PM

Use float: left and float: right for content to be on opposite sides.

Example 5.18 ‐ float left and right ‐ View example by itself (Without Styles)

The background color of the parent div did not display. The content of this div has been "floated,"therefore it has been removed from the calculation of its box model. The parent div size is null. Solution:float the parent div. Recall that a float is always with respect to the containing box.

Example 5.19 ‐ float left and right and parent div ‐ View example by itself (Without Styles)




31 of 69 2/24/2010 4:44 PM

We want to float one element left, the other right. We want content to be between the floated elements.

Example 5.20 ‐ float and margin ‐ View example by itself (Without Styles)

Make the middle content not wrap around the floated contents (set margin for the middle content).

Example 5.21 ‐ float and margin to achieve a column effect ‐ View example by itself (Without Styles)




32 of 69 2/24/2010 4:44 PM

Here each "program" is wrapped in a div or a p, which contains a thumbnail and a caption. The div (or p)elements are sized (height and width set) and floated. The result is a table‐like layout that is flexible forvarying widths of the browser window.

Harvard at Home Programs

Congress


33 of 69 2/24/2010 4:44 PM

Solar System

>


34 of 69 2/24/2010 4:44 PM

It is important to set height and width !

Example 5.22 ‐ Making a grid: setting width but not height ‐ View example by itself (Without Styles)

Example 5.23 ‐ Making a grid: setting height and width ‐ View example by itself (Without Styles)




35 of 69 2/24/2010 4:44 PM


36 of 69 2/24/2010 4:44 PM

Can use CSS to turn off display. This will be especially useful to manipulate CSS properties with JavaScript.

Example 5.24 ‐ display: none; ‐ View example by itself (Without Styles)

Full list for the American League:



37 of 69 2/24/2010 4:44 PM

Visibility controls whether or not an element is displayed. The element still takes up space in the blockmodel.

Example 5.25 ‐ visibility: hidden; ‐ View example by itself (Without Styles)

Full list for the American League:



38 of 69 2/24/2010 4:44 PM


39 of 69 2/24/2010 4:44 PM

Lists combined with CSS are very powerful. Lists can remain lists in markup (navigation, content items, etc.)and CSS can style them as desired.

Some samples of lists in action:

The University of Kansas

The White House

Harvard Summer School


40 of 69 2/24/2010 4:44 PM


41 of 69 2/24/2010 4:44 PM

Harvard Extension School


42 of 69 2/24/2010 4:44 PM

Default list style:

Example 5.26 ‐ list‐style: none; ‐ View example by itself (Without Styles)



43 of 69 2/24/2010 4:44 PM

Example 5.27 ‐ simple list ‐ View example by itself

view plain print ?

<ul> 1. <li>Big XII</li> 2. <li>Ivy League</li> 3. <li>Pac 10</li> 4.</ul> 5.

Example 5.28 ‐ inline list items ‐ View example by itself (Without Styles)

Example 5.29 ‐ Inline List Items ‐ View example by itself (Without Styles)

Inspired by: CSS Cookbook by Christopher Schmitt

Markup Display




44 of 69 2/24/2010 4:44 PM

Default styling:

Note: "a" display property is set to "block". This makes the hyperlink active over the whole area, not justwith the text.

Example 5.30 ‐ lists as navigation ‐ View example by itself (Without Styles)




45 of 69 2/24/2010 4:44 PM

Nested list styled as "clamshell" navigation.

Example 5.31 ‐ Nested lists for 'clamshell' navigation ‐ View example by itself (Without Styles)

Default styling of nested list:




46 of 69 2/24/2010 4:44 PM

The basics are:

Make the first list "inline"

Hide the secondary lists

Use the CSS ":hover" pseudo‐class to change secondary list display property

Example 5.32 ‐ drop down menu ‐ View example by itself (Without Styles)

Markup Style


47 of 69 2/24/2010 4:44 PM

view plain print ?

<ul id="dropdown1"> 1. <li><a href="#" shape="rect">AL East</a> 2. <ul> 3. <li><a href="#" shape="rect">Baltimore</a></li> 4. <li><a href="#" shape="rect">Boston</a></li> 5. <li><a href="#" shape="rect">New York</a></li> 6. <li><a href="#" shape="rect">Toronto</a></li> 7. <li><a href="#" shape="rect">Tampa Bay</a></li> 8. </ul> </li> 9. <li><a href="#" shape="rect">AL Central</a> 10. <ul> 11. <li><a href="#" shape="rect">Chicago</a></li> 12. <li><a href="#" shape="rect">Cleveland</a></li> 13. <li><a href="#" shape="rect">Detroit</a></li> 14. <li><a href="#" shape="rect">Kansas City</a></li> 15. <li><a href="#" shape="rect">Minnesota</a></li> 16. </ul> </li> 17. <li><a href="#" shape="rect">AL West</a> 18. <ul> 19. <li><a href="#" shape="rect">Los Angeles</a></li> 20. <li><a href="#" shape="rect">Oakland</a></li> 21. <li><a href="#" shape="rect">Texas</a></li> 22. <li><a href="#" shape="rect">Seattle</a></li> 23. </ul> </li> 24.</ul> 25.


48 of 69 2/24/2010 4:44 PM

Example 5.33 ‐ drop‐down menu ‐ View example by itself (Without Styles)

view plain print ?


Markup Style


49 of 69 2/24/2010 4:44 PM

Example 5.34 ‐ drop‐down/out menu ‐ View example by itself (Without Styles)

view plain print ?


Markup Style


50 of 69 2/24/2010 4:44 PM

"Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I havestrewn about, they will show us our way home again.", Hansel in Hansel and Gretel

Markup "breadcrumb" navigation using nested lists so that markup reflects the parent/child or hierarchyrelationship.

Strategy is similar to that of creating tabs. Use "display: inline" to make list items inline; use backgroundimage for "li" to show arrow.

Example 5.35 ‐ Nested lists for 'breadcrumb' navigation ‐ View example by itself (Without Styles)

Markup Style


51 of 69 2/24/2010 4:44 PM

view plain print ?

<div id="breadcrumb"> 1. <ul> 2. <li> <a href="http://dmoz.org/" shape="rect">Top</a> 3. <ul> 4. <li> <a href="http://dmoz.org/Science/" shape="rect">Science</a> 5. <ul> 6. <li> <a href="http://dmoz.org/Science/Biology/" shape="rect">Biology</a>

7.

<ul> 8. <li> <a href="http://dmoz.org/Science/Biology/Genetics/" shape="rect">

9.

Genetics</a> 10. <ul> 11. <li> <a href="http://dmoz.org/Science/Biology/Genetics/Genomics/" shape="rect">

12.

Genomics</a> 13. <ul> 14. <li> 15. <span>Pharmacogenetics</span> 16. </li> 17. </ul> 18. </li> 19. </ul> 20. </li> 21. </ul> 22. </li> 23. </ul> 24. </li> 25. </ul> 26. </li> 27. </ul> 28.</div> 29.

In head element:

view plain print ?

<link rel="stylesheet" type="text/css" href="example35.css"/> 1.


52 of 69 2/24/2010 4:44 PM

"Monkey Wrenches"

Unsupported Selectors

Resources

Tantek Çelik's CSS Examples

CSS mastery: advanced web standards solutions by Andy Budd"CSS Mastery" is available online from Harvard University Libraries.

Examples are used from Tantek Çelik's CSS Examples by permission under a Creative Commons License

CSS only for "modern" browsers:

@import "null.css?\"\{"; @import "for_current_browsers.css";

Modern browsers will import two CSS files:

null.css?"{

for_current_browsers.css

Older browsers (Windows IE <= 5.5; Mac IE <5; NS < 6) will interpret this statement as an import statement(null.css) followed by a style declaration with no selector.

CSS only for old browsers:

See the various "filter" mechanisms described in Tantek Çelik's CSS Examples


53 of 69 2/24/2010 4:44 PM

See "Layout" chapter in:

CSS Mastery: Advanced Web Standards Solutions by Andy Budd and Cameron Mol[Harvard Library]

Fixed Widthdefine width in pixels

Liquid / Fluiddefine widths in percentages (relative to browser window)

Elasticdefine widths in em units (relative to font‐size)

The CSS properties of min-width and max-width can be useful in liquid and elastic layouts to keep columnsfrom becoming too small or too large.


54 of 69 2/24/2010 4:44 PM

Define region widths based upon fixed sizes (pixels).

Use "div" elements to define areas and CSS to arrange them on the page.

view plain print ?

<div id="wrapper"> 1.<div id="header"> ... </div> 2.<div id="maincontent"> 3. ... 4.</div> 5.<div id="navigation"> 6. ... 7.</div> 8.<div id="footer"> ... </div> 9.</div> 10.


55 of 69 2/24/2010 4:44 PM

Example 5.36 ‐ View example by itself (Without Styles)

view plain print ?

<div id="wrapper"> 1.<div id="header"> 2. <h1>Lorem ipsum dolor sit</h1> 3.</div> 4.<div id="maincontent"> 5. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at s6. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec 7. dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque maur8. turpis eu purus. </p> 9. <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla frin10. semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis veli11. nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim.12. Vestibulum nibh.</p> 13. <p>Nulla facilisi. Aliquam dapibus leo eget leo. Etiam vitae turpis sit amet massa14. posuere cursus. Sed vitae justo quis tortor facilisis ultrices. Integer id erat.15. at felis ut erat interdum vestibulum. Quisque et eros. Donec fringilla, est in 16. condimentum venenatis, tortor velit vehicula sem, in elementum quam sapien eu le17. In dolor urna, ullamcorper vel, tempor sit amet, semper ut, felis. Praesent nisi18.</div> 19.<div id="navigation"> 20. <ul> 21. <li>Mauris</li> 22. <li>Cras</li> 23. <li>Proin</li> 24. <li>Integer</li> 25. <li>Curabitur</li> 26. <li>Integer</li> 27. <li>Suspendisse</li> 28. <li>Quisque</li> 29. </ul> 30. 31.</div> 32.<div id="footer"> Proin quis orci eu erat molestie varius. Praesent condimentum orci33. lectus. Ut ipsum. In hac habitasse platea dictumst. </div> 34.</div> 35.

Markup Style


56 of 69 2/24/2010 4:44 PM

Define region width based on percentages (relative to browser window width).

view plain print ?



Markup Style


57 of 69 2/24/2010 4:44 PM

view plain print ?

<div id="wrapper"> 1.<div id="header"> 2. <h1>Lorem ipsum dolor sit</h1> 3.</div> 4.<div id="maincontent"> 5. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at s6. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec 7. dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque maur8. turpis eu purus. </p> 9. <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla frin10. semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis veli11. nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim.12. Vestibulum nibh.</p> 13. <p>Nulla facilisi. Aliquam dapibus leo eget leo. Etiam vitae turpis sit amet massa14. posuere cursus. Sed vitae justo quis tortor facilisis ultrices. Integer id erat.15. at felis ut erat interdum vestibulum. Quisque et eros. Donec fringilla, est in 16. condimentum venenatis, tortor velit vehicula sem, in elementum quam sapien eu le17. In dolor urna, ullamcorper vel, tempor sit amet, semper ut, felis. Praesent nisi18.</div> 19.<div id="navigation"> 20. <ul> 21. <li>Mauris</li> 22. <li>Cras</li> 23. <li>Proin</li> 24. <li>Integer</li> 25. <li>Curabitur</li> 26. <li>Integer</li> 27. <li>Suspendisse</li> 28. <li>Quisque</li> 29. </ul> 30. 31.</div> 32.<div id="footer"> Proin quis orci eu erat molestie varius. Praesent condimentum orci33. lectus. Ut ipsum. In hac habitasse platea dictumst. </div> 34.</div> 35.


58 of 69 2/24/2010 4:44 PM

Define region widths relative to the base font size.

view plain print ?



Markup Style


59 of 69 2/24/2010 4:44 PM

view plain print ?

<div id="wrapper"> 1.<div id="header"> 2. <h1>Lorem ipsum dolor sit</h1> 3.</div> 4.<div id="maincontent"> 5. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at s6. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec 7. dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque maur8. turpis eu purus. </p> 9. <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla frin10. semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis veli11. nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim.12. Vestibulum nibh.</p> 13. <p>Nulla facilisi. Aliquam dapibus leo eget leo. Etiam vitae turpis sit amet massa14. posuere cursus. Sed vitae justo quis tortor facilisis ultrices. Integer id erat.15. at felis ut erat interdum vestibulum. Quisque et eros. Donec fringilla, est in 16. condimentum venenatis, tortor velit vehicula sem, in elementum quam sapien eu le17. In dolor urna, ullamcorper vel, tempor sit amet, semper ut, felis. Praesent nisi18.</div> 19.<div id="navigation"> 20. <ul> 21. <li>Mauris</li> 22. <li>Cras</li> 23. <li>Proin</li> 24. <li>Integer</li> 25. <li>Curabitur</li> 26. <li>Integer</li> 27. <li>Suspendisse</li> 28. <li>Quisque</li> 29. </ul> 30.</div> 31.<div id="footer"> Proin quis orci eu erat molestie varius. Praesent condimentum orci32. lectus. Ut ipsum. In hac habitasse platea dictumst. </div> 33.</div> 34.


60 of 69 2/24/2010 4:44 PM

header, footer, navigation, primary content, secondary content


Markup Style


61 of 69 2/24/2010 4:44 PM

view plain print ?

<div id="wrapper"> 1. <div id="header"> 2. <h1>Lorem ipsum dolor sit</h1> 3. </div> 4. <div id="maincontent"> 5. <div id="primary"> 6. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi 7. at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis 8. sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet 9. neque, non pellentesque mauris turpis eu purus. </p> 10. <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla 11. fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus 12. pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis13. adipiscing diam at enim. Vestibulum nibh.</p> 14. <p>Nulla facilisi. Aliquam dapibus leo eget leo. Etiam vitae turpis sit amet 15. massa posuere cursus. Sed vitae justo quis tortor facilisis ultrices. 16. Integer id erat. Donec at felis ut erat interdum vestibulum. Quisque et eros17. Donec fringilla, est in condimentum venenatis, tortor velit vehicula sem, in18. elementum quam sapien eu lectus. In dolor urna, ullamcorper vel, tempor sit 19. amet, semper ut, felis. Praesent nisi. </p> 20. </div> 21. <div id="secondary"> 22. <p>Fusce scelerisque viverra quam. Nam urna. Nullam urna libero, euismod at, 23. euismod sit amet, porttitor ac, mauris.</p> 24. <p>Vestibulum interdum aliquet lacus. Vestibulum egestas. Fusce adipiscing 25. quam sed metus.</p> 26. <p>Nullam dignissim aliquam dui. Proin laoreet, elit sed pulvinar 27. sollicitudin, urna arcu fermentum felis, in rhoncus nunc neque vitae 28. libero.</p> 29. </div> 30. </div> 31. <div id="navigation"> 32. <ul> 33. <li>Mauris</li> 34. <li>Cras</li> 35. <li>Proin</li> 36. <li>Integer</li> 37. 38. <li>Curabitur</li> 39. <li>Integer</li> 40. <li>Suspendisse</li> 41. <li>Quisque</li> 42. </ul> 43. </div> 44. <div id="footer"> Proin quis orci eu erat molestie varius. Praesent condimentum 45. orci in lectus. Ut ipsum. In hac habitasse platea dictumst. </div> 46. 47.</div> 48.


62 of 69 2/24/2010 4:44 PM

Blueprint

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you asolid CSS foundation to build your project on top of, with an easy‐to‐use grid, sensible typography,and even a stylesheet for printing.

960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonlyused dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, whichcan be used separately or in tandem.

YUI CSS Grids and the YUI Grid Builder

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability tostack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000page layout combinations.


63 of 69 2/24/2010 4:44 PM

Blueprint

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you asolid CSS foundation to build your project on top of, with an easy‐to‐use grid, sensible typography,and even a stylesheet for printing.

Blueprint CSS


64 of 69 2/24/2010 4:44 PM

Layout with Blueprint CSS

view plain print ?

<html xmlns="http://www.w3.org/1999/xhtml"> 1. <head> 2. <title>Lorem ipsum dolor sit</title> 3. <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 4. <link rel="stylesheet" href="http://morpheus.dce.harvard.edu/blueprintcss/blueprint/screen.css" type="text/css" media="screen, projection" />

5.

<link rel="stylesheet" href="http://morpheus.dce.harvard.edu/blueprintcss/blueprint/print.css" type="text/css" media="print" />

6.



7.

</head> 8. <body> 9. <div class="container"> 10. <div id="header" class="span-24"> 11.  12. </div> 13. <div class="span-4"> 14.  15. </div> 16. <div class="span-15"> 17.  18. </div> 19. <div class="span-5 last"> 20.  21. </div> 22. <div class="span-24"> 23.  24. </div> 25. </div> 26. </body> 27.</html> 28.


65 of 69 2/24/2010 4:44 PM

960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonlyused dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, whichcan be used separately or in tandem.

960 Grid System


66 of 69 2/24/2010 4:44 PM

Layout with 960 Grid System

view plain print ?

<html xmlns="http://www.w3.org/1999/xhtml"> 1.<head> 2. <title>Lorem ipsum dolor sit</title> 3. <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 4. <link rel="stylesheet" type="text/css" media="all" 5. href="http://morpheus.dce.harvard.edu/960gs/code/css/reset.css"/> 6. <link rel="stylesheet" type="text/css" media="all" 7. href="http://morpheus.dce.harvard.edu/960gs/code/css/text.css"/> 8. <link rel="stylesheet" type="text/css" media="all" 9. href="http://morpheus.dce.harvard.edu/960gs/code/css/960.css"/> 10.</head> 11.<body> 12. <div class="container_12"> 13. <div class="grid_9"> 14.  15. </div> 16. <div class="clear"> </div> 17. <div class="grid_2"> 18.  19. </div> 20. <div class="grid_7"> 21. <div id="primary" class="grid_5 alpha"> 22.  23. </div> 24. <div id="secondary" class="grid_2 omega"> 25.  26. </div> 27. </div> 28. <div class="clear"> </div> 29. <div class="grid_9" > 30.  31. </div> 32. </div> 33.</body> 34.</html> 35.


67 of 69 2/24/2010 4:44 PM

YUI CSS Grids and the YUI Grid Builder

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability tostack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000page layout combinations.

YUI CSS Grids and YUI Grid Builder


68 of 69 2/24/2010 4:44 PM

Copyright © 1998‐2010 David P. Heitmeyer

Layout with YUI CSS Grid

view plain print ?

<html> 1.<head> 2.<title>Lorem ipsum dolor sit</title> 3.<meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 4.<link rel="stylesheet" 5. href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css"

6.

type="text/css" /> 7.</head> 8.<body> 9.<div id="doc" class="yui-t1"> 10. <div id="hd"> 11.  12. </div> 13. <div id="bd"> 14. <div id="yui-main"> 15. <div class="yui-b"> 16. <div class="yui-gc"> 17. <div class="yui-u first"> 18.  19. </div> 20. <div class="yui-u" id="secondary"> 21.  22. </div> 23. </div> 24. </div> 25. </div> 26. <div class="yui-b"> 27.  28. </div> 29. </div> 30. <div id="ft"> 31.  32. </div> 33.</div> 34.</body> 35.</html> 36.

Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home


69 of 69 2/24/2010 4:44 PM

CSCI E 12 Fundamentals of Website Development · Presentation (Cascading Style Sheets, CSS) A form...

Documents

Transcript of CSCI E 12 Fundamentals of Website Development · Presentation (Cascading Style Sheets, CSS) A form...