CSCI E-12 - February 17, 20 · 2/17/2010 · 20 of 100 2/17/2010 1:23 P M. ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci 17. facilisis vehicula,

CSCI E‐12 Fundamentals ofWebsite Development

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

Februrary 10, 2010

Harvard UniversityExtension School

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

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

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

1 of 100 2/17/2010 1:23 PM

Ed's Weenies ‐ Frankly Fabulous!

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 100 2/17/2010 1:23 PM

We need to wrap‐up and summarize Phase 1: Define the Project , and begin thinking about Phase 2:Develop Site Structure for "Ed's Weenies — Frankly Fabulous!"

Read The Nine Pillars of Successful Web Teams by Jesse James Garrett. Right now we on workingin the lower "Strategic" area.

The book, Web redesign 2.0 : workflow that works by Kelly Goto and Emily Cotler, is aboutproject workflow. By the phases defined there, we are in "Phase 1: define the project".


3 of 100 2/17/2010 1:23 PM


4 of 100 2/17/2010 1:23 PM

United States Constitution (no external stylesheet)

W3C Core Styles applied to the US Constitution.

Chocolate Stylesheet

Midnight Stylesheet

Modernist Stylesheet

Oldstyle Stylesheet

Steely Stylesheet

Swiss Stylesheet

Traditional Stylesheet

Ultramarine Stylesheet


5 of 100 2/17/2010 1:23 PM


6 of 100 2/17/2010 1:23 PM

Harvard Summer School 2010 With CSS disabled:


7 of 100 2/17/2010 1:23 PM


8 of 100 2/17/2010 1:23 PM

Heading elements (h1,h2,etc.) and lists (ul,li) combined with CSS are very powerful. Headings can remainheadings in markup and CSS can style them as desired. Lists can remain lists in markup (navigation, contentitems, etc.) and CSS can style them as desired.


9 of 100 2/17/2010 1:23 PM

css Zen Garden: The Beauty in CSS Design. A demonstration of what can be accomplished visually throughCSS‐based desgin.


10 of 100 2/17/2010 1:23 PM


11 of 100 2/17/2010 1:23 PM


12 of 100 2/17/2010 1:23 PM

Chapters in

Web Design in a Nutshell

Head First HTML with CSS & XHTML

Westciv: CSS and web standards tutorials

Eric Meyer

meyerweb.com

Eric Meyer CSS Work

css / edge

Dan Cederholm

Publications from Dan Cederholm from SimpleBits

W3C Specifications

W3C Cascading Style Sheets

Cascading Style Sheets, Level 1

Cascading Style Sheets 2.1

W3C CSS Validation Service

Books


13 of 100 2/17/2010 1:23 PM

Cascading Style Sheets : Designing for the Web (3rd Edition) by Hakon Wium Lie and Bert Bos

Cascading Style Sheets: The Definitive Guide, 3rd Edition by Eric Meyer

Eric Meyer on CSS and More Eric Meyer on CSS

Bulletproof Web Design, 2nd edition, by Dan Cederholm

Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm

Handcrafted CSS by Dan Cederholm with Ethan Marcotte

CSS Cookbook by Christopher Schmitt

Web Sites


14 of 100 2/17/2010 1:23 PM

www.alistapart.com

www.simplebits.com

meyerweb.com/eric/css/ www.westciv.com/style_master/house


15 of 100 2/17/2010 1:23 PM

CSS 1, December 1996; Revised January 1999)

CSS 2, May 1998

CSS 2.1, Candidate Recommendation, July 2007

CSS Current Work (CSS Mobile Profile, Print Profile, TV Profile, CSS3)

CSS Validator

W3C CSS Validation Servicehttp://jigsaw.w3.org/css‐validator/


16 of 100 2/17/2010 1:23 PM

CSS Rule

Selector and Declarations

Properties and Values


17 of 100 2/17/2010 1:23 PM

Example 4.1 ‐ View example by itself (Without Styles)

Markup Style Screenshot


18 of 100 2/17/2010 1:23 PM

Three ways to bind CSS rules to XHTML/HTML markup:

style attribute in element

<style /> element in XHTML/HTML head

