├── chapter03 ├── bordernone.css ├── borderbasic.css ├── borderclass.css ├── tick.gif ├── arrow.gif ├── boxbg.gif ├── dotty.gif ├── food1.jpg ├── food2.jpg ├── opaque.png ├── recipes.gif ├── recipes.png ├── stones.jpg ├── boxheaderbg.jpg ├── unused │ ├── border.gif │ ├── chilli1.jpg │ ├── chilli2.jpg │ ├── dotty-y.gif │ ├── boxheader.jpg │ ├── peppers1.jpg │ ├── peppers_bg.jpg │ ├── mini_chilli.jpg │ ├── background-flip.jpg │ ├── imageborders.css │ └── imageborders.html ├── doubleborder-bg.gif ├── background-norepeat.jpg ├── background-repeatx.jpg ├── background-repeaty.jpg ├── borderalbum.css ├── doubleborder.css ├── doubleborder-bg.css ├── backgroundfixed.css ├── backgroundposition.css ├── borderbasic.html ├── bordernone.html ├── borderclass.html ├── doubleborder.html ├── borderalbum.html ├── doubleborder-bg.html ├── backgrounds.css ├── backgrounds2.css ├── backgrounds5.css ├── backgrounds4.css ├── backgrounds3.css ├── backgrounds.html ├── backgroundposition.html ├── backgroundfixed.html ├── backgrounds4.html ├── backgrounds2.html ├── backgrounds5.html └── backgrounds3.html ├── chapter02 ├── textdecoration.css ├── bullet.gif ├── textdecoration2.css ├── relative.css ├── listsmallmargin.css ├── basicfont.css ├── nesting.css ├── textdecoration3.css ├── indent2.css ├── firstchildwithclass.css ├── firstchild.css ├── zeropagegutter.css ├── zeropagemargin.css ├── listtype.css ├── listtype2.css ├── headingunderline.css ├── leading.css ├── listinline.css ├── listimage.css ├── justify.css ├── headingunderline2.css ├── center.css ├── indent.css ├── headingcolor.css ├── capitalize.css ├── listnomargin.css ├── uppercase.css ├── headingnospace.css ├── hilite.css ├── textdecoration4.css ├── hrstyle.css ├── firstchild.html ├── linktypes.css ├── firstchildwithclass.html ├── basicfont.html ├── relative.html ├── justify.html ├── leading.html ├── nesting.html ├── center.html ├── headingcolor.html ├── indent.html ├── hrstyle.html ├── listinline.html ├── textdecoration.html ├── textdecoration2.html ├── textdecoration3.html ├── textdecoration4.html ├── uppercase.html ├── capitalize.html ├── hilite.html ├── headingnospace.html ├── headingunderline.html ├── headingunderline2.html ├── linktypes.html ├── listimage.html ├── listtype.html ├── listtype2.html ├── listnomargin.html ├── listsmallmargin.html ├── zeropagegutter.html ├── zeropagemargin.html ├── indent2.html └── paragraph-1em.html ├── chapter07 ├── x.gif ├── arrow.gif ├── boxbg.gif ├── opaque.png ├── background-repeatx.jpg ├── basic_default.css ├── basic_basic.css ├── doctype-compliance.html ├── doctype-quirks.html ├── bgsleight.css ├── basicstyles.html ├── bgsleight.html └── bgsleight.js ├── chapter04 ├── peppers.gif ├── reflectonav.gif ├── world_link.png ├── link_icon_pdf.gif ├── images │ ├── tab_left.gif │ ├── tab_right.gif │ ├── tab_active_left.gif │ └── tab_active_right.gif ├── link_icon_email.gif ├── link_icon_external.gif ├── replaceimages_.css ├── images.html ├── listnav2.html ├── images.css ├── listnav_horiz.html ├── external_links.css ├── listnav_horiz.css ├── listnav1.css ├── listnav1.html ├── replaceimages.css ├── listnav_button.html ├── image_nav.html ├── replaceimages.html ├── replaceimages_.html ├── listnav_sub.html ├── listnav2.css ├── sitemap.css ├── listnav_button.css ├── sitemap.html ├── external_links.html ├── menus.css ├── menus.html ├── listnav_sub.css ├── image_nav.css ├── tabs.css └── tabs.html ├── chapter09 ├── arrow.gif ├── kitchen.jpg ├── nav-bg.jpg ├── sidebar.gif ├── thumb1.jpg ├── thumb2.jpg ├── thumb3.jpg ├── thumb4.jpg ├── thumb5.jpg ├── thumb6.jpg ├── thumb7.jpg ├── thumb8.jpg ├── topleft.gif ├── NiftyCube.zip ├── peppers1.jpg ├── shadow-bg.gif ├── shadow-bg.jpg ├── sm-tomato.jpg ├── tomato_bg.jpg ├── topright.gif ├── bottomleft.gif ├── bottomright.gif ├── stage-logo.gif ├── black80percent.png ├── recipe-header.jpg ├── shadow-bottom.gif ├── shadow-bottom.jpg ├── corners3.css ├── corners1.css ├── center.css ├── position.css ├── position2.css ├── position3.css ├── corners2.css ├── gallery.css ├── 3col-table.css ├── 3col-table-ie67.css ├── 3col-alt.css ├── corners3-start.html ├── corners1.html ├── slogan-align.html ├── position.html ├── position3.html ├── slogan-align.css ├── position2.html ├── corners2.html ├── corners3.html ├── padding.html ├── niftyCorners.css ├── margin.html ├── gallery.html ├── center.html ├── float.html ├── inline-block.html ├── 2col-reverse.css ├── float2.html ├── 2col.css ├── 2col-fixedwidth.css ├── 2col-fixedwidth-float.css ├── 2col-fixedwidth-table.css ├── 3col.css ├── float-clear.html ├── 2col-fixedwidth.html ├── 2col-fixedwidth-float.html └── 2col-fixedwidth-shadow.html ├── shared ├── book-cover.jpg ├── sitepoint-logo.gif └── archive.css ├── chapter05 ├── borderstyles.css ├── table.css ├── colgroups.css ├── columns.css ├── spreadsheet.css ├── alternate.css ├── hiliterow.css ├── cal_mini.css ├── cal.css ├── columns.html ├── colgroups.html ├── alternate.html ├── cal_mini.html ├── table.html ├── spreadsheet.html ├── borderstyles.html └── hiliterow.html ├── chapter06 ├── textbutton.css ├── inline.css ├── textonly.css ├── fields.css ├── elements.css ├── tablefree.css ├── spreadsheet.css ├── textbutton.html ├── inline.html ├── spreadsheet2.css ├── fields.html ├── fieldset.css ├── accesskeys.css ├── select.css ├── select.html ├── tablefree.html ├── elements.html ├── textonly.html ├── fieldset.html └── accesskeys.html ├── chapter08 ├── defaulttext.css ├── defaultcolors.css ├── highcontrast2.css ├── print.css ├── zoom.css ├── main2.css ├── main.css ├── highcontrast.css ├── print-stylesheet.html ├── alternate-stylesheets.html └── alternate-stylesheets2.html └── index.html /chapter03/bordernone.css: -------------------------------------------------------------------------------- 1 | img { 2 | border: none; 3 | } -------------------------------------------------------------------------------- /chapter03/borderbasic.css: -------------------------------------------------------------------------------- 1 | img { 2 | border: 1px solid #000000; 3 | } -------------------------------------------------------------------------------- /chapter03/borderclass.css: -------------------------------------------------------------------------------- 1 | .imgborder { 2 | border: 1px solid #000000; 3 | } -------------------------------------------------------------------------------- /chapter02/textdecoration.css: -------------------------------------------------------------------------------- 1 | a:link, a:visited { 2 | text-decoration: none; 3 | } -------------------------------------------------------------------------------- /chapter07/x.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter07/x.gif -------------------------------------------------------------------------------- /chapter03/tick.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/tick.gif -------------------------------------------------------------------------------- /chapter02/bullet.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter02/bullet.gif -------------------------------------------------------------------------------- /chapter03/arrow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/arrow.gif -------------------------------------------------------------------------------- /chapter03/boxbg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/boxbg.gif -------------------------------------------------------------------------------- /chapter03/dotty.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/dotty.gif -------------------------------------------------------------------------------- /chapter03/food1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/food1.jpg -------------------------------------------------------------------------------- /chapter03/food2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/food2.jpg -------------------------------------------------------------------------------- /chapter03/opaque.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/opaque.png -------------------------------------------------------------------------------- /chapter03/recipes.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/recipes.gif -------------------------------------------------------------------------------- /chapter03/recipes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/recipes.png -------------------------------------------------------------------------------- /chapter03/stones.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/stones.jpg -------------------------------------------------------------------------------- /chapter04/peppers.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter04/peppers.gif -------------------------------------------------------------------------------- /chapter07/arrow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter07/arrow.gif -------------------------------------------------------------------------------- /chapter07/boxbg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter07/boxbg.gif -------------------------------------------------------------------------------- /chapter07/opaque.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter07/opaque.png -------------------------------------------------------------------------------- /chapter09/arrow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/arrow.gif -------------------------------------------------------------------------------- /chapter09/kitchen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/kitchen.jpg -------------------------------------------------------------------------------- /chapter09/nav-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/nav-bg.jpg -------------------------------------------------------------------------------- /chapter09/sidebar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/sidebar.gif -------------------------------------------------------------------------------- /chapter09/thumb1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/thumb1.jpg -------------------------------------------------------------------------------- /chapter09/thumb2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/thumb2.jpg -------------------------------------------------------------------------------- /chapter09/thumb3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/thumb3.jpg -------------------------------------------------------------------------------- /chapter09/thumb4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/thumb4.jpg -------------------------------------------------------------------------------- /chapter09/thumb5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/thumb5.jpg -------------------------------------------------------------------------------- /chapter09/thumb6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/thumb6.jpg -------------------------------------------------------------------------------- /chapter09/thumb7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/thumb7.jpg -------------------------------------------------------------------------------- /chapter09/thumb8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/thumb8.jpg -------------------------------------------------------------------------------- /chapter09/topleft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/topleft.gif -------------------------------------------------------------------------------- /shared/book-cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/shared/book-cover.jpg -------------------------------------------------------------------------------- /chapter02/textdecoration2.css: -------------------------------------------------------------------------------- 1 | a:link, a:visited { 2 | text-decoration: underline overline; 3 | } -------------------------------------------------------------------------------- /chapter09/NiftyCube.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/NiftyCube.zip -------------------------------------------------------------------------------- /chapter09/peppers1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/peppers1.jpg -------------------------------------------------------------------------------- /chapter09/shadow-bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/shadow-bg.gif -------------------------------------------------------------------------------- /chapter09/shadow-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/shadow-bg.jpg -------------------------------------------------------------------------------- /chapter09/sm-tomato.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/sm-tomato.jpg -------------------------------------------------------------------------------- /chapter09/tomato_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/tomato_bg.jpg -------------------------------------------------------------------------------- /chapter09/topright.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/topright.gif -------------------------------------------------------------------------------- /chapter02/relative.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-size: small; 3 | } 4 | 5 | em { 6 | font-size: larger; 7 | } -------------------------------------------------------------------------------- /chapter03/boxheaderbg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/boxheaderbg.jpg -------------------------------------------------------------------------------- /chapter04/reflectonav.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter04/reflectonav.gif -------------------------------------------------------------------------------- /chapter04/world_link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter04/world_link.png -------------------------------------------------------------------------------- /chapter09/bottomleft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/bottomleft.gif -------------------------------------------------------------------------------- /chapter09/bottomright.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/bottomright.gif -------------------------------------------------------------------------------- /chapter09/stage-logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/stage-logo.gif -------------------------------------------------------------------------------- /shared/sitepoint-logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/shared/sitepoint-logo.gif -------------------------------------------------------------------------------- /chapter03/unused/border.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/unused/border.gif -------------------------------------------------------------------------------- /chapter03/unused/chilli1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/unused/chilli1.jpg -------------------------------------------------------------------------------- /chapter03/unused/chilli2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/unused/chilli2.jpg -------------------------------------------------------------------------------- /chapter03/unused/dotty-y.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/unused/dotty-y.gif -------------------------------------------------------------------------------- /chapter04/link_icon_pdf.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter04/link_icon_pdf.gif -------------------------------------------------------------------------------- /chapter09/black80percent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/black80percent.png -------------------------------------------------------------------------------- /chapter09/recipe-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/recipe-header.jpg -------------------------------------------------------------------------------- /chapter09/shadow-bottom.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/shadow-bottom.gif -------------------------------------------------------------------------------- /chapter09/shadow-bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter09/shadow-bottom.jpg -------------------------------------------------------------------------------- /chapter03/doubleborder-bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/doubleborder-bg.gif -------------------------------------------------------------------------------- /chapter03/unused/boxheader.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/unused/boxheader.jpg -------------------------------------------------------------------------------- /chapter03/unused/peppers1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/unused/peppers1.jpg -------------------------------------------------------------------------------- /chapter03/unused/peppers_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/unused/peppers_bg.jpg -------------------------------------------------------------------------------- /chapter04/images/tab_left.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter04/images/tab_left.gif -------------------------------------------------------------------------------- /chapter04/images/tab_right.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter04/images/tab_right.gif -------------------------------------------------------------------------------- /chapter04/link_icon_email.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter04/link_icon_email.gif -------------------------------------------------------------------------------- /chapter02/listsmallmargin.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style-type: none; 3 | padding-left: 5px; 4 | margin-left: 0; 5 | } -------------------------------------------------------------------------------- /chapter03/background-norepeat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/background-norepeat.jpg -------------------------------------------------------------------------------- /chapter03/background-repeatx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/background-repeatx.jpg -------------------------------------------------------------------------------- /chapter03/background-repeaty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/background-repeaty.jpg -------------------------------------------------------------------------------- /chapter03/unused/mini_chilli.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/unused/mini_chilli.jpg -------------------------------------------------------------------------------- /chapter04/link_icon_external.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter04/link_icon_external.gif -------------------------------------------------------------------------------- /chapter07/background-repeatx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter07/background-repeatx.jpg -------------------------------------------------------------------------------- /chapter02/basicfont.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: #800080; 3 | font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 4 | } -------------------------------------------------------------------------------- /chapter03/unused/background-flip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter03/unused/background-flip.jpg -------------------------------------------------------------------------------- /chapter04/images/tab_active_left.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter04/images/tab_active_left.gif -------------------------------------------------------------------------------- /chapter04/images/tab_active_right.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/cssant3/HEAD/chapter04/images/tab_active_right.gif -------------------------------------------------------------------------------- /chapter09/corners3.css: -------------------------------------------------------------------------------- 1 | .curvebox { 2 | width: 250px; 3 | padding: 20px; 4 | background-color: #B0C4DE; 5 | color: #33527B; 6 | } -------------------------------------------------------------------------------- /chapter07/basic_default.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: #cc0022; 3 | margin: 0; 4 | } 5 | 6 | .content { 7 | background-color: #ececec; 8 | padding: 0.6em; 9 | } -------------------------------------------------------------------------------- /chapter02/nesting.css: -------------------------------------------------------------------------------- 1 | div { 2 | padding: 10px; 3 | border: 4px solid #ccc; 4 | width: 350px; 5 | } 6 | div, p, em, a, code { 7 | font-size: 130%; 8 | } -------------------------------------------------------------------------------- /chapter05/borderstyles.css: -------------------------------------------------------------------------------- 1 | .datatable { 2 | border: 14px dotted #338BA6; 3 | border-collapse: collapse; 4 | } 5 | .test { 6 | border: 14px outset #338BA6; 7 | } -------------------------------------------------------------------------------- /chapter02/textdecoration3.css: -------------------------------------------------------------------------------- 1 | a:link, a:visited, a:hover, a:active { 2 | text-decoration: underline; 3 | color: #6A5ACD; 4 | background-color: transparent; 5 | } -------------------------------------------------------------------------------- /chapter06/textbutton.css: -------------------------------------------------------------------------------- 1 | body { 2 | font : 0.9em Arial, Helvetica, sans-serif; 3 | } 4 | .btn { 5 | background-color: transparent; 6 | border: none; 7 | padding: 0; 8 | } -------------------------------------------------------------------------------- /chapter05/table.css: -------------------------------------------------------------------------------- 1 | .datatable { 2 | border: 1px solid #338BA6; 3 | border-collapse: collapse; 4 | } 5 | 6 | .datatable td, .datatable th { 7 | border: 1px solid #73C0D4; 8 | } -------------------------------------------------------------------------------- /chapter08/defaulttext.css: -------------------------------------------------------------------------------- 1 | #navigation { 2 | width: 200px; 3 | } 4 | #content { 5 | margin-left: 260px; 6 | margin-right: 60px; 7 | } 8 | #banner { 9 | height: 40px; 10 | } -------------------------------------------------------------------------------- /chapter02/indent2.css: -------------------------------------------------------------------------------- 1 | p { 2 | font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | line-height: 2.0; 4 | text-indent: 20px; 5 | } 6 | .indent { 7 | text-indent: 20px; 8 | } -------------------------------------------------------------------------------- /chapter02/firstchildwithclass.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | ul { 5 | color:black; 6 | } 7 | 8 | li.unusual { 9 | color: red; 10 | } -------------------------------------------------------------------------------- /chapter02/firstchild.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | ul { 5 | color:black; 6 | } 7 | 8 | li:first-child { 9 | color: red; 10 | } 11 | -------------------------------------------------------------------------------- /chapter02/zeropagegutter.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body { 6 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 7 | } 8 | h1 { 9 | font-size: 1.6em; 10 | } -------------------------------------------------------------------------------- /chapter02/zeropagemargin.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body { 6 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 7 | } 8 | h1 { 9 | font-size: 1.6em; 10 | } -------------------------------------------------------------------------------- /chapter09/corners1.css: -------------------------------------------------------------------------------- 1 | .curvebox { 2 | width: 250px; 3 | padding: 1em; 4 | background-color: #B0C4DE; 5 | color: #33527B; 6 | -moz-border-radius: 25px; 7 | -webkit-border-radius: 25px; 8 | } -------------------------------------------------------------------------------- /chapter02/listtype.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | h1 { 5 | font-size: 1.6em; 6 | padding: 0.2em; 7 | } 8 | ul { 9 | list-style-type: square; 10 | } -------------------------------------------------------------------------------- /chapter02/listtype2.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | h1 { 5 | font-size: 1.6em; 6 | padding: 0.2em; 7 | } 8 | ul { 9 | list-style-type: none; 10 | } -------------------------------------------------------------------------------- /chapter02/headingunderline.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | h1 { 5 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 6 | text-decoration: underline; 7 | } -------------------------------------------------------------------------------- /chapter02/leading.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | padding: 0.2em; 4 | } 5 | p { 6 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 7 | line-height: 2.0; 8 | } -------------------------------------------------------------------------------- /chapter02/listinline.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | h1 { 5 | font-size: 1.6em; 6 | padding: 0.2em; 7 | } 8 | ul.horiz li { 9 | display: inline; 10 | } -------------------------------------------------------------------------------- /chapter02/listimage.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | h1 { 5 | font-size: 1.6em; 6 | padding: 0.2em; 7 | } 8 | ul { 9 | list-style-image: url(bullet.gif); 10 | } -------------------------------------------------------------------------------- /chapter03/borderalbum.css: -------------------------------------------------------------------------------- 1 | 2 | #album { 3 | margin: 30px; 4 | list-style:none; 5 | } 6 | 7 | #album li { 8 | float: left; 9 | margin-right: 30px; 10 | } 11 | 12 | #album img { 13 | border: 1px solid #000000; 14 | } -------------------------------------------------------------------------------- /chapter02/justify.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | padding: 0.2em; 4 | } 5 | p { 6 | text-align: justify; 7 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 8 | line-height: 2.0; 9 | } -------------------------------------------------------------------------------- /chapter02/headingunderline2.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | h1 { 5 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 6 | padding: 0.2em; 7 | border-bottom: 1px solid #aaaaaa; 8 | } -------------------------------------------------------------------------------- /chapter02/center.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | padding: 0.2em; 4 | } 5 | p { 6 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 7 | } 8 | .centered { 9 | text-align: center; 10 | } -------------------------------------------------------------------------------- /chapter02/indent.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | padding: 0.2em; 4 | } 5 | p { 6 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 7 | } 8 | .indent { 9 | padding-left: 1.5em; 10 | } -------------------------------------------------------------------------------- /chapter02/headingcolor.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | h1 { 5 | background-color: #ADD8E6; 6 | color: #256579; 7 | font: 1.5em Verdana, Geneva, Arial, Helvetica, sans-serif; 8 | padding: 0.2em; 9 | } -------------------------------------------------------------------------------- /chapter02/capitalize.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | padding: 0.2em; 4 | } 5 | p { 6 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 7 | } 8 | .transform { 9 | text-transform: capitalize; 10 | } -------------------------------------------------------------------------------- /chapter02/listnomargin.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | h1 { 5 | font-size: 1.6em; 6 | padding: 0.2em; 7 | } 8 | ul { 9 | list-style-type: none; 10 | padding-left: 0; 11 | margin-left: 0; 12 | } -------------------------------------------------------------------------------- /chapter02/uppercase.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | padding: 0.2em; 4 | } 5 | p { 6 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 7 | } 8 | .transform { 9 | text-transform: uppercase; 10 | } -------------------------------------------------------------------------------- /chapter02/headingnospace.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | 5 | h1 { 6 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 7 | margin-bottom: 0; 8 | } 9 | 10 | h1+p { 11 | margin-top: 0; 12 | } -------------------------------------------------------------------------------- /chapter07/basic_basic.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 5%; 6 | } 7 | 8 | body, h1, h2, h3, h4, h5, h6, ol, ul, li, p { 9 | font-family: verdana, arial, helvetica, sans-serif; 10 | color: #000; 11 | } -------------------------------------------------------------------------------- /chapter02/hilite.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | h1 { 5 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 6 | padding: 0.2em; 7 | } 8 | .hilite { 9 | background-color: #FFFFCC; 10 | color: #B22222; 11 | } -------------------------------------------------------------------------------- /chapter02/textdecoration4.css: -------------------------------------------------------------------------------- 1 | a:link, a:visited { 2 | text-decoration: underline; 3 | color: #6A5ACD; 4 | background-color: transparent; 5 | } 6 | a:hover, a:active { 7 | text-decoration: underline overline; 8 | color: #191970; 9 | background-color: #C9C3ED; 10 | } -------------------------------------------------------------------------------- /chapter08/defaultcolors.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | background-color: #FFFFFF; 3 | color: #000000; 4 | } 5 | 6 | #content h1, #content h2 { 7 | color: #B51032; 8 | background-color: transparent; 9 | } 10 | 11 | #content h2 { 12 | border-bottom: 1px dotted #ED9F9F; 13 | } -------------------------------------------------------------------------------- /chapter08/highcontrast2.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | background-color: #000000; 3 | color: #FFFFFF; 4 | } 5 | 6 | #content h1, #content h2 { 7 | color: #FFFFFF; 8 | background-color: transparent; 9 | } 10 | 11 | #content h2 { 12 | border-bottom: 1px dotted #CCCCCC; 13 | } -------------------------------------------------------------------------------- /chapter06/inline.css: -------------------------------------------------------------------------------- 1 | form { 2 | display: inline; 3 | } 4 | input.txt { 5 | color: #00008B; 6 | background-color: #E3F2F7; 7 | border: 1px inset #00008B; 8 | width: 200px; 9 | } 10 | input.btn { 11 | color: #00008B; 12 | background-color: #ADD8E6; 13 | border: 1px outset #00008B; 14 | } -------------------------------------------------------------------------------- /chapter09/center.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #CCD3D9; 3 | color: #000000; 4 | } 5 | #content { 6 | width: 630px; 7 | margin-left: auto; 8 | margin-right: auto; 9 | border: 2px solid #A6B2BC; 10 | background-color: #FFFFFF; 11 | color: #000000; 12 | padding: 0 20px 0 20px; 13 | } -------------------------------------------------------------------------------- /chapter03/unused/imageborders.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | #album { 5 | margin: 30px; 6 | list-style:none; 7 | } 8 | 9 | #album li { 10 | float:left; 11 | } 12 | 13 | #album img { 14 | border: 1px solid #000000; 15 | margin-right: 30px; 16 | } -------------------------------------------------------------------------------- /chapter03/doubleborder.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | text-align: center; 4 | } 5 | 6 | #wrapper { 7 | margin-top: 20px; 8 | } 9 | 10 | img.doubleborder { 11 | border: 1px solid #333; 12 | padding: 5px; 13 | background-color: #EEEEEE; 14 | } 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter03/doubleborder-bg.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | text-align: center; 4 | } 5 | 6 | #wrapper { 7 | margin-top: 20px; 8 | } 9 | 10 | img.doubleborder { 11 | border: 5px solid #8E787B; 12 | padding: 20px; 13 | background-image: url(doubleborder-bg.gif); 14 | } 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter02/hrstyle.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | padding: 0.2em; 4 | } 5 | p { 6 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 7 | line-height: 2.0; 8 | } 9 | hr { 10 | border: none; 11 | background-color: #256579; 12 | color: #256579; 13 | height: 2px; 14 | width: 80%; 15 | } -------------------------------------------------------------------------------- /chapter03/backgroundfixed.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | background-color: #D2D7E4; 4 | color: #000000; 5 | background-image: url(background-repeatx.jpg); 6 | background-repeat: repeat-x; 7 | background-attachment: fixed; 8 | } 9 | #content { 10 | margin: 2em 4em 2em 4em; 11 | background-color: #FFFFFF; 12 | padding: 1em; 13 | } -------------------------------------------------------------------------------- /chapter06/textonly.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.2em Arial, Helvetica, sans-serif; 3 | } 4 | input.txt { 5 | color: #00008B; 6 | background-color: #E3F2F7; 7 | border: 1px inset #00008B; 8 | width: 200px; 9 | } 10 | input.btn { 11 | color: #00008B; 12 | background-color: #ADD8E6; 13 | border: 1px outset #00008B; 14 | } 15 | label { 16 | font : bold 0.9em Arial, Helvetica, sans-serif; 17 | } -------------------------------------------------------------------------------- /chapter09/position.css: -------------------------------------------------------------------------------- 1 | #box1 { 2 | position: absolute; 3 | top: 10px; 4 | left: 20px; 5 | width: 100px; 6 | background-color: #B0C4DE; 7 | border: 2px solid #34537D; 8 | padding: 10px; 9 | } 10 | #box2 { 11 | position: absolute; 12 | bottom: 2em; 13 | right: 2em; 14 | width: 100px; 15 | background-color: #FFFAFA; 16 | border: 2px solid #CD5C5C; 17 | padding: 10px; 18 | } -------------------------------------------------------------------------------- /chapter09/position2.css: -------------------------------------------------------------------------------- 1 | 2 | #box1 { 3 | position: absolute; 4 | top: 100px; 5 | left: 100px; 6 | width: 400px; 7 | background-color: #B0C4DE; 8 | border: 2px solid #34537D; 9 | padding: 10px; 10 | } 11 | #box2 { 12 | position: absolute; 13 | bottom: 2em; 14 | right: 2em; 15 | width: 150px; 16 | background-color: #FFFAFA; 17 | border: 2px solid #CD5C5C; 18 | padding: 10px; 19 | } -------------------------------------------------------------------------------- /chapter09/position3.css: -------------------------------------------------------------------------------- 1 | #box1 { 2 | position: absolute; 3 | top: 100px; 4 | left: 100px; 5 | width: 400px; 6 | height: 300px; 7 | background-color: #B0C4DE; 8 | border: 2px solid #34537D; 9 | padding: 10px; 10 | } 11 | #box2 { 12 | position: absolute; 13 | bottom: 2em; 14 | right: 2em; 15 | width: 150px; 16 | background-color: #FFFAFA; 17 | border: 2px solid #CD5C5C; 18 | padding: 10px; 19 | } -------------------------------------------------------------------------------- /chapter06/fields.css: -------------------------------------------------------------------------------- 1 | form { 2 | border: 1px dotted #AAAAAA; 3 | padding: 3px 6px 3px 6px; 4 | } 5 | form div { 6 | margin-bottom: 1em; 7 | } 8 | input.txt{ 9 | color: #00008B; 10 | background-color: #ADD8E6; 11 | border: 1px inset #00008B; 12 | width: 200px; 13 | } 14 | input.btn { 15 | color: #00008B; 16 | background-color: #ADD8E6; 17 | border: 1px outset #00008B; 18 | padding: 2px 4px 2px 4px; 19 | } -------------------------------------------------------------------------------- /chapter09/corners2.css: -------------------------------------------------------------------------------- 1 | .rndbox { 2 | background: #C6D9EA; 3 | width: 300px; 4 | font: 0.8em Verdana, Arial, Helvetica, sans-serif; 5 | color: #000033; 6 | } 7 | .rndtop { 8 | background: url(topright.gif) no-repeat right top; 9 | } 10 | .rndbottom { 11 | background: url(bottomright.gif) no-repeat right top; 12 | } 13 | .rndbottom img { 14 | display:block; 15 | } 16 | .rndbox p { 17 | margin: 0 0.4em 0 0.4em; 18 | } -------------------------------------------------------------------------------- /chapter09/gallery.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #FFFFFF; 3 | color: #000000; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | #albumlist { 8 | list-style-type: none; 9 | } 10 | #albumlist li { 11 | float: left; 12 | width:240px; 13 | margin-right: 6px; 14 | margin-bottom: 10px; 15 | font: bold 0.8em Arial, Helvetica, sans-serif; 16 | color: #333333; 17 | } 18 | #albumlist img { 19 | display: block; 20 | border: 1px solid #333300; 21 | } -------------------------------------------------------------------------------- /chapter09/3col-table.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | #wrapper { 6 | width:100%; 7 | } 8 | #content { 9 | display: table; 10 | width: 100%; 11 | } 12 | #main { 13 | display: table-cell; 14 | } 15 | #side1 { 16 | display: table-cell; 17 | width:200px; 18 | padding: 0 10px 0 10px; 19 | } 20 | #side2 { 21 | display: table-cell; 22 | width: 190px; 23 | padding: 80px 10px 0 10px; 24 | } 25 | #footer { 26 | border-top: 10px solid #CECECE; 27 | } -------------------------------------------------------------------------------- /chapter09/3col-table-ie67.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | #wrapper { 6 | margin-top: 66px; 7 | } 8 | #content { 9 | position: relative; 10 | } 11 | #main { 12 | margin-left: 220px; 13 | margin-right: 220px; 14 | } 15 | #side1 { 16 | width:200px; 17 | float:left; 18 | padding: 0 10px 0 10px; 19 | } 20 | #side2 { 21 | margin-left: 220px; 22 | padding: 0; 23 | width: 50%; 24 | } 25 | #footer { 26 | clear:both; 27 | border-top: 10px solid #CECECE; 28 | } -------------------------------------------------------------------------------- /chapter03/backgroundposition.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | background-color: #D2D7E4; 4 | color: #000000; 5 | background-image: url(background-repeatx.jpg); 6 | background-repeat: repeat-x; 7 | background-position: top left; 8 | } 9 | #content { 10 | margin: 2em 4em 2em 4em; 11 | background-color: #FFFFFF; 12 | padding: 1em 1em 40px 1em; 13 | background-image: url(tick.gif); 14 | background-repeat: no-repeat; 15 | background-position: bottom right; 16 | } -------------------------------------------------------------------------------- /chapter09/3col-alt.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | #wrapper { 6 | width:100%; 7 | float:left; 8 | margin-right: -230px; 9 | margin-top: 66px; 10 | } 11 | #content { 12 | margin-right: 220px; 13 | } 14 | #main { 15 | margin-left: 220px; 16 | } 17 | #side1 { 18 | width:200px; 19 | float:left; 20 | padding: 0 10px 0 10px; 21 | } 22 | #side2 { 23 | width: 190px; 24 | padding: 80px 10px 0 10px; 25 | float:right; 26 | } 27 | #footer { 28 | clear:both; 29 | border-top: 10px solid #CECECE; 30 | } -------------------------------------------------------------------------------- /chapter06/elements.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | form { 4 | border: 1px dotted #AAAAAA; 5 | padding: 0.5em; 6 | } 7 | 8 | form div { 9 | margin-bottom: 1em; 10 | } 11 | 12 | input { 13 | color: #00008B; 14 | background-color: #ADD8E6; 15 | border: 1px solid #00008B; 16 | } 17 | 18 | select { 19 | width: 100px; 20 | color: #00008B; 21 | background-color: #ADD8E6; 22 | border: 1px solid #00008B; 23 | } 24 | 25 | textarea { 26 | width: 200px; 27 | height: 40px; 28 | color: #00008B; 29 | background-color: #ADD8E6; 30 | border: 1px solid #00008B; 31 | } -------------------------------------------------------------------------------- /chapter06/tablefree.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.2em Arial, Helvetica, sans-serif; 3 | } 4 | input.txt { 5 | color: #00008B; 6 | background-color: #E3F2F7; 7 | border: 1px inset #00008B; 8 | width: 200px; 9 | } 10 | input.btn { 11 | color: #00008B; 12 | background-color: #ADD8E6; 13 | border: 1px outset #00008B; 14 | } 15 | form div { 16 | clear: left; 17 | margin: 0; 18 | padding: 0; 19 | padding-top: 0.6em; 20 | } 21 | form div label { 22 | float: left; 23 | width: 40%; 24 | font: bold 0.9em Arial, Helvetica, sans-serif; 25 | } -------------------------------------------------------------------------------- /chapter09/corners3-start.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Rounded Corners 6 | 8 | 9 | 10 | 11 |
12 |

Lorem ipsum dolor...

13 |
14 | 15 | -------------------------------------------------------------------------------- /chapter04/replaceimages_.css: -------------------------------------------------------------------------------- 1 | #navigation { 2 | width: 180px; 3 | padding: 0; 4 | margin: 0; 5 | border-collapse: collapse; 6 | } 7 | #navigation td { 8 | border-bottom: 2px solid #460016; 9 | background-color: #FFDFEA; 10 | color: #460016; 11 | } 12 | #navigation a:link, #navigation a:visited { 13 | display:block; 14 | margin: 0.4em 0 0.4em 1em; 15 | color: #460016; 16 | background-color: transparent; 17 | font-size: 90%; 18 | text-decoration: none; 19 | font-weight: bold; 20 | } 21 | * html #navigation a { 22 | width: 100%; 23 | } -------------------------------------------------------------------------------- /chapter03/borderbasic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - basic image borders example 5 | 6 | 7 | 8 | 9 | food preparation 10 | food preparation 11 | 12 | -------------------------------------------------------------------------------- /chapter02/firstchild.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter09/corners1.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Rounded Corners 6 | 8 | 9 | 10 | 11 |
12 |

Lorem ipsum dolor sit amet, consectetuer adipiscing

13 |
14 | 15 | -------------------------------------------------------------------------------- /chapter07/doctype-compliance.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | DOCTYPE Example 6 | 8 | 9 | 10 | 11 |
12 |

This div has a width of 200 pixels, padding of 20 pixels and a border of 5 pixels.

13 |
14 | 15 | -------------------------------------------------------------------------------- /chapter02/linktypes.css: -------------------------------------------------------------------------------- 1 | a:link, a:visited { 2 | text-decoration: underline; 3 | color: #6A5ACD; 4 | background-color: transparent; 5 | } 6 | a:hover, a:active { 7 | text-decoration: underline overline; 8 | color: #191970; 9 | background-color: #C9C3ED; 10 | } 11 | .boxout { 12 | color: #FFFFFF; 13 | background-color: #6A5ACD; 14 | } 15 | .boxout a:link, .boxout a:visited { 16 | text-decoration: underline; 17 | color: #E4E2F6; 18 | background-color: transparent; 19 | } 20 | .boxout a:hover, .boxout a:active { 21 | background-color: #C9C3ED; 22 | color: #191970; 23 | } -------------------------------------------------------------------------------- /chapter03/bordernone.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - image borders example 5 | 6 | 7 | 8 | 9 | food preparation 10 | food preparation 11 | 12 | -------------------------------------------------------------------------------- /chapter03/borderclass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - image class borders example 5 | 6 | 7 | 8 | 9 | food preparation 10 | food preparation 11 | 12 | -------------------------------------------------------------------------------- /chapter03/doubleborder.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - double border example 5 | 6 | 7 | 8 | 9 |
10 | Smiling Stones 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter02/firstchildwithclass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter02/basicfont.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

These stuffed peppers are lovely as a starter, or as a side dish 10 | for a Chinese meal. They also go down well as part of a buffet, and even 11 | children seem to like them.

12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter03/borderalbum.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - album image borders example 5 | 6 | 7 | 8 | 9 | 13 | 14 | -------------------------------------------------------------------------------- /chapter03/doubleborder-bg.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - double border with background example 5 | 6 | 7 | 8 | 9 |
10 | Smiling Stones 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter06/spreadsheet.css: -------------------------------------------------------------------------------- 1 | table.formdata { 2 | border: 1px solid #5F6F7E; 3 | border-collapse: collapse; 4 | margin: 1em 0 2em 0; 5 | } 6 | table.formdata th { 7 | border: 1px solid #5F6F7E; 8 | background-color: #E2E2E2; 9 | color: #000000; 10 | text-align: left; 11 | font-weight: normal; 12 | padding: 0.2em 0.4em 0.2em 0.4em; 13 | margin: 0; 14 | } 15 | table.formdata td { 16 | margin: 0; 17 | padding: 0; 18 | border: 1px solid #E2E2E2; 19 | } 20 | table.formdata input { 21 | width: 80px; 22 | padding: 0.2em 0.4em 0.2em 0.4em; 23 | margin: 0; 24 | border-width: 0; 25 | border-style: none; 26 | } 27 | 28 | -------------------------------------------------------------------------------- /chapter07/doctype-quirks.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | DOCTYPE Example 7 | 9 | 10 | 11 | 12 |
13 |

This div has a width of 200 pixels, padding of 20 pixels and a border of 5 pixels.

14 |
15 | 16 | -------------------------------------------------------------------------------- /chapter02/relative.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

These stuffed peppers are lovely as a starter or as a 10 | side dish for a Chinese meal. They also go down well as part of 11 | a buffet, and even children seem to like them.

12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter03/backgrounds.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | background-color: #D2D7E4; 4 | color: #000000; 5 | background-image: url(background-norepeat.jpg); 6 | background-repeat: no-repeat; 7 | 8 | /* 9 | Try these alternatives as well. 10 | 11 | Repeat horizontally: 12 | background-image: url(background-repeatx.jpg); 13 | background-repeat: repeat-x; 14 | 15 | Repeat vertically: 16 | background-image: url(background-repeat-y.jpg); 17 | background-repeat: repeat-y; 18 | */ 19 | } 20 | #content { 21 | margin: 2em 4em 2em 4em; 22 | background-color: #FFFFFF; 23 | padding: 1em; 24 | } -------------------------------------------------------------------------------- /chapter04/images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 4 - Non-JavaScript rollover images 5 | 6 | 7 | 8 | 9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter05/colgroups.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 0.8em Arial, Helvetica, sans-serif; 3 | } 4 | .datatable { 5 | border: 1px solid #D6DDE6; 6 | border-collapse: collapse; 7 | width: 80%; 8 | } 9 | .datatable td { 10 | border:2px solid #ffffff; 11 | padding: 0.3em; 12 | } 13 | .datatable th { 14 | border:2px solid #ffffff; 15 | background-color: #00487D; 16 | color: #FFFFFF; 17 | font-weight: bold; 18 | text-align: left; 19 | padding: 0.3em; 20 | } 21 | .datatable colgroup.odd { 22 | background-color: #80C9FF; 23 | color: #000000; 24 | } 25 | 26 | .datatable colgroup.even { 27 | background-color: #BFE4FF; 28 | color: #000000; 29 | } -------------------------------------------------------------------------------- /chapter05/columns.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 0.8em Arial, Helvetica, sans-serif; 3 | } 4 | .datatable { 5 | border: 1px solid #D6DDE6; 6 | border-collapse: collapse; 7 | width: 80%; 8 | } 9 | 10 | .datatable col.odd { 11 | background-color: #80C9FF; 12 | color: #000000; 13 | } 14 | 15 | .datatable col.even { 16 | background-color: #BFE4FF; 17 | color: #000000; 18 | } 19 | 20 | .datatable td { 21 | border:2px solid #ffffff; 22 | padding: 0.3em; 23 | } 24 | 25 | .datatable th { 26 | border:2px solid #ffffff; 27 | background-color: #00487D; 28 | color: #FFFFFF; 29 | font-weight: bold; 30 | text-align: left; 31 | padding: 0.3em; 32 | } 33 | -------------------------------------------------------------------------------- /chapter02/justify.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 | 12 | 13 | -------------------------------------------------------------------------------- /chapter02/leading.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 | 12 | 13 | -------------------------------------------------------------------------------- /chapter02/nesting.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |
10 |

11 | You'll probably be surprised when using 12 | a relative font-size and nested elements. 13 |

14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter05/spreadsheet.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | } 4 | 5 | .datatable { 6 | border: 1px solid #D6DDE6; 7 | border-collapse: collapse; 8 | } 9 | .datatable td { 10 | border: 1px solid #D6DDE6; 11 | text-align: right; 12 | padding: 0.2em; 13 | } 14 | .datatable th { 15 | border: 1px solid #828282; 16 | background-color: #BCBCBC; 17 | font-weight: bold; 18 | text-align: left; 19 | padding: 0.2em; 20 | } 21 | .datatable caption { 22 | font: bold 120% "Times New Roman", Times, serif; 23 | background-color: #B0C4DE; 24 | color: #33517A; 25 | padding: 0.4em 0 0.3em 0; 26 | border: 1px solid #789AC6; 27 | } -------------------------------------------------------------------------------- /chapter06/textbutton.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | A text button 6 | 8 | 9 | 10 | 11 |
12 |

Click Next >> to move onto the next stage:

13 |

14 |
15 | 16 | -------------------------------------------------------------------------------- /chapter03/unused/imageborders.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - image borders example 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter04/listnav2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Lists as navigation 5 | 6 | 7 | 8 | 9 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /chapter02/center.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 | 12 | -------------------------------------------------------------------------------- /chapter02/headingcolor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 | 12 | 13 | -------------------------------------------------------------------------------- /chapter02/indent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 | 12 | -------------------------------------------------------------------------------- /chapter04/images.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 2em; 4 | font: 1em Arial, Helvetica, sans-serif; 5 | } 6 | 7 | ul#nav { 8 | list-style-type: none; 9 | padding: 0; 10 | margin: 0; 11 | } 12 | 13 | #nav a:link, #nav a:visited { 14 | display: block; 15 | width: 150px; 16 | padding: 10px 0 16px 32px; 17 | font: bold 80% Arial, Helvetica, sans-serif; 18 | color: #FF9900; 19 | background: url("peppers.gif") top left no-repeat; 20 | text-decoration: none; 21 | } 22 | 23 | #nav a:hover { 24 | background-position: 0 -69px; 25 | color: #B51032; 26 | } 27 | 28 | #nav a:active { 29 | background-position: 0 -138px; 30 | color: #006E01; 31 | } -------------------------------------------------------------------------------- /chapter02/hrstyle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |
11 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

12 | 13 | -------------------------------------------------------------------------------- /chapter02/listinline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 | 15 | 16 | -------------------------------------------------------------------------------- /chapter02/textdecoration.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter02/textdecoration2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter02/textdecoration3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter02/textdecoration4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter02/uppercase.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 | 12 | -------------------------------------------------------------------------------- /chapter02/capitalize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 | 12 | -------------------------------------------------------------------------------- /chapter05/alternate.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 0.8em Arial, Helvetica, sans-serif; 3 | } 4 | .datatable { 5 | border: 1px solid #D6DDE6; 6 | border-collapse: collapse; 7 | width: 80%; 8 | } 9 | .datatable td { 10 | border: 1px solid #D6DDE6; 11 | padding: 0.3em; 12 | } 13 | .datatable th { 14 | border: 1px solid #828282; 15 | background-color: #BCBCBC; 16 | font-weight: bold; 17 | text-align: left; 18 | padding-left: 0.3em; 19 | } 20 | .datatable caption { 21 | font: bold 110% Arial, Helvetica, sans-serif; 22 | color: #33517A; 23 | text-align: left; 24 | padding: 0.4em 0 0.8em 0; 25 | } 26 | .datatable tr.altrow { 27 | background-color: #DFE7F2; 28 | color: #000000; 29 | } -------------------------------------------------------------------------------- /chapter04/listnav_horiz.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 4 - horizontal list menu 5 | 6 | 7 | 8 | 9 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /chapter08/print.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | #navigation { 6 | display: none; 7 | } 8 | #content { 9 | margin-left: 20pt; 10 | margin-right: 30pt; 11 | } 12 | #banner { 13 | display: none; 14 | } 15 | #content p, #content li { 16 | font: 12pt/20pt "Times New Roman", Times, serif; 17 | } 18 | #content p { 19 | margin-left: 20pt; 20 | } 21 | #content h1, #content h2 { 22 | font: 16pt Georgia, "Times New Roman", Times, serif; 23 | color: #4b4b4b; 24 | background-color: transparent; 25 | } 26 | #content h2 { 27 | font: 14pt Georgia, "Times New Roman", Times, serif; 28 | padding-bottom: 2pt; 29 | border-bottom: 1pt dotted #CCCCCC; 30 | } -------------------------------------------------------------------------------- /chapter06/inline.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | An inline form 6 | 8 | 9 | 10 | 11 | Your email address: 12 |
13 |
14 |
15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /chapter02/hilite.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Chapter 2 6 | 7 | 8 | 9 | 10 |

Chinese-style stuffed peppers

11 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter09/slogan-align.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Stage & Screen - theatre and film reviews 6 | 8 | 9 | 10 | 11 | 15 | 16 | -------------------------------------------------------------------------------- /chapter02/headingnospace.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Chapter 2 6 | 7 | 8 | 9 | 10 |

Chinese-style stuffed peppers

11 |

These stuffed peppers are lovely as a starter or as a 12 | side dish for a Chinese meal. They also go down well as part of 13 | a buffet and even children seem to like them.

14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter06/spreadsheet2.css: -------------------------------------------------------------------------------- 1 | table.formdata { 2 | border: 1px solid #5F6F7E; 3 | border-collapse: collapse; 4 | margin: 1em 0 2em 0; 5 | } 6 | table.formdata th { 7 | border: 1px solid #5F6F7E; 8 | background-color: #E2E2E2; 9 | color: #000000; 10 | text-align: left; 11 | font-weight: normal; 12 | padding: 0.2em 0.4em 0.2em 0.4em; 13 | margin: 0; 14 | } 15 | table.formdata td { 16 | margin: 0; 17 | padding: 0; 18 | border: 1px solid #E2E2E2; 19 | } 20 | table.formdata input { 21 | width: 80px; 22 | padding: 0.2em 0.4em 0.2em 0.4em; 23 | margin: 0; 24 | border: 2px solid #FFFFFF; 25 | } 26 | 27 | .formdata input:focus, .formdata input.hilite { 28 | border: 2px solid #000000; 29 | } 30 | 31 | -------------------------------------------------------------------------------- /chapter09/position.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Absolute positioning 6 | 7 | 8 | 9 | 10 |
This is box one. It is positioned 10 pixels from the top and 20 pixels from the left of the viewport.
11 |
This is box two. It is positioned 2em from the bottom and 2em from the right of the viewport.
12 | 13 | -------------------------------------------------------------------------------- /chapter02/headingunderline.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Chapter 2 6 | 7 | 8 | 9 | 10 |

Chinese-style stuffed peppers

11 |

These stuffed peppers are lovely as a starter or as a 12 | side dish for a Chinese meal. They also go down well as part of 13 | a buffet and even children seem to like them.

14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter09/position3.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Absolute positioning 6 | 8 | 9 | 10 | 11 |
This is box one. It is positioned 100 pixels from the top and 100 pixels from the left of the viewport. 12 |
This is box two. It is positioned 2em from the bottom and 2em from the right of the parent element - box one.
13 |
14 | 15 | -------------------------------------------------------------------------------- /chapter02/headingunderline2.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Chapter 2 6 | 7 | 8 | 9 | 10 |

Chinese-style stuffed peppers

11 |

These stuffed peppers are lovely as a starter or as a 12 | side dish for a Chinese meal. They also go down well as part of 13 | a buffet and even children seem to like them.

14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter04/external_links.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ffffff; 3 | color: #000000; 4 | margin: 0; 5 | padding: 1em; 6 | font: 1em Arial, Helvetica, sans-serif; 7 | } 8 | 9 | ul.links { 10 | margin: 0; 11 | padding: 0; 12 | list-style: none; 13 | } 14 | 15 | a[href ^="http:"] { 16 | padding-left: 20px; 17 | background-image: url(link_icon_external.gif); 18 | background-repeat: no-repeat; 19 | } 20 | 21 | a[href ^="mailto:"] { 22 | padding-left: 20px; 23 | background-image: url(link_icon_email.gif); 24 | background-repeat: no-repeat; 25 | } 26 | 27 | a[href $=".pdf"] { 28 | padding-left: 20px; 29 | background-image: url(link_icon_pdf.gif); 30 | background-repeat: no-repeat; 31 | } -------------------------------------------------------------------------------- /chapter04/listnav_horiz.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ffffff; 3 | color: #000000; 4 | margin: 0; 5 | padding: 1em; 6 | font: 1em Arial, Helvetica, sans-serif; 7 | } 8 | 9 | #navigation { 10 | font-size: 90%; 11 | } 12 | 13 | #navigation ul { 14 | list-style: none; 15 | margin: 0; 16 | padding: 0; 17 | padding-top: 1em; 18 | } 19 | 20 | #navigation li { 21 | display: inline; 22 | } 23 | 24 | #navigation a:link, #navigation a:visited { 25 | padding: 0.4em 1em 0.4em 1em; 26 | color: #FFFFFF; 27 | background-color: #B51032; 28 | text-decoration: none; 29 | border: 1px solid #711515; 30 | } 31 | 32 | #navigation a:hover { 33 | color: #FFFFFF; 34 | background-color: #711515; 35 | } -------------------------------------------------------------------------------- /chapter05/hiliterow.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 0.8em Arial, Helvetica, sans-serif; 3 | } 4 | 5 | .datatable { 6 | border: 1px solid #D6DDE6; 7 | border-collapse: collapse; 8 | width: 80%; 9 | } 10 | .datatable td { 11 | border: 1px solid #D6DDE6; 12 | padding: 0.3em; 13 | } 14 | .datatable th { 15 | border: 1px solid #828282; 16 | background-color: #BCBCBC; 17 | font-weight: bold; 18 | text-align: left; 19 | padding-left: 0.3em; 20 | } 21 | .datatable caption { 22 | font: bold 110% Arial, Helvetica, sans-serif; 23 | color: #33517A; 24 | text-align: left; 25 | padding: 0.4em 0 0.8em 0; 26 | } 27 | 28 | .datatable tr:hover, .datatable tr.hilite { 29 | background-color: #DFE7F2; 30 | color: #000000; 31 | } -------------------------------------------------------------------------------- /chapter04/listnav1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #FFFFFF; 3 | color: #000000; 4 | margin: 0; 5 | padding: 1em; 6 | font: 1em Arial, Helvetica, sans-serif; 7 | } 8 | 9 | #navigation { 10 | width: 200px; 11 | } 12 | 13 | #navigation ul { 14 | list-style: none; 15 | margin: 0; 16 | padding: 0; 17 | } 18 | 19 | #navigation li { 20 | border-bottom: 1px solid #ED9F9F; 21 | } 22 | 23 | #navigation li a:link, #navigation li a:visited { 24 | font-size: 90%; 25 | display: block; 26 | padding: 0.4em 0 0.4em 0.5em; 27 | border-left: 12px solid #711515; 28 | border-right: 1px solid #711515; 29 | background-color: #B51032; 30 | color: #FFFFFF; 31 | text-decoration: none; 32 | } 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /chapter04/listnav1.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Lists as navigation 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /chapter09/slogan-align.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 20px; 3 | padding: 0; 4 | background-color: #FFFFFF; 5 | color: #000000; 6 | font-family: Arial, Helvetica, sans-serif; 7 | border-top: 2px solid #2A4F6F; 8 | } 9 | #header { 10 | border: 2px solid red ; 11 | /*border-top: 1px solid #778899; 12 | border-bottom: 1px dotted #B2BCC6; 13 | height:3em;*/ 14 | } 15 | #header .slogan { 16 | font: 120% Georgia, "Times New Roman", Times, serif; 17 | color: #778899; 18 | background-color: transparent; 19 | width: 300px; 20 | /*float: right; 21 | margin-right: 2em; 22 | margin-top: 0.5em;*/ 23 | } 24 | #header .logo { 25 | width: 187px; 26 | /*float: left; 27 | margin-left: 1.5em; 28 | margin-top: 0.5em;*/ 29 | } -------------------------------------------------------------------------------- /chapter04/replaceimages.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ffffff; 3 | color: #000000; 4 | margin: 0; 5 | padding: 1em; 6 | font: 1em Arial, Helvetica, sans-serif; 7 | } 8 | 9 | #navigation { 10 | width: 180px; 11 | padding: 0; 12 | margin: 0; 13 | border-collapse: collapse; 14 | } 15 | 16 | #navigation td { 17 | border-bottom: 2px solid #460016; 18 | background-color: #FFDFEA; 19 | color: #460016; 20 | } 21 | 22 | #navigation a:link, #navigation a:visited { 23 | display: block; 24 | margin: 0.4em 0 0.4em 1em; 25 | color: #460016; 26 | background-color: transparent; 27 | font-size: 90%; 28 | text-decoration: none; 29 | font-weight: bold; 30 | } 31 | 32 | * html #navigation a { 33 | width: 100%; 34 | } -------------------------------------------------------------------------------- /chapter09/position2.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Absolute positioning 6 | 8 | 9 | 10 | 11 |
This is box one. It is positioned 100 pixels from the top and 100 pixels from the left of the viewport. 12 |
This is box two. It is positioned 2em from the bottom and 2em from the right of the parent element - box one.
13 |
14 | 15 | -------------------------------------------------------------------------------- /chapter06/fields.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | CSS styled form elements 6 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 |
16 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /chapter04/listnav_button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 4 - Button navigation 5 | 6 | 7 | 8 | 9 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /chapter04/image_nav.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 4 - Image navigation 5 | 6 | 7 | 8 | 9 | 15 | 16 | -------------------------------------------------------------------------------- /chapter06/fieldset.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.2em Arial, Helvetica, sans-serif; 3 | } 4 | input.txt { 5 | color: #00008B; 6 | background-color: #E3F2F7; 7 | border: 1px inset #00008B; 8 | width: 200px; 9 | } 10 | input.btn { 11 | color: #00008B; 12 | background-color: #ADD8E6; 13 | border: 1px outset #00008B; 14 | } 15 | form div { 16 | clear: left; 17 | margin: 0; 18 | padding: 0; 19 | padding-top: 5px; 20 | } 21 | form div label { 22 | float: left; 23 | width: 40%; 24 | font: bold 0.9em Arial, Helvetica, sans-serif; 25 | } 26 | /*fieldset { 27 | border: 1px dotted #61B5CF; 28 | margin-top: 1.4em; 29 | padding: 0.6em; 30 | } 31 | legend { 32 | font: bold 0.8em Arial, Helvetica, sans-serif; 33 | color: #00008B; 34 | background-color: #FFFFFF; 35 | }*/ -------------------------------------------------------------------------------- /chapter09/corners2.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Rounded corners 6 | 8 | 9 | 10 | 11 |
12 |
14 |

Lorem ipsum dolor sit amet, consectetuer adipiscing

15 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /chapter02/linktypes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |
10 |

Visit our online store, for all your widget needs.

11 |
12 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /chapter06/accesskeys.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.2em Arial, Helvetica, sans-serif; 3 | } 4 | input.txt { 5 | color: #00008B; 6 | background-color: #E3F2F7; 7 | border: 1px inset #00008B; 8 | width: 200px; 9 | } 10 | input.btn { 11 | color: #00008B; 12 | background-color: #ADD8E6; 13 | border: 1px outset #00008B; 14 | } 15 | form div { 16 | clear: left; 17 | margin: 0; 18 | padding: 0; 19 | padding-top: 0.5em; 20 | } 21 | form div label { 22 | float: left; 23 | width: 40%; 24 | font: bold 0.9em Arial, Helvetica, sans-serif; 25 | } 26 | fieldset { 27 | border: 1px dotted #61B5CF; 28 | margin-top: 1.4em; 29 | padding: 0.6em; 30 | } 31 | legend { 32 | font: bold 0.8em Arial, Helvetica, sans-serif; 33 | color: #00008B; 34 | background-color: #FFFFFF; 35 | } 36 | .akey { 37 | text-decoration: underline; 38 | } -------------------------------------------------------------------------------- /chapter04/replaceimages.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter four - cursor types 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 19 | 20 | 21 | 24 | 25 | 26 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /chapter04/replaceimages_.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Replace images 6 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 21 | 22 | 23 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /chapter04/listnav_sub.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Lists as navigation 5 | 6 | 7 | 8 | 9 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter04/listnav2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ffffff; 3 | color: #000000; 4 | margin: 0; 5 | padding: 1em; 6 | font: 1em Arial, Helvetica, sans-serif; 7 | } 8 | 9 | #navigation { 10 | width: 200px; 11 | } 12 | 13 | #navigation ul { 14 | list-style: none; 15 | margin: 0; 16 | padding: 0; 17 | } 18 | 19 | #navigation li { 20 | border-bottom: 1px solid #ED9F9F; 21 | } 22 | 23 | #navigation li a:link, #navigation li a:visited { 24 | font-size: 90%; 25 | display: block; 26 | padding: 0.4em 0 0.4em 0.5em; 27 | border-left: 12px solid #711515; 28 | border-right: 1px solid #711515; 29 | background-color: #B51032; 30 | color: #FFFFFF; 31 | text-decoration: none; 32 | } 33 | 34 | #navigation li a:hover { 35 | background-color: #711515; 36 | color: #FFFFFF; 37 | } 38 | 39 | /* a CSS hack for IE6 */ 40 | * html #navigation li a { 41 | width: 100%; 42 | } -------------------------------------------------------------------------------- /chapter06/select.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.2em Arial, Helvetica, sans-serif; 3 | } 4 | input.txt { 5 | color: #00008B; 6 | background-color: #E3F2F7; 7 | border: 1px inset #00008B; 8 | width: 200px; 9 | } 10 | input.btn { 11 | color: #00008B; 12 | background-color: #ADD8E6; 13 | border: 1px outset #00008B; 14 | } 15 | form div { 16 | clear: left; 17 | margin: 0; 18 | padding: 0; 19 | padding-top: 0.5em; 20 | } 21 | form div label { 22 | float: left; 23 | width: 40%; 24 | font: bold 0.9em Arial, Helvetica, sans-serif; 25 | } 26 | option[value="blue"] { 27 | background-color: #ADD8E6; 28 | color: #000000; 29 | } 30 | option[value="red"] { 31 | background-color: #E20A0A; 32 | color: #ffffff; 33 | } 34 | option.green { 35 | background-color: #3CB371; 36 | color: #ffffff; 37 | } 38 | option.yellow { 39 | background-color: #FFF280; 40 | color: #000000; 41 | } -------------------------------------------------------------------------------- /chapter08/zoom.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 1em 2em 2em 2em; 3 | padding: 0; 4 | font-size: 140%; 5 | background-color: #333; 6 | color: #FFFFFF; 7 | } 8 | #navigation ul { 9 | list-style: none; 10 | margin: 0; 11 | padding: 0; 12 | border: none; 13 | } 14 | 15 | #navigation li { 16 | float:left; 17 | width: 20%; 18 | } 19 | 20 | #navigation li a:link, #navigation li a:visited { 21 | color: #FFFF00; 22 | } 23 | 24 | #navigation li a:hover { 25 | text-decoration:none; 26 | } 27 | 28 | #content { 29 | padding: 1em 0 0 0; 30 | clear:left; 31 | } 32 | 33 | #content p, #content li { 34 | line-height: 1.6em; 35 | } 36 | 37 | #content h1, #content h2 { 38 | font: 140% Georgia, "Times New Roman", Times, serif; 39 | color: #FFFFFF; 40 | background-color: transparent; 41 | } 42 | 43 | #content h2 { 44 | font: 120% Georgia, "Times New Roman", Times, serif; 45 | } -------------------------------------------------------------------------------- /chapter04/sitemap.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #FFFFFF; 3 | color: #000000; 4 | margin: 0; 5 | padding: 1em; 6 | font: 1em Arial, Helvetica, sans-serif; 7 | } 8 | 9 | ul#sitemap { 10 | margin: 0; 11 | padding: 0; 12 | list-style: none; 13 | } 14 | 15 | ul#sitemap ul { 16 | padding-left: 1em; 17 | list-style: none; 18 | } 19 | 20 | ul#sitemap li { 21 | border-bottom: 2px solid #FFFFFF; 22 | } 23 | 24 | ul#sitemap li a:link, ul#sitemap li a:visited{ 25 | background-color: #CCCCCC; 26 | display: block; 27 | padding: 0.4em; 28 | text-decoration: none; 29 | color: #057FAC; 30 | } 31 | 32 | ul#sitemap li a:hover { 33 | background-color: #999999; 34 | color: #FFFFFF; 35 | } 36 | 37 | ul#sitemap li li a:link, ul#sitemap li li a:visited{ 38 | background-color: #FFFFFF; 39 | display: block; 40 | padding: 0.4em; 41 | } 42 | 43 | ul#sitemap li li a:hover { 44 | background-color: #FFFFFF; 45 | color: #057FAC; 46 | } -------------------------------------------------------------------------------- /chapter05/cal_mini.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ffffff; 3 | color: #000000; 4 | font-size: 90%; 5 | } 6 | .clmonth { 7 | border-collapse: collapse; 8 | } 9 | .clmonth caption { 10 | text-align: left; 11 | font: bold 110% Georgia, "Times New Roman", Times, serif; 12 | padding-bottom: 0.4em; 13 | } 14 | .clmonth th { 15 | border: 1px solid #AAAAAA; 16 | border-bottom: none; 17 | padding: 0.2em 0.4em 0.2em 0.4em; 18 | background-color: #CCCCCC; 19 | color: #3F3F3F; 20 | font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif; 21 | } 22 | .clmonth td { 23 | border: 1px solid #EAEAEA; 24 | font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif; 25 | padding: 0.2em 0.4em 0.2em 0.4em; 26 | vertical-align: top; 27 | } 28 | .clmonth td.previous, .clmonth td.next { 29 | background-color: #F6F6F6; 30 | color: #C6C6C6; 31 | } 32 | .clmonth td.active { 33 | background-color: #B1CBE1; 34 | color: #2B5070; 35 | border: 2px solid #4682B4; 36 | } -------------------------------------------------------------------------------- /chapter09/corners3.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Rounded Corners 6 | 8 | 9 | 10 | 15 | 16 | 17 |
18 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a magna. Donec nunc. Integer justo magna, pellentesque quis, porttitor et, volutpat at, nulla. Quisque odio. Sed a neque nec wisi rhoncus scelerisque. Nulla facilisi. Cras pulvinar convallis arcu. Nullam imperdiet erat vel pede.

19 |
20 | 21 | -------------------------------------------------------------------------------- /chapter04/listnav_button.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ffffff; 3 | color: #000000; 4 | margin: 0; 5 | padding: 1em; 6 | font: 1em Arial, Helvetica, sans-serif; 7 | } 8 | 9 | #navigation { 10 | font-size: 90%; 11 | } 12 | 13 | #navigation ul { 14 | list-style: none; 15 | margin: 0; 16 | padding: 0; 17 | padding-top: 1em; 18 | } 19 | 20 | #navigation li { 21 | display: inline; 22 | } 23 | 24 | #navigation a:link, #navigation a:visited { 25 | margin-right: 0.2em; 26 | padding: 0.2em 0.6em 0.2em 0.6em; 27 | color: #A62020; 28 | background-color: #FCE6EA; 29 | text-decoration: none; 30 | border-top: 1px solid #FFFFFF; 31 | border-left: 1px solid #FFFFFF; 32 | border-bottom: 1px solid #717171; 33 | border-right: 1px solid #717171; 34 | } 35 | 36 | * html #navigation a { 37 | width: 100%; 38 | } 39 | 40 | #navigation a:hover { 41 | border-top: 1px solid #717171; 42 | border-left: 1px solid #717171; 43 | border-bottom: 1px solid #FFFFFF; 44 | border-right: 1px solid #FFFFFF; 45 | } -------------------------------------------------------------------------------- /chapter04/sitemap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 4 - Sitemap 5 | 6 | 7 | 8 | 9 | 10 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter04/external_links.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 4 - Show external links 5 | 6 | 7 | 8 | 9 | 11 | 12 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /chapter06/select.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Styled menu items 6 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 21 |
22 |
23 | 24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /chapter04/menus.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 1em verdana, arial, sans-serif; 3 | background-color: #FFFFFF; 4 | color: #000000; 5 | margin: 1em 0 0 1em; 6 | } 7 | #nav, #nav ul { 8 | padding: 0; 9 | margin: 0; 10 | list-style: none; 11 | } 12 | #nav li { 13 | float: left; 14 | position: relative; 15 | width: 10em; 16 | border: 1px solid #B0C4DE; 17 | background-color: #E7EDF5; 18 | color: #2D486C; 19 | font-size: 80%; 20 | margin-right: 1em; 21 | } 22 | #nav a:link, #nav a:visited { 23 | display: block; 24 | text-decoration: none; 25 | padding-left: 1em; 26 | color: #2D486C; 27 | } 28 | * html #nav a { 29 | width: 100%; 30 | } 31 | #nav ul { 32 | display: none; 33 | position: absolute; 34 | padding: 0; 35 | } 36 | #nav ul li { 37 | border: 0 none transparent; 38 | border-bottom: 1px solid #E7EDF5; 39 | border-top: .5em solid #FFF; 40 | background-color: #F1F5F9; 41 | font-size: 100%; 42 | margin-bottom: -1px; 43 | margin-top: 1px; 44 | padding: 0; 45 | } 46 | #nav li:hover ul { 47 | display: block; 48 | } 49 | -------------------------------------------------------------------------------- /chapter04/menus.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Chapter 4 - CSS Flyout menus 6 | 8 | 9 | 10 | 11 | 34 | 35 | -------------------------------------------------------------------------------- /chapter02/listimage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 | 22 | 23 | -------------------------------------------------------------------------------- /chapter02/listtype.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 | 22 | 23 | -------------------------------------------------------------------------------- /chapter02/listtype2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 | 22 | 23 | -------------------------------------------------------------------------------- /chapter02/listnomargin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 | 22 | 23 | -------------------------------------------------------------------------------- /chapter07/bgsleight.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-image: url(background-repeatx.jpg); 3 | background-repeat: repeat-x; 4 | background-color: #d2d7e4; 5 | 6 | } 7 | 8 | 9 | body { 10 | font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif; 11 | color: #000000; 12 | margin: 0; 13 | padding: 46px 0 0 0; 14 | } 15 | #smallbox { 16 | background-image: url(boxbg.gif); 17 | background-repeat: repeat-x; 18 | background-color: #FFFFFF; 19 | float: left; 20 | margin-right: 20px; 21 | width: 220px; 22 | border:1px solid #d2d7e4; 23 | } 24 | #content { 25 | margin: 0 4em 2em 4em; 26 | background-image: url(opaque.png); 27 | padding: 1em 50px 40px 1em; 28 | } 29 | h1 { 30 | padding: 0 0 6px 0; 31 | color: #41667f; 32 | font-size: 160%; 33 | font-weight: normal; 34 | background-color: transparent; 35 | } 36 | 37 | a:link, a:visited { 38 | color: #41667f; 39 | background-color: transparent; 40 | padding-right: 10px; 41 | } 42 | a:hover { 43 | background-image: url(arrow.gif); 44 | text-decoration: none; 45 | background-position: center right; 46 | background-repeat: no-repeat; 47 | } -------------------------------------------------------------------------------- /chapter02/listsmallmargin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 | 22 | 23 | -------------------------------------------------------------------------------- /chapter09/padding.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Padding 6 | 8 | 17 | 18 | 19 |

This paragraph should be displayed in the default style of the browser with a background color and border in order that we can see where it starts and finishes.

20 |

This is another paragraph that has the default browser styles so we can see how the spacing between the paragraphs displays when no margin or padding has been applied.

21 |

This paragraph has 40 pixels of padding applied using CSS. The padding creates additional space on the inside of the element.

22 | 23 | -------------------------------------------------------------------------------- /chapter02/zeropagegutter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 |

Ingredients

12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter02/zeropagemargin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

Chinese-style stuffed peppers

10 |

These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

11 |

Ingredients

12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter04/listnav_sub.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ffffff; 3 | color: #000000; 4 | margin: 0; 5 | padding: 1em; 6 | font: 1em Arial, Helvetica, sans-serif; 7 | } 8 | 9 | #navigation { 10 | width: 200px; 11 | } 12 | 13 | #navigation ul { 14 | list-style: none; 15 | margin: 0; 16 | padding: 0; 17 | } 18 | 19 | #navigation li { 20 | border-bottom: 1px solid #ED9F9F; 21 | } 22 | 23 | #navigation li a:link, #navigation li a:visited { 24 | font-size: 90%; 25 | display: block; 26 | padding: 0.4em 0 0.4em 0.5em; 27 | border-left: 12px solid #711515; 28 | border-right: 1px solid #711515; 29 | background-color: #B51032; 30 | color: #FFFFFF; 31 | text-decoration: none; 32 | } 33 | 34 | #navigation li a:hover { 35 | background-color: #711515; 36 | color: #FFFFFF; 37 | } 38 | 39 | #navigation ul ul { 40 | margin-left: 12px; 41 | } 42 | 43 | #navigation ul ul li { 44 | border-bottom: 1px solid #711515; 45 | margin:0; 46 | } 47 | 48 | #navigation ul ul a:link, #navigation ul ul a:visited { 49 | background-color: #ED9F9F; 50 | color: #711515; 51 | } 52 | 53 | #navigation ul ul a:hover { 54 | background-color: #711515; 55 | color: #FFFFFF; 56 | } -------------------------------------------------------------------------------- /chapter05/cal.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #FFFFFF; 3 | color: #000000; 4 | font-size: 90%; 5 | } 6 | .clmonth { 7 | border-collapse: collapse; 8 | width: 780px; 9 | } 10 | .clmonth caption { 11 | text-align: left; 12 | font: bold 110% Georgia, "Times New Roman", Times, serif; 13 | padding-bottom: 0.4em; 14 | } 15 | .clmonth th { 16 | border: 1px solid #AAAAAA; 17 | border-bottom: none; 18 | padding: 0.2em 0.6em 0.2em 0.6em; 19 | background-color: #CCCCCC; 20 | color: #3F3F3F; 21 | font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif; 22 | width: 110px; 23 | } 24 | .clmonth td { 25 | border: 1px solid #EAEAEA; 26 | font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif; 27 | padding: 0.2em 0.6em 0.2em 0.6em; 28 | vertical-align: top; 29 | } 30 | /*.clmonth td.previous, .clmonth td.next { 31 | background-color: #F6F6F6; 32 | color: #C6C6C6; 33 | } 34 | .clmonth td.active { 35 | background-color: #B1CBE1; 36 | color: #2B5070; 37 | border: 2px solid #4682B4; 38 | } 39 | .clmonth ul { 40 | list-style-type: none; 41 | margin: 0; 42 | padding-left: 1em; 43 | padding-right: 0.6em; 44 | } 45 | .clmonth li { 46 | margin-bottom: 1em; 47 | }*/ -------------------------------------------------------------------------------- /chapter03/backgrounds2.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | background-color: #D2D7E4; 4 | color: #000000; 5 | background-image: url(background-repeatx.jpg); 6 | background-repeat: repeat-x; 7 | } 8 | #smallbox { 9 | background-image: url(boxbg.gif); 10 | background-repeat: repeat-x; 11 | float: left; 12 | margin-right: 20px; 13 | width: 220px; 14 | border:1px solid #D2D7E4; 15 | } 16 | #content { 17 | margin: 2em 4em 2em 4em; 18 | background-color: #FFFFFF; 19 | padding: 1em 1em 40px 1em; 20 | background-image: url(tick.gif); 21 | background-repeat: no-repeat; 22 | background-position: bottom right; 23 | } 24 | h1 { 25 | background-image: url(dotty.gif); 26 | background-repeat: repeat-x; 27 | background-position: bottom left; 28 | padding: 0 0 6px 0; 29 | color: #41667F; 30 | font-size: 160%; 31 | font-weight: normal; 32 | background-color: transparent; 33 | } 34 | 35 | a:link, a:visited { 36 | color: #41667F; 37 | background-color: transparent; 38 | padding-right: 10px; 39 | } 40 | a:hover { 41 | background-image: url(arrow.gif); 42 | text-decoration: none; 43 | background-position: center right; 44 | background-repeat: no-repeat; 45 | } -------------------------------------------------------------------------------- /chapter07/basicstyles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Serving a basic stylesheet 6 | 7 | 10 | 11 | 12 | 13 |
14 |

Serving a basic style sheet to old browsers

15 | 16 |

CSS is now used so extensively on the Web that users of really old browsers such as Netscape 4 are going to have a fairly poor experience all in all. However, we can still be kind to users of really old browsers by at least making sure our advanced use of CSS doesn't crash their browser or cause the content to be completely unreadable. The way we do this is to serve a very simple style sheet to these browsers and attach our real style sheet using a manner that they are unable to understand.

17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /chapter03/backgrounds5.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-image: url(background-repeatx.jpg); 3 | background-repeat: repeat-x; 4 | background-color: #D2D7E4; 5 | } 6 | body { 7 | font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif; 8 | color: #000000; 9 | background-image: url(recipes.png); 10 | background-repeat: no-repeat; 11 | background-position:98% 2%; 12 | background-attachment:fixed; 13 | margin: 0; 14 | padding: 46px 0 0 0; 15 | } 16 | #content { 17 | margin: 0 4em 2em 4em; 18 | background-image: url(opaque.png); 19 | padding: 1em 50px 40px 1em; 20 | } 21 | #smallbox { 22 | background-image: url(boxbg.gif); 23 | background-repeat: repeat-x; 24 | background-color: #FFFFFF; 25 | float: left; 26 | margin-right: 20px; 27 | width: 220px; 28 | border:1px solid #D2D7E4; 29 | } 30 | h1 { 31 | padding: 0 0 6px 0; 32 | color: #41667F; 33 | font-size: 160%; 34 | font-weight: normal; 35 | background-color: transparent; 36 | } 37 | a:link, a:visited { 38 | color: #41667F; 39 | background-color: transparent; 40 | padding-right: 10px; 41 | } 42 | a:hover { 43 | background-image: url(arrow.gif); 44 | text-decoration: none; 45 | background-position: center right; 46 | background-repeat: no-repeat; 47 | } -------------------------------------------------------------------------------- /chapter09/niftyCorners.css: -------------------------------------------------------------------------------- 1 | /*Nifty Corners Cube CSS by Alessandro Fulciniti 2 | The following classes are added dinamically by javascript, 3 | and their use should be avoided in the markup */ 4 | 5 | b.niftycorners,b.niftyfill{display:block} 6 | b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px; 7 | overflow:hidden;border-style:solid;border-width: 0 1px} 8 | /*normal*/ 9 | b.r1{margin: 0 3px;border-width: 0 2px} 10 | b.r2{margin: 0 2px} 11 | b.r3{margin: 0 1px} 12 | b.r4{height: 2px} 13 | b.rb1{margin: 0 8px;border-width:0 2px} 14 | b.rb2{margin: 0 6px;border-width:0 2px} 15 | b.rb3{margin: 0 5px} 16 | b.rb4{margin: 0 4px} 17 | b.rb5{margin: 0 3px} 18 | b.rb6{margin: 0 2px} 19 | b.rb7{margin: 0 1px;height:2px} 20 | b.rb8{margin: 0;height:2px} 21 | b.rs1{margin: 0 1px} 22 | /*transparent inside*/ 23 | b.t1{border-width: 0 5px} 24 | b.t2{border-width: 0 3px} 25 | b.t3{border-width: 0 2px} 26 | b.t4{height: 2px} 27 | b.tb1{border-width: 0 10px} 28 | b.tb2{border-width: 0 8px} 29 | b.tb3{border-width: 0 6px} 30 | b.tb4{border-width: 0 5px} 31 | b.tb5{border-width: 0 4px} 32 | b.tb6{border-width: 0 3px} 33 | b.tb7{border-width: 0 2px;height:2px} 34 | b.tb8{border-width: 0 1px;height:2px} 35 | b.ts1{border-width: 0 2px} -------------------------------------------------------------------------------- /chapter09/margin.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Margins 6 | 8 | 17 | 18 | 19 |

This paragraph should be displayed in the default style of the browser with a background color and border in order that we can see where it starts and finishes.

20 |

This is another paragraph that has the default browser styles so we can see how the spacing between the paragraphs displays when no margin or padding has been applied.

21 |

This paragraph has a 40-pixel margin applied using CSS. The margin creates additional space on the outside of the element. Therefore the space between the border and the text is unchanged, but the space between this paragraph and the edge of the viewport and other paragraphs is increased.

22 | 23 | -------------------------------------------------------------------------------- /chapter09/gallery.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | CSS photo album 6 | 8 | 9 | 10 | 11 | 21 | 22 | -------------------------------------------------------------------------------- /chapter04/image_nav.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ffffff; 3 | color: #000000; 4 | margin: 0; 5 | padding: 1em; 6 | font: 1em Arial, Helvetica, sans-serif; 7 | } 8 | 9 | ul#nav { 10 | width: 360px; 11 | height: 30px; 12 | overflow:hidden; 13 | margin: 0; 14 | padding: 0; 15 | list-style: none; 16 | } 17 | 18 | ul#nav li { 19 | float: left; 20 | } 21 | 22 | ul#nav li a span { 23 | margin-left: -5000px; 24 | } 25 | 26 | ul#nav li a { 27 | display: block; 28 | background-image: url(reflectonav.gif); 29 | background-repeat: no-repeat; 30 | width: 75px; 31 | overflow:hidden; 32 | 33 | } 34 | 35 | ul#nav li.recipes a { 36 | background-position: 0 0; 37 | } 38 | 39 | ul#nav li.recipes a:hover { 40 | background-position: 0 -42px; 41 | } 42 | 43 | ul#nav li.contact a { 44 | background-position: -75px 0; 45 | width: 105px; 46 | } 47 | 48 | ul#nav li.contact a:hover { 49 | background-position: -75px -42px; 50 | } 51 | 52 | ul#nav li.articles a { 53 | background-position: -180px 0; 54 | width: 85px; 55 | } 56 | 57 | ul#nav li.articles a:hover { 58 | background-position: -180px -42px; 59 | } 60 | 61 | ul#nav li.buy a { 62 | background-position: -265px 0; 63 | width: 85px; 64 | } 65 | 66 | ul#nav li.buy a:hover { 67 | background-position: -265px -42px; 68 | } 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /chapter04/tabs.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: .8em/1.8em verdana, arial, sans-serif; 3 | background-color: #FFFFFF; 4 | color: #000000; 5 | margin: 0 10% 0 10%; 6 | } 7 | 8 | #header { 9 | float: left; 10 | width: 100%; 11 | border-bottom: 1px solid #8DA5FF; 12 | margin-bottom: 2em; 13 | } 14 | 15 | #header ul { 16 | margin: 0; 17 | padding: 2em 0 0 0; 18 | list-style: none; 19 | } 20 | 21 | #header li { 22 | float: left; 23 | background-image: url("images/tab_left.gif"); 24 | background-repeat: no-repeat; 25 | margin: 0 1px 0 0; 26 | padding: 0 0 0 8px; 27 | } 28 | 29 | #header a { 30 | float: left; 31 | display: block; 32 | background-image: url("images/tab_right.gif"); 33 | background-repeat: no-repeat; 34 | background-position: right top; 35 | padding: 0.2em 10px 0.2em 0; 36 | text-decoration: none; 37 | font-weight: bold; 38 | color: #333366; 39 | } 40 | #recipes #header li.recipes, 41 | #contact #header li.contact, 42 | #articles #header li.articles, 43 | #buy #header li.buy { 44 | background-image: url("images/tab_active_left.gif"); 45 | } 46 | #recipes #header li.recipes a, 47 | #contact #header li.contact a, 48 | #articles #header li.articles a, 49 | #buy #header li.buy a { 50 | background-image: url("images/tab_active_right.gif"); 51 | background-color: transparent; 52 | color:#FFFFFF; 53 | } 54 | -------------------------------------------------------------------------------- /chapter02/indent2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 2 5 | 6 | 7 | 8 | 9 |

One fine evening a young princess put on her bonnet and clogs, and went out to take a walk by herself in a wood, 10 | and when she came to a cool spring of water that rose in the midst of it, she sat herself down to rest awhile. Now 11 | she had in her hand a golden ball, which was her favorite plaything, and she was always tossing it up into the air 12 | and catching it again as it fell.

13 |
14 |

After a time she threw it up so high that she missed catching it as it fell, and the ball bounded away, and rolled 15 | along upon the ground till at last it fell down into the spring. The princess looked into the spring after her ball, 16 | but it was very deep, so deep that she could not see the bottom of it. Then she began to bewail her loss, and said, 17 | “Alas! If I could only get my ball again, I would give all my fine clothes and jewels, and everything that I have in 18 | the world.”

19 | 20 | -------------------------------------------------------------------------------- /chapter03/backgrounds4.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-image: url(background-repeatx.jpg); 3 | background-repeat: repeat-x; 4 | background-color: #D2D7E4; 5 | } 6 | body { 7 | font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif; 8 | color: #000000; 9 | background-image: url(recipes.gif); 10 | background-repeat: no-repeat; 11 | background-position:98% 2%; 12 | margin: 0; 13 | padding: 46px 0 0 0; 14 | } 15 | #smallbox { 16 | background-image: url(boxbg.gif); 17 | background-repeat: repeat-x; 18 | float: left; 19 | margin-right: 20px; 20 | width: 220px; 21 | border:1px solid #D2D7E4; 22 | } 23 | #content { 24 | margin: 0 4em 2em 4em; 25 | background-color: #FFFFFF; 26 | padding: 1em 1em 40px 1em; 27 | background-image: url(tick.gif); 28 | background-repeat: no-repeat; 29 | background-position: bottom right; 30 | } 31 | h1 { 32 | background-image: url(dotty.gif); 33 | background-repeat: repeat-x; 34 | background-position: bottom left; 35 | padding: 0 0 6px 0; 36 | color: #41667F; 37 | font-size: 160%; 38 | font-weight: normal; 39 | background-color: transparent; 40 | } 41 | a:link, a:visited { 42 | color: #41667F; 43 | background-color: transparent; 44 | padding-right: 10px; 45 | } 46 | a:hover { 47 | background-image: url(arrow.gif); 48 | text-decoration: none; 49 | background-position: center right; 50 | background-repeat: no-repeat; 51 | } -------------------------------------------------------------------------------- /chapter05/columns.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Styling table columns 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
Pool APool BPool CPool D
EnglandAustraliaNew ZealandFrance
South AfricaWalesScotlandIreland
SamoaFijiItalyArgentina
USACanadaRomaniaEurope 3
Repechage 2AsiaRepechage 1Namibia
56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /shared/archive.css: -------------------------------------------------------------------------------- 1 | /* 2 | * SitePoint code archive for The CSS Anthology, 2nd edition 3 | * (C) 2007 SitePoint Pty Ltd 4 | * 5 | * For more books and articles visit http://www.sitepoint.com/ 6 | * 7 | */ 8 | html { 9 | background-color: #003366; 10 | } 11 | body { 12 | color: #143f62; 13 | background-color: #fefff8; 14 | margin: 20px; 15 | padding: 20px; 16 | font-family: sans-serif; 17 | font-size: .75em; 18 | line-height: 1.4em; 19 | } 20 | a:hover { 21 | color: #ffffff; 22 | background-color: #ff6600; 23 | text-decoration: none; 24 | } 25 | h2 a { 26 | text-decoration: none; 27 | } 28 | h1 { 29 | font-size: 1.9em; 30 | font-weight: normal; 31 | text-transform: uppercase; 32 | text-align: right; 33 | margin-bottom: 6px; 34 | } 35 | h2 { 36 | color: #003366; 37 | font-size: 1.3em; 38 | padding: 10px 0 5px 0; 39 | margin-bottom: 10px; 40 | border-bottom: 1px solid #003366; 41 | } 42 | h3 { 43 | color: #ff3603; 44 | font-size: 1.2em; 45 | padding: 0; 46 | } 47 | ul li { 48 | font-weight: bold; 49 | } 50 | ul li a { 51 | font-weight: normal; 52 | } 53 | img { 54 | float: left; 55 | border: 0; 56 | } 57 | .subtitle { 58 | font-size: 0.6em; 59 | } 60 | .subsubtitle { 61 | font-size: 0.8em; 62 | } 63 | ol li { 64 | margin-bottom: 5px; 65 | } 66 | code { 67 | font-size: 1.3em; 68 | } 69 | #main { 70 | background: transparent url(book-cover.jpg) top right no-repeat; 71 | } -------------------------------------------------------------------------------- /chapter02/paragraph-1em.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 1em 6 | 8 | 13 | 14 | 15 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lectus tortor, varius sed, tincidunt eu, egestas a, ipsum. Sed mattis, orci eu porta facilisis, purus ipsum mollis nibh, eu laoreet wisi purus a sem. Pellentesque tortor sapien, sodales eu, feugiat eget, pulvinar quis, erat. Nulla congue dui. Pellentesque mollis bibendum tortor. Cras volutpat ipsum ac sapien.

16 |

Quisque sodales imperdiet enim. Quisque cursus turpis vitae mi. Proin fermentum, arcu ac fringilla consequat, ipsum turpis dignissim ipsum, sed pellentesque lacus eros vel nisl. Nullam iaculis. Duis sit amet nunc. Vivamus lectus nisl, facilisis at, pretium at, bibendum cursus, nibh. Cras in felis. Aenean sit amet nisl quis dolor gravida aliquam. Quisque mauris nunc, mattis vitae, dictum et, consectetuer tincidunt, nunc. Aenean pellentesque metus sed magna. Praesent vulputate. In odio felis, cursus ac, fermentum quis, tempor ut, neque. Aliquam consectetuer mattis tellus.

18 | -------------------------------------------------------------------------------- /chapter05/colgroups.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Styling table columns 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
Pool APool BPool CPool D
EnglandAustraliaNew ZealandFrance
South AfricaWalesScotlandIreland
SamoaFijiItalyArgentina
USACanadaRomaniaEurope 3
Repechage 2AsiaRepechage 1Namibia
60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /chapter03/backgrounds3.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | background-color: #D2D7E4; 4 | color: #000000; 5 | background-image: url(background-repeatx.jpg); 6 | background-repeat: repeat-x; 7 | } 8 | #smallbox { 9 | background-image: url(boxbg.gif); 10 | background-repeat: repeat-x; 11 | float: left; 12 | margin-right: 20px; 13 | width: 220px; 14 | border: 1px solid #D2D7E4; 15 | } 16 | 17 | #smallbox h2 { 18 | margin: 0; 19 | padding: 0.2em; 20 | background-image: url(boxheaderbg.jpg); 21 | background-repeat: no-repeat; 22 | color: #FFFFFF; 23 | background-color: red; 24 | font-size: 140%; 25 | font-weight: normal; 26 | } 27 | 28 | #content { 29 | margin: 2em 4em 2em 4em; 30 | background-color: #FFFFFF; 31 | padding: 1em 1em 40px 1em; 32 | background-image: url(tick.gif); 33 | background-repeat: no-repeat; 34 | background-position: bottom right; 35 | } 36 | 37 | h1 { 38 | background-image: url(dotty.gif); 39 | background-repeat: repeat-x; 40 | background-position: bottom left; 41 | padding: 0 0 6px 0; 42 | color: #41667F; 43 | font-size: 160%; 44 | font-weight: normal; 45 | background-color: transparent; 46 | } 47 | 48 | a:link, a:visited { 49 | color: #41667F; 50 | background-color: transparent; 51 | padding-right: 10px; 52 | } 53 | 54 | a:hover { 55 | background-image: url(arrow.gif); 56 | text-decoration: none; 57 | background-position: center right; 58 | background-repeat: no-repeat; 59 | } -------------------------------------------------------------------------------- /chapter09/center.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Centered Box 6 | 8 | 9 | 10 | 11 |
12 |

This box is 630 pixels wide and centered in the document.

13 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas in diam. Morbi a turpis vel nulla sodales venenatis. Quisque ac purus quis metus consectetuer sollicitudin. Nunc nec lectus ut wisi porta pharetra. Pellentesque nec sem quis est consectetuer pulvinar. Donec id nunc sit amet dolor mollis placerat. Pellentesque volutpat lacinia nibh. Cras pretium, quam vitae bibendum mattis, lorem nulla tristique eros, quis gravida mauris lorem nec diam. Etiam vulputate, purus sed gravida sodales, dolor elit tempus ante, in volutpat nisl lorem vel mi. Aliquam enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tellus mi, facilisis id, pretium et, rutrum quis, est. Sed mollis eros. Nunc mauris metus, pellentesque nec, condimentum ut, ultrices in, orci. Nullam arcu. Etiam a sapien. Donec malesuada hendrerit turpis. Suspendisse porta nulla et massa.

14 |
15 | 16 | -------------------------------------------------------------------------------- /chapter09/float.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Float 6 | 8 | 14 | 15 | 16 |

Chinese-style stuffed peppers

17 | peppers 18 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

19 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

20 |

Reduce the heat and add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

21 |

Core and remove the seeds of the peppers and cut them into quarters.

22 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

23 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

24 | 25 | -------------------------------------------------------------------------------- /chapter06/tablefree.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Table-free form layout 6 | 8 | 9 | 10 | 11 |

User Registration Form

12 |
13 |
14 | 15 | 16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 | 35 |
36 |
37 | 38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /chapter09/inline-block.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Inline and block level elements 6 | 8 | 30 | 31 | 32 |
A div is a block level element.
33 |

It is possible to display a div or any other block level element as an inline element.

34 |
This div is displaying as an inline element.
35 |

This paragraph contains a link that displays as an inline element.

36 |

This paragraph contains a link that displays as a block element.

37 | 38 | -------------------------------------------------------------------------------- /chapter09/2col-reverse.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background-color: #FFFFFF; 5 | color: #000000; 6 | font-family: Arial, Helvetica, sans-serif; 7 | border-top: 2px solid #2A4F6F; 8 | } 9 | #header { 10 | border-top: 1px solid #778899; 11 | border-bottom: 1px dotted #B2BCC6; 12 | height:3em; 13 | } 14 | #header .strapline { 15 | font: 120% Georgia, "Times New Roman", Times, serif; 16 | color: #778899; 17 | background-color: transparent; 18 | float: right; 19 | width: 300px; 20 | text-align: right; 21 | margin-right: 2em; 22 | margin-top: 0.5em; 23 | } 24 | #header .logo { 25 | float: left; 26 | width: 187px; 27 | margin-left: 1.5em; 28 | margin-top: 0.5em; 29 | } 30 | #nav { 31 | position: absolute; 32 | top: 5em; 33 | right: 1em; 34 | width: 14em; 35 | } 36 | #nav ul { 37 | list-style: none; 38 | margin: 0; 39 | padding: 0; 40 | } 41 | #nav li { 42 | font-size: 80%; 43 | border-bottom: 1px dotted #B2BCC6; 44 | margin-bottom: 0.3em; 45 | } 46 | #nav a:link, #nav a:visited { 47 | text-decoration: none; 48 | color: #2A4F6F; 49 | background-color: transparent; 50 | } 51 | #nav a:hover { 52 | color: #778899; 53 | } 54 | #nav h2 { 55 | font: 110% Georgia, "Times New Roman", Times, serif; 56 | color: #2A4F6F; 57 | background-color: transparent; 58 | border-bottom: 1px dotted #CCCCCC; 59 | } 60 | #content { 61 | margin-left: 2em; 62 | margin-right: 16em; 63 | } 64 | h1 { 65 | font: 150% Georgia, "Times New Roman", Times, serif; 66 | } 67 | #content p { 68 | font-size: 80%; 69 | line-height: 1.6em; 70 | } -------------------------------------------------------------------------------- /chapter06/elements.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | CSS styled form elements 6 | 8 | 9 | 10 | 11 |
12 |

13 |
14 |
15 | 21 |
22 |

23 | Male
25 | Female 27 |
28 |
29 |
30 | 32 |
33 |
34 | 36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /chapter09/float2.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Float 6 | 8 | 17 | 18 | 19 |

Chinese style stuffed peppers

20 | peppers 21 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

22 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

23 |

Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

24 |

Core and remove the seeds of the peppers and cut them into quarters.

25 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

26 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

27 | 28 | -------------------------------------------------------------------------------- /chapter09/2col.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background-color: #FFFFFF; 5 | color: #000000; 6 | font-family: Arial, Helvetica, sans-serif; 7 | border-top: 2px solid #2A4F6F; 8 | } 9 | #header { 10 | border-top: 1px solid #778899; 11 | border-bottom: 1px dotted #B2BCC6; 12 | height: 3em; 13 | } 14 | #header .strapline { 15 | font: 120% Georgia, "Times New Roman", Times, serif; 16 | color: #778899; 17 | background-color: transparent; 18 | float: right; 19 | width: 300px; 20 | text-align: right; 21 | margin-right: 2em; 22 | margin-top: 0.5em; 23 | } 24 | #header .logo { 25 | float: left; 26 | width: 187px; 27 | margin-left: 1.5em; 28 | margin-top: 0.5em; 29 | } 30 | #nav { 31 | position: absolute; 32 | top: 5em; 33 | left: 1em; 34 | width: 14em; 35 | } 36 | #content { 37 | margin-left: 16em; 38 | margin-right: 2em; 39 | } 40 | #nav ul { 41 | list-style: none; 42 | margin: 0; 43 | padding: 0; 44 | } 45 | #nav li { 46 | font-size: 80%; 47 | border-bottom: 1px dotted #B2BCC6; 48 | margin-bottom: 0.3em; 49 | } 50 | #nav a:link, #nav a:visited { 51 | text-decoration: none; 52 | color: #2A4F6F; 53 | background-color: transparent; 54 | } 55 | #nav a:hover { 56 | color: #778899; 57 | } 58 | #nav h2 { 59 | font: 110% Georgia, "Times New Roman", Times, serif; 60 | color: #2A4F6F; 61 | background-color: transparent; 62 | border-bottom: 1px dotted #CCCCCC; 63 | } 64 | 65 | h1 { 66 | font: 150% Georgia, "Times New Roman", Times, serif; 67 | } 68 | #content p { 69 | font-size: 80%; 70 | line-height: 1.6em; 71 | } -------------------------------------------------------------------------------- /chapter08/main2.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | #navigation { 6 | font: 90% Arial, Helvetica, sans-serif; 7 | position: absolute; 8 | left: 0; 9 | top: 41px; 10 | } 11 | #navigation ul { 12 | list-style: none; 13 | margin: 0; 14 | padding: 0; 15 | border: none; 16 | } 17 | #navigation li { 18 | border-bottom: 1px solid #ED9F9F; 19 | margin: 0; 20 | } 21 | #navigation li a:link, #navigation li a:visited { 22 | display: block; 23 | padding: 5px 5px 5px 0.5em; 24 | border-left: 12px solid #711515; 25 | border-right: 1px solid #711515; 26 | background-color: #B51032; 27 | color: #FFFFFF; 28 | text-decoration: none; 29 | } 30 | #navigation li a:hover { 31 | background-color: #711515; 32 | color: #FFFFFF; 33 | } 34 | #banner { 35 | background-color: #711515; 36 | border-bottom: 1px solid #ED9F9F; 37 | text-align: right; 38 | padding-right: 20px; 39 | margin-top: 0; 40 | } 41 | #banner ul { 42 | margin: 0; 43 | } 44 | #banner li { 45 | display: inline; 46 | } 47 | #banner a:link, #banner a:visited { 48 | font: 80% Arial, Helvetica, sans-serif; 49 | color: #FFFFFF 50 | background-color: transparent; 51 | } 52 | #content p, #content li { 53 | font: 80%/1.6em Arial, Helvetica, sans-serif; 54 | } 55 | #content p { 56 | margin-left: 1.5em; 57 | } 58 | #content h1, #content h2 { 59 | font: 140% Georgia, "Times New Roman", Times, serif; 60 | color: #B51032; 61 | background-color: transparent; 62 | } 63 | #content h2 { 64 | font: 120% Georgia, "Times New Roman", Times, serif; 65 | padding-bottom: 3px; 66 | border-bottom: 1px dotted #ED9F9F; 67 | } -------------------------------------------------------------------------------- /chapter06/textonly.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Labelled fields 6 | 8 | 9 | 10 | 11 |

User Registration Form

12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 36 | 37 |
38 |

39 | 40 |

41 |
42 | 43 | -------------------------------------------------------------------------------- /chapter08/main.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | #navigation { 6 | width: 200px; 7 | font: 90% Arial, Helvetica, sans-serif; 8 | position: absolute; 9 | top: 41px; 10 | left: 0; 11 | } 12 | #navigation ul { 13 | list-style: none; 14 | margin: 0; 15 | padding: 0; 16 | border: none; 17 | } 18 | #navigation li { 19 | border-bottom: 1px solid #ED9F9F; 20 | margin: 0; 21 | } 22 | #navigation li a:link, #navigation li a:visited { 23 | display: block; 24 | padding: 5px 5px 5px 0.5em; 25 | border-left: 12px solid #711515; 26 | border-right: 1px solid #711515; 27 | color: #FFFFFF; 28 | background-color: #b51032; 29 | text-decoration: none; 30 | } 31 | #navigation li a:hover { 32 | color: #FFFFFF; 33 | background-color: #711515; 34 | } 35 | #content { 36 | margin-left: 260px; 37 | margin-right: 60px; 38 | } 39 | #banner { 40 | height: 40px; 41 | background-color: #711515; 42 | border-bottom: 1px solid #ED9F9F; 43 | text-align: right; 44 | padding-right: 20px; 45 | margin-top: 0; 46 | } 47 | #banner ul { 48 | margin: 0; 49 | padding: 0; 50 | } 51 | #banner li { 52 | display: inline; 53 | } 54 | #banner a:link, #banner a:visited { 55 | font: 80% Arial, Helvetica, sans-serif; 56 | color: #FFFFFF; 57 | background-color: transparent; 58 | } 59 | #content p, #content li { 60 | font: 80%/1.6em Arial, Helvetica, sans-serif; 61 | } 62 | #content p { 63 | margin-left: 1.5em; 64 | } 65 | #content h1, #content h2 { 66 | font: 140% Georgia, "Times New Roman", Times, serif; 67 | } 68 | #content h2 { 69 | font: 120% Georgia, "Times New Roman", Times, serif; 70 | padding-bottom: 3px; 71 | } -------------------------------------------------------------------------------- /chapter09/2col-fixedwidth.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: Arial, Helvetica, sans-serif; 5 | background-color: #FFFFFF; 6 | } 7 | #wrapper { 8 | position: relative; 9 | width: 760px; 10 | margin-right: auto; 11 | margin-left: auto; 12 | margin-bottom: 1em; 13 | } 14 | #header { 15 | background-image: url(kitchen.jpg); 16 | background-repeat: no-repeat; 17 | height: 200px; 18 | position: relative; 19 | } 20 | #header h1 { 21 | margin: 0; 22 | padding: 0.3em 10px 0.3em 0; 23 | text-align: right; 24 | width: 750px; 25 | font-weight: normal; 26 | color: #FFFFFF; 27 | font-size: 190%; 28 | position: absolute; 29 | bottom: 0; 30 | left: 0; 31 | background-image: url(black80percent.png); 32 | } 33 | #content { 34 | margin-left: 250px; 35 | width: 500px; 36 | padding: 0 10px 0 0; 37 | } 38 | #content h2 { 39 | font-size: 120%; 40 | color: #3333FF; 41 | background-color: transparent; 42 | margin: 0; 43 | padding: 1.4em 0 0 0; 44 | } 45 | #content p { 46 | font-size: 80%; 47 | line-height: 1.6; 48 | } 49 | #nav { 50 | position: absolute; 51 | top: 200px; 52 | left: 0; 53 | width: 230px; 54 | } 55 | #nav ul { 56 | list-style: none; 57 | margin: 3em 0 0 0; 58 | padding: 0; 59 | border: none; 60 | } 61 | #nav li { 62 | font-size: 85%; 63 | } 64 | #nav a:link, #nav a:visited { 65 | color: #555555; 66 | background-color: transparent; 67 | display: block; 68 | padding: 1em 0 0 10px; 69 | text-decoration: none; 70 | min-height: 40px; 71 | } 72 | #nav a:hover, #nav li.cur a:link, #nav li.cur a:visited { 73 | color: #FFFFFF; 74 | background-image: url(arrow.gif); 75 | background-repeat: no-repeat; 76 | } 77 | 78 | 79 | -------------------------------------------------------------------------------- /chapter05/alternate.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Alternating row colors 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
Student List
Student NameDate of BirthClassID
Joe Bloggs27/08/1997Mrs Jones12009
William Smith20/07/1997Mrs Jones12010
Jane Toad21/07/1997Mrs Jones12030
Amanda Williams19/03/1997Mrs Edwards12021
Kylie Jameson18/05/1997Mrs Jones12022
Louise Smith17/07/1997Mrs Edwards12019
James Jones04/04/1997Mrs Edwards12007
62 | 63 | -------------------------------------------------------------------------------- /chapter03/backgrounds.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - an image used as a background image 5 | 6 | 7 | 8 | 9 |
10 |

Chinese-style stuffed peppers

11 | 22 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

23 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

24 |

Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

25 |

Core and remove the seeds of the peppers and cut them into quarters.

26 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

27 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

28 |
29 | 30 | -------------------------------------------------------------------------------- /chapter03/backgroundposition.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - positioning background images 5 | 6 | 7 | 8 | 9 |
10 |

Chinese-style stuffed peppers

11 | 22 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

23 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

24 |

Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

25 |

Core and remove the seeds of the peppers and cut them into quarters.

26 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

27 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

28 |
29 | 30 | -------------------------------------------------------------------------------- /chapter03/backgroundfixed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - a fixed background image 5 | 6 | 7 | 8 | 9 |
10 |

Chinese-style stuffed peppers

11 | 22 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

23 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

24 |

Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

25 |

Core and remove the seeds of the peppers and cut them into quarters.

26 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

27 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

28 |
29 | 30 | -------------------------------------------------------------------------------- /chapter05/cal_mini.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Mini Calendar 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
June 2009
MTWTFSS
31123456
78910111213
14151617181920
21222324252627
2829301234
68 | 69 | 70 | -------------------------------------------------------------------------------- /chapter08/highcontrast.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 0; 3 | padding: 0; 4 | background-color: #000000; 5 | color: #FFFFFF; 6 | } 7 | #navigation { 8 | width: 200px; 9 | font: 90% Arial, Helvetica, sans-serif; 10 | position: absolute; 11 | top: 41px; 12 | left: 0; 13 | } 14 | #navigation ul { 15 | list-style: none; 16 | margin: 0; 17 | padding: 0; 18 | border: none; 19 | } 20 | #navigation li { 21 | border-bottom: 1px solid #ED9F9F; 22 | margin: 0; 23 | } 24 | #navigation li a:link, #navigation li a:visited { 25 | display: block; 26 | padding: 5px 5px 5px 0.5em; 27 | border-left: 12px solid #711515; 28 | border-right: 1px solid #711515; 29 | color: #FFFFFF; 30 | background-color: #b51032; 31 | text-decoration: none; 32 | } 33 | #navigation li a:hover { 34 | color: #FFFFFF; 35 | background-color: #711515; 36 | } 37 | #content { 38 | margin-left: 260px; 39 | margin-right: 60px; 40 | } 41 | #banner { 42 | height: 40px; 43 | background-color: #711515; 44 | border-bottom: 1px solid #ED9F9F; 45 | text-align: right; 46 | padding-right: 20px; 47 | margin-top: 0; 48 | } 49 | #banner ul { 50 | margin: 0; 51 | padding: 0; 52 | } 53 | #banner li { 54 | display: inline; 55 | } 56 | #banner a:link, #banner a:visited { 57 | font: 80% Arial, Helvetica, sans-serif; 58 | color: #FFFFFF; 59 | background-color: transparent; 60 | } 61 | #content p, #content li { 62 | font: 80%/1.6em Arial, Helvetica, sans-serif; 63 | } 64 | #content p { 65 | margin-left: 1.5em; 66 | } 67 | #content h1, #content h2 { 68 | font: 140% Georgia, "Times New Roman", Times, serif; 69 | color: #FFFFFF; 70 | background-color: transparent; 71 | } 72 | #content h2 { 73 | font: 120% Georgia, "Times New Roman", Times, serif; 74 | padding-bottom: 3px; 75 | border-bottom: 1px dotted #CCCCCC; 76 | } -------------------------------------------------------------------------------- /chapter03/backgrounds4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - two background images 5 | 6 | 7 | 8 | 9 |
10 |

Chinese-style stuffed peppers

11 |
12 | 23 |
24 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

25 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

26 |

Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

27 |

Core and remove the seeds of the peppers and cut them into quarters.

28 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

29 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

30 |

Back to the main menu

31 |
32 | 33 | -------------------------------------------------------------------------------- /chapter03/backgrounds2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - background image applied to a link 5 | 6 | 7 | 8 | 9 |
10 |

Chinese-style stuffed peppers

11 |
12 | 23 |
24 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

25 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

26 |

Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

27 |

Core and remove the seeds of the peppers and cut them into quarters.

28 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

29 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

30 |

Back to the main menu

31 |
32 | 33 | -------------------------------------------------------------------------------- /chapter03/backgrounds5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - using transparent images for opacity 5 | 6 | 7 | 8 | 9 |
10 |

Chinese-style stuffed peppers

11 |
12 | 23 |
24 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

25 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

26 |

Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

27 |

Core and remove the seeds of the peppers and cut them into quarters.

28 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

29 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

30 |

Back to the main menu

31 |
32 | 33 | -------------------------------------------------------------------------------- /chapter05/table.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Spreadsheet data 6 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
13 | Yearly Income 1999 - 2002 14 |
1999200020012002
Grants11,98012,6509,70010,600
Donations4,7804,9896,7006,590
Investments8,0008,1008,7608,490
Fundraising3,2003,1203,7004,210
Sales28,40027,10027,95029,050
Miscellaneous2,1001,9001,3001,760
Total58,46057,85958,11060,700
72 | 73 | 74 | -------------------------------------------------------------------------------- /chapter05/spreadsheet.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Spreadsheet data 6 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
13 | Yearly Income 1999 - 2002 14 |
1999200020012002
Grants11,98012,6509,70010,600
Donations4,7804,9896,7006,590
Investments8,0008,1008,7608,490
Fundraising3,2003,1203,7004,210
Sales28,40027,10027,95029,050
Miscellaneous2,1001,9001,3001,760
Total58,46057,85958,11060,700
72 | 73 | -------------------------------------------------------------------------------- /chapter03/backgrounds3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 3 - text on background images 5 | 6 | 7 | 8 | 9 |
10 |

Chinese-style stuffed peppers

11 |
12 |

Ingredients

13 | 24 |
25 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

26 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

27 |

Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

28 |

Core and remove the seeds of the peppers and cut them into quarters.

29 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

30 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

31 |

Back to the main menu

32 |
33 | 34 | -------------------------------------------------------------------------------- /chapter05/borderstyles.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Spreadsheet data 6 | 8 | 9 | 10 | 11 |
blah blah blah
12 | 13 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
14 | Yearly Income 1999 - 2002 15 |
1999200020012002
Grants11,98012,6509,70010,600
Donations4,7804,9896,7006,590
Investments8,0008,1008,7608,490
Fundraising3,2003,1203,7004,210
Sales28,40027,10027,95029,050
Miscellaneous2,1001,9001,3001,760
Total58,46057,85958,11060,700
73 | 74 | 75 | -------------------------------------------------------------------------------- /chapter05/hiliterow.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Highlighting rows 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
Student List
Student NameDate of BirthClassID
Joe Bloggs27/08/1997Mrs Jones12009
William Smith20/07/1997Mrs Jones12010
Jane Toad21/07/1997Mrs Jones 12030
Amanda Williams19/03/1997Mrs Edwards12021
Kylie Jameson18/05/1997Mrs Jones12022
Louise Smith17/07/1997Mrs Edwards12019
James Jones04/04/1997Mrs Edwards12007
62 | 73 | 74 | -------------------------------------------------------------------------------- /chapter09/2col-fixedwidth-float.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: Arial, Helvetica, sans-serif; 5 | background-color: #FFFFFF; 6 | } 7 | #wrapper { 8 | position: relative; 9 | width: 760px; 10 | margin-right: auto; 11 | margin-left: auto; 12 | margin-bottom: 1em; 13 | background-image: url(sidebar.gif); 14 | background-repeat: repeat-y; 15 | border-right: 1px solid #888888; 16 | border-bottom: 1px solid #888888; 17 | } 18 | #header { 19 | background-image: url(kitchen.jpg); 20 | background-repeat: no-repeat; 21 | height: 200px; 22 | position: relative; 23 | } 24 | #header h1 { 25 | margin: 0; 26 | padding: 0.3em 10px 0.3em 0; 27 | text-align: right; 28 | width: 750px; 29 | font-weight: normal; 30 | color: #FFFFFF; 31 | font-size: 190%; 32 | position: absolute; 33 | bottom: 0; 34 | left: 0; 35 | background-image: url(black80percent.png); 36 | } 37 | #content { 38 | float: right; 39 | width: 500px; 40 | padding: 0 10px 0 0; 41 | } 42 | #content h2 { 43 | font-size: 120%; 44 | color: #3333FF; 45 | background-color: transparent; 46 | margin: 0; 47 | padding: 1.4em 0 0 0; 48 | } 49 | #content p { 50 | font-size: 80%; 51 | line-height: 1.6; 52 | } 53 | #nav { 54 | float: left; 55 | width: 230px; 56 | } 57 | #nav ul { 58 | list-style: none; 59 | margin: 3em 0 0 0; 60 | padding: 0; 61 | border: none; 62 | } 63 | #nav li { 64 | font-size: 85%; 65 | } 66 | #nav a:link, #nav a:visited { 67 | color: #555555; 68 | background-color: transparent; 69 | display: block; 70 | padding: 1em 0 0 10px; 71 | text-decoration: none; 72 | min-height: 40px; 73 | } 74 | #nav a:hover, #nav li.cur a:link, #nav li.cur a:visited { 75 | color: #FFFFFF; 76 | background-image: url(arrow.gif); 77 | background-repeat: no-repeat; 78 | } 79 | #footer { 80 | clear: both; 81 | font-size: 80%; 82 | padding: 1em 0 1em 0; 83 | margin-left: 250px; 84 | color: #999999; 85 | background-color: transparent; 86 | } -------------------------------------------------------------------------------- /chapter06/fieldset.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Field sets 6 | 8 | 9 | 10 | 11 |

User Registration Form

12 |
13 |
14 | Personal Information 15 |
16 | 17 | 18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 |
32 |
33 | Address Details 34 |
35 | 36 | 37 |
38 |
39 | 40 | 41 |
42 |
43 | 44 | 45 |
46 |
47 | 48 | 49 |
50 |
51 |
52 | 53 |
54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /chapter09/2col-fixedwidth-table.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: Arial, Helvetica, sans-serif; 5 | background-color: #FFFFFF; 6 | text-align: center; 7 | } 8 | #wrapper { 9 | position: relative; 10 | text-align: left; 11 | width: 760px; 12 | margin-right: auto; 13 | margin-left: auto; 14 | margin-bottom: 1em; 15 | border-right: 1px solid #888888; 16 | border-bottom: 1px solid #888888; 17 | } 18 | #header { 19 | background-image: url(kitchen.jpg); 20 | background-repeat:no-repeat; 21 | height:200px; 22 | position:relative; 23 | } 24 | #header h1 { 25 | margin: 0; 26 | padding: 0.3em 10px 0.3em 0; 27 | text-align: right; 28 | width: 750px; 29 | font-weight:normal; 30 | color: #FFFFFF; 31 | font-size: 190%; 32 | position:absolute; 33 | bottom: 0; 34 | left: 0; 35 | background-image: url(black80percent.png); 36 | } 37 | #main { 38 | display: table; 39 | } 40 | #content { 41 | display: table-cell; 42 | width: 500px; 43 | padding: 0 10px 0 20px; 44 | } 45 | #content h2 { 46 | font-size: 120%; 47 | color: #3333FF; 48 | background-color: transparent; 49 | margin: 0; 50 | padding: 1.4em 0 0 0; 51 | } 52 | #content p { 53 | font-size: 80%; 54 | line-height: 1.6; 55 | } 56 | #nav { 57 | display: table-cell; 58 | width: 230px; 59 | background-image: url(sidebar.gif); 60 | background-repeat:repeat-y; 61 | } 62 | #nav ul { 63 | list-style: none; 64 | margin: 3em 0 0 0; 65 | padding: 0; 66 | border: none; 67 | } 68 | #nav li { 69 | font-size: 85%; 70 | } 71 | #nav a:link, #nav a:visited { 72 | color: #555555; 73 | background-color:transparent; 74 | display:block; 75 | padding: 1em 0 0 10px; 76 | text-decoration:none; 77 | min-height: 40px; 78 | } 79 | #nav a:hover, #nav li.cur a:link, #nav li.cur a:visited { 80 | color: #FFFFFF; 81 | background-image: url(arrow.gif); 82 | background-repeat: no-repeat; 83 | } 84 | #footer { 85 | font-size: 80%; 86 | padding: 1em 0 1em 0; 87 | color: #999999; 88 | background-color: transparent; 89 | } -------------------------------------------------------------------------------- /chapter07/bgsleight.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 7 - transparent PNGs in IE6 5 | 6 | 7 | 8 | 17 | 18 | 19 |
20 |

Chinese style stuffed peppers

21 |
22 | 33 |
34 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

35 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

36 |

Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

37 |

Core and remove the seeds of the peppers and cut them into quarters.

38 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

39 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

40 |

Back to the main menu

41 |
42 | 43 | -------------------------------------------------------------------------------- /chapter07/bgsleight.js: -------------------------------------------------------------------------------- 1 | function addLoadEvent(func) { 2 | var oldonload = window.onload; 3 | if (typeof window.onload != 'function') { 4 | window.onload = func; 5 | } else { 6 | window.onload = function() { 7 | if (oldonload) { 8 | oldonload(); 9 | } 10 | func(); 11 | } 12 | } 13 | } 14 | 15 | var bgsleight = function() { 16 | 17 | function fnLoadPngs() { 18 | var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, ''); 19 | var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5); 20 | for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) { 21 | if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) { 22 | fnFixPng(obj); 23 | obj.attachEvent("onpropertychange", fnPropertyChanged); 24 | } 25 | if ((obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position == ''){ 26 | obj.style.position = 'relative'; 27 | 28 | } 29 | } 30 | } 31 | 32 | function fnPropertyChanged() { 33 | if (window.event.propertyName == "style.backgroundImage") { 34 | var el = window.event.srcElement; 35 | if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) { 36 | var bg = el.currentStyle.backgroundImage; 37 | var src = bg.substring(5,bg.length-2); 38 | el.filters.item(0).src = src; 39 | el.style.backgroundImage = "url(x.gif)"; 40 | } 41 | } 42 | } 43 | 44 | function fnFixPng(obj) { 45 | var mode = 'scale'; 46 | var bg = obj.currentStyle.backgroundImage; 47 | var src = bg.substring(5,bg.length-2); 48 | if (obj.currentStyle.backgroundRepeat == 'no-repeat') mode = 'crop'; 49 | obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')"; 50 | obj.style.backgroundImage = "url(/img/shim.gif)"; 51 | } 52 | 53 | return { 54 | init: function() { 55 | if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) { 56 | addLoadEvent(fnLoadPngs); 57 | } 58 | } 59 | } 60 | }(); 61 | 62 | bgsleight.init(); -------------------------------------------------------------------------------- /chapter09/3col.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background-image: url(tomato_bg.jpg); 5 | background-repeat: no-repeat; 6 | background-color: #FFFFFF; 7 | } 8 | p { 9 | font: 80%/1.8em Verdana, Geneva, Arial, Helvetica, sans-serif; 10 | padding-top: 0; 11 | margin-top: 0; 12 | } 13 | form { 14 | margin: 0; 15 | padding: 0; 16 | } 17 | #content { 18 | margin: 66px 260px 0px 240px; 19 | padding: 10px; 20 | } 21 | #content h1 { 22 | text-align: right; 23 | padding-right: 20px; 24 | font: 150% Georgia, "Times New Roman", Times, serif; 25 | color: #901602; 26 | } 27 | #side1 { 28 | position: absolute; 29 | width: 200px; 30 | top: 30px; 31 | left: 10px; 32 | padding: 70px 10px 10px 10px; 33 | } 34 | #side2 { 35 | position: absolute; 36 | width: 220px; 37 | top: 30px; 38 | right: 10px; 39 | padding: 70px 10px 10px 10px; 40 | border-left: 1px dotted #CCCCCC; 41 | background-image: url(sm-tomato.jpg); 42 | background-position: top right; 43 | background-repeat: no-repeat; 44 | } 45 | #side2 h3 { 46 | font: 110% Georgia, "Times New Roman", Times, serif; 47 | margin: 0; 48 | padding-bottom: 4px; 49 | } 50 | .adbox { 51 | padding: 2px 4px 2px 6px; 52 | margin: 0 0 10px 0; 53 | border: 1px dotted #B1B1B1; 54 | background-color: #F4F4F4; 55 | } 56 | #side1 h3 { 57 | font: 110% Georgia, "Times New Roman", Times, serif; 58 | color: #621313; 59 | background-color: transparent; 60 | margin: 0; 61 | padding-bottom: 4px; 62 | } 63 | #side1 .txt { 64 | width: 184px; 65 | background-color: #FCF5F5; 66 | border: 1px inset #901602; 67 | } 68 | #side1 ul { 69 | list-style: none; 70 | margin-left: 0; 71 | padding-left: 0; 72 | width: 184px; 73 | } 74 | #side1 li { 75 | font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif; 76 | margin-bottom: 0.3em; 77 | border-bottom: 1px solid #E7AFAF; 78 | } 79 | #side1 a:link, #side1 a:visited { 80 | text-decoration: none; 81 | color: #901602; 82 | background-color: transparent; 83 | } 84 | #side1 a:hover { 85 | color: #621313; 86 | } -------------------------------------------------------------------------------- /chapter04/tabs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chapter 4 - Tabbed Navigation 5 | 6 | 7 | 8 | 9 | 17 |
18 |

Recipes

19 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis tellus sit amet diam consectetuer scelerisque. Nulla facilisi. Praesent sit amet justo. Sed mattis arcu sed nisl. Vestibulum ante urna, gravida rhoncus, porta vel, sodales id, nisl. Vestibulum lectus velit, dignissim quis, molestie vel, iaculis quis, tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sollicitudin dolor quis dolor. Donec at nisl ac felis vestibulum placerat. Fusce sollicitudin tristique nibh. Donec aliquam. Proin vitae neque iaculis dolor eleifend rhoncus. Curabitur dictum lobortis arcu. Vivamus tincidunt metus at justo. Aliquam dui. Nulla semper, nunc sit amet viverra placerat, mauris wisi sodales massa, et tincidunt sapien nisl eget nulla. Vivamus a neque vel quam cursus tincidunt. Fusce porttitor justo nec nisl. In vel velit eget tortor feugiat placerat.

20 |

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam nulla nunc, interdum nec, interdum non, hendrerit in, enim. Donec eget risus. In eget neque vel nunc posuere iaculis. In adipiscing justo in enim. Donec commodo, dui ac pharetra interdum, libero wisi tincidunt arcu, sed ornare magna velit vel elit. Sed nec risus a massa imperdiet euismod. Nunc hendrerit. Fusce sit amet eros. Etiam vitae nulla at lectus fermentum rhoncus.

21 |
22 | 23 | -------------------------------------------------------------------------------- /chapter06/accesskeys.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Access keys 6 | 8 | 9 | 10 | 11 |

User Registration Form

12 |
13 |
14 | Personal Information 15 |
16 | 17 | 18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 |
32 |
33 | Address Details 34 |
35 | 36 | 37 |
38 |
39 | 40 | 41 |
42 |
43 | 44 | 45 |
46 |
47 | 48 | 49 |
50 |
51 |
52 | 53 |
54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /chapter09/float-clear.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | float and clear 6 | 8 | 23 | 24 | 25 |

Chinese style stuffed peppers

26 | peppers 27 | 38 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

39 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

40 |

Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

41 |

Core and remove the seeds of the peppers and cut them into quarters.

42 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

43 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

44 | 45 | -------------------------------------------------------------------------------- /chapter08/print-stylesheet.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Print Style Sheet 6 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Chinese style stuffed peppers

15 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

16 |

Ingredients

17 | 28 |

Method

29 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

30 |

Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

31 |

Core and remove the seeds of the peppers and cut them into quarters.

32 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

33 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

34 |
35 | 43 | 44 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The CSS Anthology: 101 Tips, Tricks & Hacks 5 | 6 | 7 | 8 | 9 | 10 | SitePoint logo 11 |

The CSS Anthology
12 | 101 Essential Tips, Tricks & Hacks
13 | 3rd Edition

14 |

Code Archive & Resources

15 |
16 |

Book Chapters

17 |
    18 |
  1. Chapter 1 — Making a Start with CSS 19 |
      20 |
    • No files required for this chapter
      • 21 |
    22 |
    2. 23 |
  2. Chapter 2 — Text Styling and Other Basics 24 |
    3. 25 |
  3. Chapter 3 — CSS and Images 26 |
    4. 27 |
  4. Chapter 4 — Navigation 28 |
    5. 29 |
  5. Chapter 5 — Tabular Data 30 |
    6. 31 |
  6. Chapter 6 — Forms and User Interfaces 32 |
    7. 33 |
  7. Chapter 7 — Cross-browser Techniques 34 |
    8. 35 |
  8. Chapter 8 — Accessibility and Alternate Devices 36 |
    9. 37 |
  9. Chapter 9 — CSS Positioning and Layout 38 |
    10. 39 |
40 |
41 |

Links

42 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /chapter09/2col-fixedwidth.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Recipe for Success | Perfect Pizza 6 | 7 | 9 | 10 | 11 |
12 | 15 |
16 |

Choosing Your Toppings

17 |

Sed nec erat sed sem molestie congue. Cras lacus sapien, ultrices ac, mattis quis, lobortis eu, turpis. Aliquam egestas arcu a massa. In hendrerit odio eget lectus. Nullam iaculis ultricies ipsum. Nullam id felis. Phasellus at metus sed velit luctus semper. Cras wisi diam, pharetra sed, pharetra ac, sodales in, quam. Nullam facilisis. Aliquam rhoncus sapien ac dui. Donec mattis ipsum. Nulla a nunc id orci mollis semper. Vestibulum porta quam a dolor.

18 |

Vestibulum dictum massa at odio. In dignissim ante id dui. Morbi rhoncus elit ac ipsum. Curabitur a elit. Phasellus in lorem quis turpis imperdiet accumsan. Suspendisse potenti. Curabitur a enim sed lacus tempor venenatis. Mauris sed ipsum sit amet leo dictum scelerisque. Suspendisse a lectus. Aliquam nec felis at erat sagittis pretium. Nunc id augue pharetra augue commodo tincidunt. Praesent placerat, diam quis porttitor lobortis, orci arcu nonummy sapien, at venenatis ipsum wisi non wisi. Sed bibendum nunc at justo. Vestibulum leo lacus, lobortis vel, interdum ac, varius non, augue. Nam rhoncus dictum libero. Donec porttitor porta lectus. Vivamus consectetuer feugiat wisi. Morbi sit amet nibh eget nibh feugiat porttitor.

19 |
20 | 28 |
29 | 30 | -------------------------------------------------------------------------------- /chapter09/2col-fixedwidth-float.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Recipe for Success | Perfect Pizza 6 | 7 | 9 | 10 | 11 |
12 | 15 |
16 |

Choosing Your Toppings

17 |

Sed nec erat sed sem molestie congue. Cras lacus sapien, ultrices ac, mattis quis, lobortis eu, turpis. Aliquam egestas arcu a massa. In hendrerit odio eget lectus. Nullam iaculis ultricies ipsum. Nullam id felis. Phasellus at metus sed velit luctus semper. Cras wisi diam, pharetra sed, pharetra ac, sodales in, quam. Nullam facilisis. Aliquam rhoncus sapien ac dui. Donec mattis ipsum. Nulla a nunc id orci mollis semper. Vestibulum porta quam a dolor.

18 |

Vestibulum dictum massa at odio. In dignissim ante id dui. Morbi rhoncus elit ac ipsum. Curabitur a elit. Phasellus in lorem quis turpis imperdiet accumsan. Suspendisse potenti. Curabitur a enim sed lacus tempor venenatis. Mauris sed ipsum sit amet leo dictum scelerisque. Suspendisse a lectus. Aliquam nec felis at erat sagittis pretium. Nunc id augue pharetra augue commodo tincidunt. Praesent placerat, diam quis porttitor lobortis, orci arcu nonummy sapien, at venenatis ipsum wisi non wisi. Sed bibendum nunc at justo. Vestibulum leo lacus, lobortis vel, interdum ac, varius non, augue. Nam rhoncus dictum libero. Donec porttitor porta lectus. Vivamus consectetuer feugiat wisi. Morbi sit amet nibh eget nibh feugiat porttitor.

19 |
20 | 28 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /chapter08/alternate-stylesheets.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Alternate Style Sheet 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Chinese style stuffed peppers

17 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

18 |

Ingredients

19 | 30 |

Method

31 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

32 |

Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

33 |

Core and remove the seeds of the peppers and cut them into quarters.

34 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

35 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

36 |
37 | 45 | 46 | -------------------------------------------------------------------------------- /chapter08/alternate-stylesheets2.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Alternate Style Sheet 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Chinese style stuffed peppers

17 |

These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.

18 |

Ingredients

19 | 30 |

Method

31 |

Heat the oil in a wok. Add the garlic and stir fry until golden.

32 |

Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.

33 |

Core and remove the seeds of the peppers and cut them into quarters.

34 |

Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish

35 |

Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.

36 |
37 | 45 | 46 | -------------------------------------------------------------------------------- /chapter09/2col-fixedwidth-shadow.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Recipe for Success | Perfect Pizza 6 | 7 | 9 | 10 | 11 |
12 | 15 |
16 |

Choosing Your Toppings

17 |

Sed nec erat sed sem molestie congue. Cras lacus sapien, ultrices ac, mattis quis, lobortis eu, turpis. Aliquam egestas arcu a massa. In hendrerit odio eget lectus. Nullam iaculis ultricies ipsum. Nullam id felis. Phasellus at metus sed velit luctus semper. Cras wisi diam, pharetra sed, pharetra ac, sodales in, quam. Nullam facilisis. Aliquam rhoncus sapien ac dui. Donec mattis ipsum. Nulla a nunc id orci mollis semper. Vestibulum porta quam a dolor.

18 |

Vestibulum dictum massa at odio. In dignissim ante id dui. Morbi rhoncus elit ac ipsum. Curabitur a elit. Phasellus in lorem quis turpis imperdiet accumsan. Suspendisse potenti. Curabitur a enim sed lacus tempor venenatis. Mauris sed ipsum sit amet leo dictum scelerisque. Suspendisse a lectus. Aliquam nec felis at erat sagittis pretium. Nunc id augue pharetra augue commodo tincidunt. Praesent placerat, diam quis porttitor lobortis, orci arcu nonummy sapien, at venenatis ipsum wisi non wisi. Sed bibendum nunc at justo. Vestibulum leo lacus, lobortis vel, interdum ac, varius non, augue. Nam rhoncus dictum libero. Donec porttitor porta lectus. Vivamus consectetuer feugiat wisi. Morbi sit amet nibh eget nibh feugiat porttitor.

19 |
20 | 28 | 29 |
30 |
31 | 32 | --------------------------------------------------------------------------------