External CSS document, through the link element in XHTML/HTML head


19 of 100 2/17/2010 1:23 PM

Example 4.2 ‐ View example by itself

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orcinec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fuscevelit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis.Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

Markup Display Screenshot


20 of 100 2/17/2010 1:23 PM


So the full page looks like:

view plain print ?

<html xmlns="http://www.w3.org/1999/xhtml"> 1. <head> 2. <title>CSCIE-12, Example: 4.3</title> 3. <style type="text/css"> 4. p { 5. color: black; 6. background-color: teal; 7. padding: 1em; 8. font-family: helvetica, sans-serif; 9. text-align: justify; 10. margin: 2em; 11. } 12. </style> 13. </head> 14. <body> 15. <p> 16. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci17. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce18. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla conva19. sit amet urna. Maecenas condimentum hendrerit turpis. 20. </p> 21. </body> 22.</html> 23.



21 of 100 2/17/2010 1:23 PM

The link element can reference an external stylesheet.


The full source:

view plain print ?

<html xmlns="http://www.w3.org/1999/xhtml"> 1. <head> 2. <title>CSCIE-12, Example: 4.4</title> 3. <link href="example4.css" type="text/css" rel="stylesheet"/> 4. </head> 5. <body> 6. <p> 7. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci 8. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce 9. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla conval10. sit amet urna. Maecenas condimentum hendrerit turpis. 11. </p> 12. </body> 13./html> 14.



22 of 100 2/17/2010 1:23 PM

Rules can be combined. The following two sets of style rules would produce identical results. Rules canbe listed separately:

p {color: black;} 1.p {background-color: teal;} 2.p {padding: 1em;} 3.p {margin: 1em;} 4.p {font-family: helvetica, sans-serif;} 5.p {text-align: justify;} 6.

Or, rules can be grouped. Property:Value pairs need to be separated by a semicolon.

p { 1. color: black; 2. background-color: teal; 3. padding: 1em; 4. margin: 1em; 5. font-family: helvetica, sans-serif; 6. text-align: justify; 7.} 8.


23 of 100 2/17/2010 1:23 PM

Selectors can be combined into comma‐separated groups.

h1 { color: maroon; } 1.h2 { color: maroon; } 2.h3 { color: maroon; } 3.h4 { color: maroon; } 4.h5 { color: maroon; } 5.h6 { color: maroon; } 6.

We combine the selectors so that a single declaration applies to multiple selectors.

h1, h2, h3, h4, h5, h6 { color: maroon; } 1.


24 of 100 2/17/2010 1:23 PM

The class and id attributes of XHTML elements can be used in conjunction with styles.

Class names are referenced in CSS as .classname, and may or may not have an element name precedingthe period (.classname or element.classname.

Likewise, id names are referenced in CSS as #idref, and may or may not have an element name precedingthe period (#idref or element#idref.

class attributes

class attributes are used to assign class names to elements. Often a single name is assigned, but it ispossible to assign multiple names (use a space‐separated list). The same class name can be used multipletimes within a document.


id attributes

id attributes are are similar to class attributes, with the exception that id values must be unique within thedocument (i.e. you can't use the same id value more than once in a document).





25 of 100 2/17/2010 1:23 PM


26 of 100 2/17/2010 1:23 PM

Descendant selectors are used to apply styles to elements contained by other elements.




27 of 100 2/17/2010 1:23 PM

A comment in CSS begins with /* and ends with */

Comments can span multiple lines.

view plain print ?

/* a comment */ 1.body { color: black; } 2./* this is 3. a multi-line 4. comment */ 5.p { margin-top: 1em; } 6.


28 of 100 2/17/2010 1:23 PM

azimuth

background

background‐attachment

background‐color

background‐image

background‐position

background‐repeat

border

border‐bottom

border‐bottom‐color

border‐bottom‐style

border‐bottom‐width

border‐collapse

border‐color

border‐left

border‐left‐color

border‐left‐style

border‐left‐width

border‐right

border‐right‐color

border‐right‐style

border‐right‐width

border‐spacing

border‐style

border‐top

CSS Level 1 lists 53 properties that let you style properties of:

font

color

text

boxes (border, padding, margins)

classification (inline, block, list)

CSS Level 2.1 lists 115 properties.

CSS Properties

CSS Level 1 lists 53 properties.

Font Properites

font‐family

font‐style

font‐variant

font‐weight

font‐size

font

Color and Background Properties

color

background‐color

background‐image

background‐repeat



background

Text Properties

word‐spacing

letter‐spacing

text‐decoration

vertical‐align

text‐transform

text‐align

text‐indent

line‐height

Box Properties

CSS Level 2.1 lists 115 properties .


29 of 100 2/17/2010 1:23 PM

border‐top‐color

border‐top‐style

border‐top‐width

border‐width

bottom

caption‐side

clear

clip

color

content

counter‐increment

counter‐reset

cue

cue‐after

cue‐before

cursor

direction

display

elevation

empty‐cells

float

font

font‐family

font‐size

font‐style

font‐variant

font‐weight

height

left

letter‐spacing

line‐height

list‐style

list‐style‐image

pause

pause‐after

pause‐before

pitch

pitch‐range

play‐during

position

quotes

margin‐top

margin‐right

margin‐bottom

margin‐left

margin

padding‐top

padding‐right

padding‐bottom

padding‐left

padding





border‐width

border‐color

border‐style

border‐top

border‐right

border‐bottom

border‐left

border

width

height

float

clear

display

Classification Properties

white‐space

list‐style‐type


list‐style‐position

list‐style


30 of 100 2/17/2010 1:23 PM


31 of 100 2/17/2010 1:23 PM

Properties are typically inherited by children elements.




32 of 100 2/17/2010 1:23 PM

UA = User‐Agent = HTTP Client = Web Browser

Take a look at the sample default stylesheets for HTML 2.0 and HTML 4.0 listed in the Appendices ofthe CSS1 and CSS2 Recommendations.

Sample style sheet for HTML 2.0 [Local copy]

Default style sheet for HTML 4.0 [Local copy]

HTML 4 Sample default CSS


33 of 100 2/17/2010 1:23 PM

html, address, 1.blockquote, 2.body, dd, div, 3.dl, dt, fieldset, form, 4.frame, frameset, 5.h1, h2, h3, h4, 6.h5, h6, noframes, 7.ol, p, ul, center, 8.dir, hr, menu, pre { display: block } 9.li { display: list-item } 10.head { display: none } 11.table { display: table } 12.tr { display: table-row } 13.thead { display: table-header-group } 14.tbody { display: table-row-group } 15.tfoot { display: table-footer-group } 16.col { display: table-column } 17.colgroup { display: table-column-group } 18.td, th { display: table-cell; } 19.caption { display: table-caption } 20.th { font-weight: bolder; text-align: center } 21.caption { text-align: center } 22.body { margin: 8px; line-height: 1.12 } 23.h1 { font-size: 2em; margin: .67em 0 } 24.h2 { font-size: 1.5em; margin: .75em 0 } 25.h3 { font-size: 1.17em; margin: .83em 0 } 26.h4, p, 27.blockquote, ul, 28.fieldset, form, 29.ol, dl, dir, 30.menu { margin: 1.12em 0 } 31.h5 { font-size: .83em; margin: 1.5em 0 } 32.h6 { font-size: .75em; margin: 1.67em 0 } 33.h1, h2, h3, h4, 34.h5, h6, b, 35.strong { font-weight: bolder } 36.blockquote { margin-left: 40px; margin-right: 40px } 37.i, cite, em, 38.var, address { font-style: italic } 39.pre, tt, code, 40.kbd, samp { font-family: monospace } 41.pre { white-space: pre } 42.button, textarea, 43.input, object, 44.select { display:inline-block; } 45.big { font-size: 1.17em } 46.small, sub, sup { font-size: .83em } 47.sub { vertical-align: sub } 48.sup { vertical-align: super } 49.table { border-spacing: 2px; } 50.thead, tbody, 51.tfoot { vertical-align: middle } 52.td, th { vertical-align: inherit } 53.s, strike, del { text-decoration: line-through } 54.hr { border: 1px inset } 55.ol, ul, dir, 56.menu, dd { margin-left: 40px } 57.ol { list-style-type: decimal } 58.ol ul, ul ol, 59.ul ul, ol ol { margin-top: 0; margin-bottom: 0 } 60.u, ins { text-decoration: underline } 61.br:before { content: "\A" } 62.:before, :after { white-space: pre-line } 63.center { text-align: center } 64.abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em } 65.:link, :visited { text-decoration: underline } 66.:focus { outline: thin dotted invert } 67. 68./* Begin bidirectionality settings (do not change) */ 69.BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } 70.


34 of 100 2/17/2010 1:23 PM

HTML 2 Sample default CSS

BODY { 1. margin: 1em; 2. font-family: serif; 3. line-height: 1.1; 4. background: white; 5. color: black; 6.} 7. 8.H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, 9.DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL { 10. display: block } 11. 12.B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, 13.IMG, SPAN { display: inline } 14. 15.LI { display: list-item } 16. 17.H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em } 18.H5, H6 { margin-top: 1em } 19.H1 { text-align: center } 20.H1, H2, H4, H6 { font-weight: bold } 21.H3, H5 { font-style: italic } 22. 23.H1 { font-size: xx-large } 24.H2 { font-size: x-large } 25.H3 { font-size: large } 26. 27.B, STRONG { font-weight: bolder } /* relative to the parent */ 28.I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic } 29.PRE, TT, CODE, KBD, SAMP { font-family: monospace } 30. 31.PRE { white-space: pre } 32. 33.ADDRESS { margin-left: 3em } 34.BLOCKQUOTE { margin-left: 3em; margin-right: 3em } 35. 36.UL, DIR { list-style: disc } 37.OL { list-style: decimal } 38.MENU { margin: 0 } /* tight formatting */ 39.LI { margin-left: 3em } 40. 41.DT { margin-bottom: 0 } 42.DD { margin-top: 0; margin-left: 3em } 43. 44.HR { border-top: solid } /* 'border-bottom' could also have been used */ 45. 46.A:link { color: blue } /* unvisited link */ 47.A:visited { color: red } /* visited links */ 48.A:active { color: lime } /* active links */ 49. 50./* setting the anchor border around IMG elements 51. requires contextual selectors */ 52. 53.A:link IMG { border: 2px solid blue } 54.A:visited IMG { border: 2px solid red } 55.A:active IMG { border: 2px solid lime } 56. 57.


35 of 100 2/17/2010 1:23 PM

font‐family

font‐style

font‐variant

font‐weight

font‐size

font


36 of 100 2/17/2010 1:23 PM


Garamond, Times, or serif (generic family)Calibri, Arial, Helvetica or sans‐serif (generic family)Lucida Console, Courier or monospace (generic family)

Fantasy (generic family)Cursive (generic family)



37 of 100 2/17/2010 1:23 PM

typophile.com:

Italic

Oblique


view plain print ?

<div style="font-style: normal;">Normal font-style</div> 1.<div style="font-style: italic;">Italic font-style</div> 2.<div style="font-style: oblique;">Oblique font-style</div> 3.

Markup Display


38 of 100 2/17/2010 1:23 PM

font‐variant


view plain print ?

<div style="font-variant: small-caps;">This should be rendered in small-caps. 1.<div style="font-variant: normal;">Here we revert to "normal". 2.</div> 3.</div> 4.

font‐weight

values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900


view plain print ?

<div> 1.font-weight can be used to make things <span style="font-weight: bold">bold</span>.

2.

</div> 3.

Markup Display

Markup Display


39 of 100 2/17/2010 1:23 PM


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna portarisus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crassollicitudin, orci nec facilisis vehicula, neque urna porta risus, utsagittis enim velit at orci.



40 of 100 2/17/2010 1:23 PM

As a general guideline with CSS, relative measurements are better than absolute measurements.

Relative

Relative to UA settings:xx-small | x-small | small | medium | large | x-large | xx-large

Relative to context:larger | smaller

Percentage (%)

"em" units

Absolute

"pt" sizes (8pt, 10pt, 12pt)


41 of 100 2/17/2010 1:23 PM

In CSS, there are various shorthand properties; these allow you to define several properties in a singleplace.

The font shorthand property allows you to set:[font-style | font-variant | font-weight ]? font-size[/line-height]? font-family




42 of 100 2/17/2010 1:23 PM

word‐spacing

letter‐spacing

text‐decoration

vertical‐align

text‐transform

text‐align

text‐indent

line‐height

Align blocks of text left, right, center, and justified.


Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Crassollicitudin, orci nec facilisisvehicula, neque urna porta risus,ut sagittis enim velit at orci.Fusce velit. Integer sapien enim,rhoncus vitae, cursus non,commodo vitae, felis. Nullaconvallis ante sit amet urna.Maecenas condimentumhendrerit turpis.

Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Cras

sollicitudin, orci nec facilisisvehicula, neque urna porta risus,

ut sagittis enim velit at orci.Fusce velit. Integer sapien enim,

rhoncus vitae, cursus non,commodo vitae, felis. Nullaconvallis ante sit amet urna.

Maecenas condimentumhendrerit turpis.

Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Cras

sollicitudin, orci nec facilisisvehicula, neque urna porta risus,

ut sagittis enim velit at orci.Fusce velit. Integer sapien enim,

rhoncus vitae, cursus non,



43 of 100 2/17/2010 1:23 PM

commodo vitae, felis. Nullaconvallis ante sit amet urna.

Maecenas condimentumhendrerit turpis.

Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Crassollicitudin, orci nec facilisisvehicula, neque urna porta risus,ut sagittis enim velit at orci.Fusce velit. Integer sapien enim,rhoncus vitae, cursus non,commodo vitae, felis. Nullaconvallis ante sit amet urna.Maecenas condimentumhendrerit turpis.


44 of 100 2/17/2010 1:23 PM

Mozilla Firefox

Web Developer Extension for Firefox


45 of 100 2/17/2010 1:23 PM

Firebug: Web Development Evolved


46 of 100 2/17/2010 1:23 PM

Edit CSS in Firebug: Disable CSS Rules in Firebug:


47 of 100 2/17/2010 1:23 PM

Show computed styles in Firebug:


48 of 100 2/17/2010 1:23 PM


view plain print ?

<h1>Lorem Ipsum Dolor</h1> 1. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, or2. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce 3. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla conval4.

sit amet urna. Maecenas condimentum hendrerit turpis. </p> 5. <ul> 6. <li>Lorem</li> 7. <li>Ipsum</li> 8. <li>Dolor</li> 9. </ul> 10.

Markup Style


49 of 100 2/17/2010 1:23 PM

Lengthem, pt, ex, mm, cm, in, pxe.g. 1.0em

Percentagee.g. 10%

URLurl(url goes here)e.g. url(../images/banner.png)

Colorname, hexadecimal, rgb valuee.g.

name

aqua

hexadecimal

#ffd

#60ae9f

rgb (percent or numeric)

rgb(24,50,255)

rgb(5%,20%,75%)


50 of 100 2/17/2010 1:23 PM

Wikipedia Web Colors

Name

As defined in HTML: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,teal, white, yellow

RGB Color Space

256 colors in each channel (Red, Green, Blue). Values can be

decimal numbers (0 to 255)

hexadecimal numbers (00 to ff)

percentages (0 to 100%)

The following are all equivalent ways of defining a shade of orange:

rgb(100%,66%,33%)

rgb(255,168,84)


51 of 100 2/17/2010 1:23 PM

#ffa854

Example 4.17 ‐ Background Color ‐ View example by itself

view plain print ?

<div style="background-color: rgb(100%,66%,33%); padding: 0.5em; ; margin: 0.25em;">

1.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 2.</div> 3.<div style="background-color: #ffa854; padding: 0.5em; margin: 0.25em; "> 4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 5.</div> 6.<div style="background-color: rgb(255,168,84); padding: 0.5em; ; margin: 0.25em;">

7.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 8.</div> 9.

Markup Display


52 of 100 2/17/2010 1:23 PM

Visibone Color Laboratory

Percent

Red 0% 20% 40% 60% 80% 100%

Green 0% 20% 40% 60% 80% 100%

Blue 0% 20% 40% 60% 80% 100%

Decimal

Red 0 51 102 153 204 255

Green 0 51 102 153 204 255

Blue 0 51 102 153 204 255

Hexadecimal

Red 00 33 66 99 cc ff

Green 00 33 66 99 cc ff

Blue 00 33 66 99 cc ff

Web Color Cube


53 of 100 2/17/2010 1:23 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):


54 of 100 2/17/2010 1:23 PM

margin

margin‐top

margin‐right

margin‐bottom

margin‐left

margin (shorthand)

padding

padding‐top

padding‐right

padding‐bottom

padding‐left

padding (shorthand)

border





border‐width

border‐color

border‐style

border‐top

border‐right

border‐bottom

border‐left

border


55 of 100 2/17/2010 1:23 PM

Example 4.18 ‐ Border Styles ‐ View example by itself (Without Styles)



56 of 100 2/17/2010 1:23 PM


57 of 100 2/17/2010 1:23 PM


58 of 100 2/17/2010 1:23 PM

Example 4.19 ‐ Margin, Padding, Border ‐ View example by itself (Without Styles)



59 of 100 2/17/2010 1:23 PM

Stay out of "TRBL" (top right bottom left) for padding and margin shorthand.

Values that are present are used to fill in for values that are not:

padding: 1px 2px 3px 4px

T = 1px; R = 2px; B = 3px; L = 2px

padding: 1px 2px 3px

T = 1px; R = L = 2px; B = 3px;

padding: 1px 2px

T = B = 1px; R = L = 2px;

padding: 1px

T = R = B = L = 1px


60 of 100 2/17/2010 1:23 PM

background‐color

background‐image

background‐repeat



background (a shorthand property)

Background Image with CSS

A background image with CSS:

Example 4.20 ‐ Background Image with CSS ‐ View example by itself (Without Styles)

Repeat

Repeat on y‐axis only:

Example 4.21 ‐ background‐repeat: repeat‐y ‐ View example by itself (Without Styles)




61 of 100 2/17/2010 1:23 PM

Center and Fix

Center, Don't Repeat and Fix position:

Example 4.22 ‐ no‐repeat and fixed ‐ View example by itself (Without Styles)



62 of 100 2/17/2010 1:23 PM

Here we use the following images as backgrounds in div elements.

wood.jpg marble.jpg water.jpg

Example 4.23 ‐ background images ‐ View example by itself (Without Styles)



63 of 100 2/17/2010 1:23 PM

Instead of having an img element within the XHTML, we can include design images in the CSS. This exampledisplays the flag.png with the h1 of the markup.

Example 4.24 ‐ background images ‐ View example by itself (Without Styles)



64 of 100 2/17/2010 1:23 PM

See "Web Design in a Nutshell" → Chapter 24, "CSS Techniquest" → 24.5 "Image Replacement"

Revised Image Replacement from mezzoblue shows 10 different techniques.

Use an image for the header of the page, but have a text equivalent.

Image is 50×900 px.


65 of 100 2/17/2010 1:23 PM

Set height to 0, overflow to hidden

Set padding and have background image show through padding

Example 4.25 ‐ Leahy/Langridge Image Replacement (LIR) ‐ View example by itself (Without Styles)



66 of 100 2/17/2010 1:23 PM


67 of 100 2/17/2010 1:23 PM


68 of 100 2/17/2010 1:23 PM

Use a negative indent for text

Example 4.26 ‐ Rundle/Phark Image Replacement ‐ View example by itself (Without Styles)



69 of 100 2/17/2010 1:23 PM


70 of 100 2/17/2010 1:23 PM

"Normal" size:

"font‐size set to 300%":

The image (5px × 150px; 254 bytes):


71 of 100 2/17/2010 1:23 PM

Example 4.27 ‐ tiling and image size ‐ View example by itself (Without Styles)

view plain print ?

<table id="stats"> 1.<thead> 2.<tr><th rowspan="1" colspan="1">Year</th><th rowspan="1" colspan="1">Championship ga3.</thead> 4.<tbody> 5.<tr><td rowspan="1" colspan="1">2009</td><td rowspan="1" colspan="1">UNC def. Michig6.<tr><td rowspan="1" colspan="1">2008</td><td rowspan="1" colspan="1">Kansas def. Mem7.<tr><td rowspan="1" colspan="1">2007</td><td rowspan="1" colspan="1">Florida def. Oh8.<tr><td rowspan="1" colspan="1">2006</td><td rowspan="1" colspan="1">Florida def. UC9.<tr><td rowspan="1" colspan="1">2005</td><td rowspan="1" colspan="1">UNC def. Illino10.<tr><td rowspan="1" colspan="1">2004</td><td rowspan="1" colspan="1">UConn def. Geor11.<tr><td rowspan="1" colspan="1">2003</td><td rowspan="1" colspan="1">Syracuse def. K12.<tr><td rowspan="1" colspan="1">2002</td><td rowspan="1" colspan="1">Maryland def. I13.<tr><td rowspan="1" colspan="1">2001</td><td rowspan="1" colspan="1">Duke def. Arizo14.<tr><td rowspan="1" colspan="1">2000</td><td rowspan="1" colspan="1">Michigan State 15.<tr><td rowspan="1" colspan="1">1999</td><td rowspan="1" colspan="1">UConn def. Duke16.<tr><td rowspan="1" colspan="1">1998</td><td rowspan="1" colspan="1">Kentucky def. U17.</tbody> 18.</table> 19. 20.

Markup Style


72 of 100 2/17/2010 1:23 PM

list‐style‐type

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


list‐style‐position

list‐stylea shorthand property

Ordered List

An ordered list:

Example 4.28 ‐ 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


73 of 100 2/17/2010 1:23 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 4.29 ‐ 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


74 of 100 2/17/2010 1:23 PM

How to accomplish this without CSS.

Example 4.30 ‐ 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


75 of 100 2/17/2010 1:23 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 */}


76 of 100 2/17/2010 1:23 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


77 of 100 2/17/2010 1:23 PM

first-letter pseudo element.

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

first-line pseudo element

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

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





78 of 100 2/17/2010 1:23 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 4.34 ‐ Links ‐ View example by itself (Without Styles)



79 of 100 2/17/2010 1:23 PM

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



80 of 100 2/17/2010 1:23 PM

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

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

Stylesheet Origin

author stylesheet

reader stylesheet

UA (Web Browser)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.


81 of 100 2/17/2010 1:23 PM

Example 4.36 ‐ 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


82 of 100 2/17/2010 1:23 PM


83 of 100 2/17/2010 1:23 PM


84 of 100 2/17/2010 1:23 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

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.


85 of 100 2/17/2010 1:23 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.


86 of 100 2/17/2010 1:23 PM

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

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

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




87 of 100 2/17/2010 1:23 PM

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

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

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




88 of 100 2/17/2010 1:23 PM


89 of 100 2/17/2010 1:23 PM

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

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

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




90 of 100 2/17/2010 1:23 PM

Float: right

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

Float: left

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




91 of 100 2/17/2010 1:23 PM

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

Example 4.45 ‐ 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 4.46 ‐ float left and right and parent div ‐ View example by itself (Without Styles)




92 of 100 2/17/2010 1:23 PM

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

Example 4.47 ‐ 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 4.48 ‐ float and margin to achieve a column effect ‐ View example by itself (Without Styles)




93 of 100 2/17/2010 1:23 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


94 of 100 2/17/2010 1:23 PM

Solar System

>


95 of 100 2/17/2010 1:23 PM

It is important to set height and width !

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

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




96 of 100 2/17/2010 1:23 PM


97 of 100 2/17/2010 1:23 PM

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

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

Full list for the American League:



98 of 100 2/17/2010 1:23 PM

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

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

Full list for the American League:



99 of 100 2/17/2010 1:23 PM

Copyright © 1998‐2010 David P. Heitmeyer

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


100 of 100 2/17/2010 1:23 PM

Documents

CSCI E-12 - February 17, 20 · 2/17/2010 · 20 of 100 2/17/2010 1:23 P M. ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci 17. facilisis vehicula,