├── .gitignore ├── chapter_02 ├── bullet.gif ├── capitalize.css ├── capitalize.html ├── center.css ├── center.html ├── dropcaps.css ├── dropcaps.html ├── firstchild.css ├── firstchild.html ├── fontface.css ├── fontface.html ├── headingcolor.css ├── headingcolor.html ├── headingnospace.css ├── headingnospace.html ├── headingunderline.css ├── headingunderline.html ├── headingunderline2.css ├── headingunderline2.html ├── hilite.css ├── hilite.html ├── indent.css ├── indent.html ├── indent2.css ├── indent2.html ├── justify.css ├── justify.html ├── leading.css ├── leading.html ├── linktypes.css ├── linktypes.html ├── listimage.css ├── listimage.html ├── listinline.css ├── listinline.html ├── listnomargin.css ├── listnomargin.html ├── listsmallmargin.css ├── listsmallmargin.html ├── listtype.css ├── listtype.html ├── nesting.css ├── nesting.html ├── relative.css ├── relative.html ├── textdecoration.css ├── textdecoration.html ├── textdecoration2.css ├── textdecoration2.html ├── textdecoration3.css ├── textdecoration3.html ├── textdecoration4.css ├── textdecoration4.html ├── textshadow.css ├── textshadow.html ├── uppercase.css ├── uppercase.html ├── yanonekaffeesatz-bold-webfont.eot ├── yanonekaffeesatz-bold-webfont.svg ├── yanonekaffeesatz-bold-webfont.ttf ├── yanonekaffeesatz-bold-webfont.woff ├── zeropagemargin.css └── zeropagemargin.html ├── chapter_03 ├── arrow.png ├── background.css ├── background.html ├── background2.css ├── background2.html ├── backgroundfixed.css ├── backgroundfixed.html ├── backgroundmultiple.css ├── backgroundmultiple.html ├── backgroundposition.css ├── backgroundposition.html ├── backgroundscalable.css ├── backgroundscalable.html ├── ballet-background.jpg ├── bordernone.css ├── bordernone.html ├── borderradius.css ├── borderradius.html ├── boxshadow.css ├── boxshadow.html ├── brushed_alu.png ├── brushed_alu_dark.png ├── garlic.jpg ├── gear.png ├── gear2.png ├── gear3.png ├── gear4.png ├── gold_scale.png ├── gradient.css ├── gradient.html ├── gradient.png ├── gradient2.css ├── gradient2.html ├── imageborders.css ├── imageborders.html ├── imageborders2.css ├── imageborders2.html ├── imageborders3.css ├── imageborders3.html ├── ingredients.png ├── instructions.png ├── opacity.css ├── opacity.html ├── rgba.css ├── rgba.html ├── widget1.jpg └── widget2.jpg ├── chapter_04 ├── brushed_alu_dark.png ├── dropdown.css ├── dropdown.html ├── external-links.css ├── external-links.html ├── external-links2.css ├── external-links2.html ├── horizontal.css ├── horizontal.html ├── horizontal2.css ├── horizontal2.html ├── icon-link-email.png ├── icon-link-external.png ├── icon-pdf.png ├── listnav-hover.css ├── listnav-hover.html ├── listnav-nested.css ├── listnav-nested.html ├── listnav.css ├── listnav.html ├── rollover-image.css ├── rollover-image.html ├── rollover-opacity.css ├── rollover-opacity.html ├── selected.css ├── selected.html ├── sitemap.css ├── sitemap.html ├── sprite-roll.png ├── sprite.png ├── superfish.js ├── tabs.css └── tabs.html ├── chapter_05 ├── alternate.css ├── alternate.html ├── borderstyles.css ├── borderstyles.html ├── cal.css ├── cal.html ├── cal_mini.css ├── cal_mini.html ├── colgroups.css ├── colgroups.html ├── columns.css ├── columns.html ├── hiliterow.css ├── hiliterow.html ├── pricing.css ├── pricing.html ├── spreadsheet.css ├── spreadsheet.html ├── table.css └── table.html ├── chapter_06 ├── accept.png ├── email.png ├── email_error.png ├── error.png ├── fieldsets.css ├── fieldsets.html ├── form-highlight.css ├── form-highlight.html ├── form-html5.css ├── form-html5.html ├── form-inline.css ├── form-inline.html ├── form-validation.css ├── form-validation.html ├── form.css ├── form.html ├── form2.css ├── form2.html ├── html5-elements.css └── html5-elements.html ├── chapter_07 ├── PIE.htc ├── arrow.png ├── brushed_alu.png ├── brushed_alu_dark.png ├── example1.css ├── example1.html ├── garlic.jpg ├── ingredients.png ├── instructions.png ├── pie.css ├── pie.html ├── selectivizr-min.js ├── selectors-conditional.html ├── selectors-jquery.css ├── selectors-jquery.html ├── selectors.css └── selectors.html ├── chapter_08 ├── boxmodel.css ├── boxmodel.html ├── boxmodel2.css ├── boxmodel2.html ├── centering.css ├── centering.html ├── float-clear.css ├── float-clear.html ├── float.css ├── float.html ├── gallery.css ├── gallery.html ├── garlic.jpg ├── inline-block.css ├── inline-block.html ├── instructions.png ├── margin.css ├── margin.html ├── padding.css ├── padding.html ├── position.css ├── position.html ├── widget1.jpg ├── widget2.jpg ├── widget3.jpg ├── widget4.jpg ├── widget5.jpg └── widget6.jpg └── chapter_09 ├── 2col-float.css ├── 2col-float.html ├── 2col-positioning.css ├── 2col-positioning.html ├── 3col-float.css ├── 3col-float.html ├── 3col-responsive-ie-old.css ├── 3col-responsive-print.css ├── 3col-responsive.css ├── 3col-responsive.html ├── 3col-wide-footer.css ├── 3col-wide-footer.html ├── gallery ├── eight.jpg ├── five.jpg ├── four.jpg ├── imgSizer.js ├── main.jpg ├── nine.jpg ├── one.jpg ├── seven.jpg ├── six.jpg ├── ten.jpg ├── three.jpg └── two.jpg ├── ios-orientationchange-fix.js ├── responsive-1180.css ├── responsive-410.css ├── responsive-700.css ├── responsive-940.css ├── responsive-basic.css ├── responsive-ie-old.css ├── responsive.html └── selectivizr-min.js /.gitignore: -------------------------------------------------------------------------------- 1 | $ cat .gitignore 2 | 3 | .DS_Store 4 | .svn/ 5 | -------------------------------------------------------------------------------- /chapter_02/bullet.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_02/bullet.gif -------------------------------------------------------------------------------- /chapter_02/capitalize.css: -------------------------------------------------------------------------------- 1 | .transform { 2 | text-transform: capitalize; 3 | } -------------------------------------------------------------------------------- /chapter_02/capitalize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Text transform 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/center.css: -------------------------------------------------------------------------------- 1 | .centered { 2 | text-align: center; 3 | } -------------------------------------------------------------------------------- /chapter_02/center.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Centering text 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/dropcaps.css: -------------------------------------------------------------------------------- 1 | h1 + p:first-letter { 2 | font-size: 200%; 3 | font-weight: bold; 4 | float: left; 5 | width: 1em; 6 | line-height: 1; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /chapter_02/dropcaps.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Drop Capitals with first-letter 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/firstchild.css: -------------------------------------------------------------------------------- 1 | li:first-child { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /chapter_02/firstchild.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: First Child 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /chapter_02/fontface.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'YanoneKaffeesatzBold'; 3 | src: url('yanonekaffeesatz-bold-webfont.eot'); 4 | src: url('yanonekaffeesatz-bold-webfont.eot?#iefix') format('embedded-opentype'), 5 | url('yanonekaffeesatz-bold-webfont.woff') format('woff'), 6 | url('yanonekaffeesatz-bold-webfont.ttf') format('truetype'), 7 | url('yanonekaffeesatz-bold-webfont.svg#YanoneKaffeesatzBold') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | 11 | } 12 | 13 | h1 { color: #000; font: 3.2em YanoneKaffeesatzBold, serif; } -------------------------------------------------------------------------------- /chapter_02/fontface.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Using @font-face 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/headingcolor.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | background-color: #ADD8E6; 3 | color: #256579; 4 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 5 | padding: 0.2em; 6 | } -------------------------------------------------------------------------------- /chapter_02/headingcolor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Background colors and headings 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/headingnospace.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | margin-bottom: 0; 4 | } 5 | 6 | h1+p { 7 | margin-top: 0; 8 | } -------------------------------------------------------------------------------- /chapter_02/headingnospace.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2:Heading no space 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/headingunderline.css: -------------------------------------------------------------------------------- 1 | h1 { font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 2 | text-decoration: underline; } -------------------------------------------------------------------------------- /chapter_02/headingunderline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Adding an underline to a heading - text-decoration 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/headingunderline2.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | padding: 0.2em; 4 | border-bottom: 1px solid #AAAAAA; 5 | } -------------------------------------------------------------------------------- /chapter_02/headingunderline2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Adding an underline to a heading - text-decoration 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/hilite.css: -------------------------------------------------------------------------------- 1 | .hilite { 2 | background-color: #FFFFCC; 3 | color: #B22222; 4 | } -------------------------------------------------------------------------------- /chapter_02/hilite.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Highlighting text 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/indent.css: -------------------------------------------------------------------------------- 1 | .indent { 2 | padding-left: 1.5em; 3 | } -------------------------------------------------------------------------------- /chapter_02/indent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Indenting text 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/indent2.css: -------------------------------------------------------------------------------- 1 | p { 2 | text-indent: 1.5em; 3 | } 4 | -------------------------------------------------------------------------------- /chapter_02/indent2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Indenting text 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/justify.css: -------------------------------------------------------------------------------- 1 | p { 2 | text-align: justify; 3 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 4 | line-height: 2.2; 5 | } 6 | -------------------------------------------------------------------------------- /chapter_02/justify.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Justify 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/leading.css: -------------------------------------------------------------------------------- 1 | p { 2 | font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; 3 | line-height: 2.2; 4 | } -------------------------------------------------------------------------------- /chapter_02/leading.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Line Height / leading 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/linktypes.css: -------------------------------------------------------------------------------- 1 | a:link, a:visited { text-decoration: underline; color: #6A5ACD; background-color: transparent; } 2 | a:hover, a:active { text-decoration: none; color: #191970; background-color: #C9C3ED; } 3 | 4 | .boxout { color: #FFFFFF; background-color: #6A5ACD; 5 | width: 320px; 6 | padding: 10px; } 7 | .boxout a:link, .boxout a:visited { text-decoration: underline; color: #E4E2F6; background-color: transparent; } 8 | .boxout a:hover, .boxout a:active { background-color: #C9C3ED; color: #191970; 9 | text-decoration: none; } -------------------------------------------------------------------------------- /chapter_02/linktypes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Styling links 6 | 7 | 8 | 9 |
10 |

Visit our online store, for many of the tools you need to kit out your kitchen.

11 |
12 | 13 | 18 | 19 | -------------------------------------------------------------------------------- /chapter_02/listimage.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style-image: url(bullet.gif); 3 | } -------------------------------------------------------------------------------- /chapter_02/listimage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: List bullet images 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doin a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/listinline.css: -------------------------------------------------------------------------------- 1 | ul.nav li { 2 | display: inline; 3 | } -------------------------------------------------------------------------------- /chapter_02/listinline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Displaying a list inline 6 | 7 | 8 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /chapter_02/listnomargin.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style-type: none; 3 | padding-left: 0; 4 | margin-left: 0; 5 | } -------------------------------------------------------------------------------- /chapter_02/listnomargin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Removing list margins 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doin a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/listsmallmargin.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style-type: none; 3 | padding-left: 5px; 4 | margin-left: 0; 5 | } -------------------------------------------------------------------------------- /chapter_02/listsmallmargin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Small list margins 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doin a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/listtype.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style-type: square; 3 | } -------------------------------------------------------------------------------- /chapter_02/listtype.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: List bullets 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /chapter_02/nesting.css: -------------------------------------------------------------------------------- 1 | div, p, em, a, code { 2 | font-size: 130%; 3 | } 4 | -------------------------------------------------------------------------------- /chapter_02/nesting.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Nesting 6 | 7 | 8 | 9 |

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

11 | 12 | -------------------------------------------------------------------------------- /chapter_02/relative.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-size: small; 3 | } 4 | 5 | em { 6 | font-size: larger; 7 | } -------------------------------------------------------------------------------- /chapter_02/relative.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Relative keywords 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doin a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/textdecoration.css: -------------------------------------------------------------------------------- 1 | a:link, a:visited { 2 | text-decoration: none; } -------------------------------------------------------------------------------- /chapter_02/textdecoration.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Text Decoration 6 | 7 | 8 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /chapter_02/textdecoration2.css: -------------------------------------------------------------------------------- 1 | a:link, a:visited { 2 | text-decoration: underline overline; } -------------------------------------------------------------------------------- /chapter_02/textdecoration2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Text Decoration 6 | 7 | 8 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /chapter_02/textdecoration3.css: -------------------------------------------------------------------------------- 1 | a:link, a:visited, a:hover, a:active { 2 | text-decoration: underline; 3 | color: #6A5ACD; 4 | background-color: transparent; 5 | } -------------------------------------------------------------------------------- /chapter_02/textdecoration3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Text Decoration 6 | 7 | 8 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /chapter_02/textdecoration4.css: -------------------------------------------------------------------------------- 1 | a:link, a:visited { 2 | text-decoration: underline; 3 | color: #6A5ACD; 4 | background-color: transparent; 5 | } 6 | 7 | a:hover, a:active { 8 | text-decoration: none; 9 | color: #191970; 10 | background-color: #C9C3ED; 11 | } 12 | -------------------------------------------------------------------------------- /chapter_02/textdecoration4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Text Decoration 6 | 7 | 8 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /chapter_02/textshadow.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-size: 250%; 3 | color: #256579; 4 | text-shadow: 3px 3px 3px #999; 5 | } -------------------------------------------------------------------------------- /chapter_02/textshadow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Drop shadows on text 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doin a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/uppercase.css: -------------------------------------------------------------------------------- 1 | .transform { 2 | text-transform: uppercase; 3 | } -------------------------------------------------------------------------------- /chapter_02/uppercase.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Text transform 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doin a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_02/yanonekaffeesatz-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_02/yanonekaffeesatz-bold-webfont.eot -------------------------------------------------------------------------------- /chapter_02/yanonekaffeesatz-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_02/yanonekaffeesatz-bold-webfont.ttf -------------------------------------------------------------------------------- /chapter_02/yanonekaffeesatz-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_02/yanonekaffeesatz-bold-webfont.woff -------------------------------------------------------------------------------- /chapter_02/zeropagemargin.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0 4 | } 5 | -------------------------------------------------------------------------------- /chapter_02/zeropagemargin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 2: Removing all margins and padding 6 | 7 | 8 | 9 |

Baked Garlic

10 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

11 | 12 |

To make your own baked garlic, you will need:

13 | 14 | 20 | 21 |

Instructions

22 | 23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doin a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | 32 | -------------------------------------------------------------------------------- /chapter_03/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/arrow.png -------------------------------------------------------------------------------- /chapter_03/background.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #333; 3 | background-image: url(brushed_alu_dark.png); 4 | color: #fff; 5 | margin: 0; 6 | padding: 0; 7 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 8 | } 9 | 10 | .wrapper { 11 | width: 80%; 12 | margin: 20px auto 40px auto; 13 | background-color: #fff; 14 | color: #333; 15 | } 16 | 17 | .recipe { 18 | padding: 1em; 19 | } -------------------------------------------------------------------------------- /chapter_03/background.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Background images 6 | 7 | 8 | 9 |
10 |
11 |

Baked Garlic

12 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

13 | 14 |

To make your own baked garlic, you will need:

15 | 16 | 22 | 23 |

Instructions

24 | 25 |
    26 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 27 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 28 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 29 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 30 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 31 |
  6. Enjoy!
    7. 32 |
33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /chapter_03/background2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #333; 3 | background-image: url(brushed_alu_dark.png); 4 | color: #fff; 5 | margin: 0; 6 | padding: 0; 7 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 8 | } 9 | 10 | .wrapper { 11 | width: 80%; 12 | margin: 20px auto 40px auto; 13 | background-color: #fff; 14 | color: #333; 15 | background-image: url(brushed_alu.png); 16 | } 17 | 18 | .recipe { 19 | padding: 1em; 20 | } 21 | 22 | h1 { 23 | font-size: 150%; 24 | } 25 | 26 | h2 { 27 | font-size: 125%; 28 | } 29 | 30 | h2.instructions { 31 | background-image: url(instructions.png); 32 | background-repeat: no-repeat; 33 | background-position: left center; 34 | padding-left: 30px; 35 | } 36 | 37 | ul.ingredients { 38 | border-top: 1px solid #999; 39 | border-bottom: 1px solid #999; 40 | list-style: none; 41 | margin: 1em 0 1em 0; 42 | padding: 1em 0 1em 30px; 43 | background-image: url(ingredients.png); 44 | background-repeat: no-repeat; 45 | background-position: 0 1em; 46 | } 47 | 48 | a.more:link, a.more:visited { 49 | display: block; 50 | padding: 0.3em 20px 0.3em 0; 51 | text-align: right; 52 | color: #666; 53 | font-weight: bold; 54 | background-image: url(arrow.png); 55 | background-position: right center; 56 | background-repeat: no-repeat; 57 | text-decoration: none; 58 | } -------------------------------------------------------------------------------- /chapter_03/background2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Background images 6 | 7 | 8 | 9 |
10 |
11 |

Baked Garlic

12 | 13 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

14 | 15 |

To make your own baked garlic, you will need:

16 | 17 | 23 | 24 |

Instructions

25 | 26 |
    27 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 28 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 29 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 30 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 31 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 32 |
  6. Enjoy!
    7. 33 |
34 | 35 | More recipes 36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /chapter_03/backgroundfixed.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | background-image: url(gold_scale.png); 4 | background-attachment: fixed; 5 | color: #000; 6 | margin: 0; 7 | padding: 0; 8 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 9 | } 10 | 11 | .wrapper { 12 | width: 80%; 13 | margin: 20px auto 40px auto; 14 | background-color: #fff; 15 | color: #333; 16 | } 17 | 18 | .recipe { 19 | padding: 1em; 20 | } -------------------------------------------------------------------------------- /chapter_03/backgroundfixed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Fixed background images 6 | 7 | 8 | 9 |
10 |
11 |

Baked Garlic

12 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

13 | 14 |

To make your own baked garlic, you will need:

15 | 16 | 22 | 23 |

Instructions

24 | 25 |
    26 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 27 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 28 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 29 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 30 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 31 |
  6. Enjoy!
    7. 32 |
33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /chapter_03/backgroundmultiple.css: -------------------------------------------------------------------------------- 1 | .box { 2 | height: 200px; 3 | width: 200px; 4 | border: 3px solid #333; 5 | background: url(gear.png) top right no-repeat, 6 | url(gear2.png) top left no-repeat, 7 | url(gear3.png) bottom left no-repeat, 8 | url(gear4.png) bottom right no-repeat, 9 | url(brushed_alu.png); 10 | } -------------------------------------------------------------------------------- /chapter_03/backgroundmultiple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Multiple backgrounds 6 | 7 | 8 | 9 |
10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /chapter_03/backgroundposition.css: -------------------------------------------------------------------------------- 1 | .box { 2 | height: 200px; 3 | width: 200px; 4 | border: 3px solid #333; 5 | background-image: url(gear.png); 6 | background-repeat: no-repeat; 7 | background-position: bottom right; 8 | } -------------------------------------------------------------------------------- /chapter_03/backgroundposition.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Background positioning 6 | 7 | 8 | 9 |
10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /chapter_03/backgroundscalable.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-image: url(ballet-background.jpg); 3 | background-repeat: no-repeat; 4 | background-position: center center; 5 | background-attachment: fixed; 6 | -webkit-background-size: cover; 7 | -moz-background-size: cover; 8 | -o-background-size: cover; 9 | background-size: cover; 10 | color: #fff; 11 | background-color: #000; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | padding: 0; 17 | font: .875em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 18 | } 19 | 20 | h1 { 21 | background-color: #fff; 22 | width: 40%; 23 | padding: 0.6em 0.6em 0.6em 2em; 24 | margin: 40px 0 0 0; 25 | color: #000; 26 | font-size: 127.6%; 27 | } 28 | 29 | .content { 30 | background-color: #fff; 31 | width: 60%; 32 | padding: 0.6em 0.6em 0.6em 2em; 33 | margin: 40px 0 0 0; 34 | color: #000; 35 | } -------------------------------------------------------------------------------- /chapter_03/backgroundscalable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Scalable background images 6 | 7 | 8 | 9 |

Your first pointe shoes

10 | 11 |
12 |

For a young dancer, being fitted for a first pair of pointe shoes is a milestone moment. Finally, after years of classes she can dance on her toes just like a real ballerina! However the joy of getting those first shoes quickly turns to the realization that dancing on one's toes is not as easy as it looks.

13 | 14 |

This guide aims to help young dancers and their parents through getting that first pair of shoes, and how to look after them. It does not replace the guidance given by your ballet teacher so do check with them before following the instructions here.

15 |
16 | 17 | -------------------------------------------------------------------------------- /chapter_03/ballet-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/ballet-background.jpg -------------------------------------------------------------------------------- /chapter_03/bordernone.css: -------------------------------------------------------------------------------- 1 | img { 2 | border: none; 3 | } -------------------------------------------------------------------------------- /chapter_03/bordernone.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Image borders 6 | 7 | 8 | 9 | 10 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter_03/borderradius.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #333; 3 | background-image: url(brushed_alu_dark.png); 4 | color: #fff; 5 | margin: 0; 6 | padding: 0; 7 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 8 | } 9 | 10 | .wrapper { 11 | width: 80%; 12 | margin: 20px auto 40px auto; 13 | background-color: #fff; 14 | color: #333; 15 | background-image: url(brushed_alu.png); 16 | -webkit-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 17 | -moz-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 18 | box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 19 | -webkit-border-radius: 10px; 20 | -moz-border-radius: 10px; 21 | border-radius: 10px; 22 | } 23 | 24 | .recipe { 25 | padding: 1em; 26 | } 27 | 28 | h1 { 29 | font-size: 150%; 30 | } 31 | 32 | h2 { 33 | font-size: 125%; 34 | } 35 | 36 | h2.instructions { 37 | background-image: url(instructions.png); 38 | background-repeat: no-repeat; 39 | background-position: left center; 40 | padding-left: 30px; 41 | } 42 | 43 | ul.ingredients { 44 | border-top: 1px solid #999; 45 | border-bottom: 1px solid #999; 46 | list-style: none; 47 | margin: 1em 0 1em 0; 48 | padding: 1em 0 1em 30px; 49 | background-image: url(ingredients.png); 50 | background-repeat: no-repeat; 51 | background-position: 0 1em; 52 | } 53 | 54 | a.more:link, a.more:visited { 55 | display: block; 56 | padding: 0.3em 20px 0.3em 0; 57 | text-align: right; 58 | color: #666; 59 | font-weight: bold; 60 | background-image: url(arrow.png); 61 | background-position: right center; 62 | background-repeat: no-repeat; 63 | text-decoration: none; 64 | } -------------------------------------------------------------------------------- /chapter_03/borderradius.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Box Shadow 6 | 7 | 8 | 9 |
10 |
11 |

Baked Garlic

12 | 13 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

14 | 15 |

To make your own baked garlic, you will need:

16 | 17 | 23 | 24 |

Instructions

25 | 26 |
    27 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 28 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 29 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 30 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 31 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 32 |
  6. Enjoy!
    7. 33 |
34 | 35 | More recipes 36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /chapter_03/boxshadow.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #333; 3 | background-image: url(brushed_alu_dark.png); 4 | color: #fff; 5 | margin: 0; 6 | padding: 0; 7 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 8 | } 9 | 10 | .wrapper { 11 | width: 80%; 12 | margin: 20px auto 40px auto; 13 | background-color: #fff; 14 | color: #333; 15 | background-image: url(brushed_alu.png); 16 | -webkit-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 17 | -moz-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 18 | box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 19 | } 20 | 21 | .recipe { 22 | padding: 1em; 23 | } 24 | 25 | h1 { 26 | font-size: 150%; 27 | } 28 | 29 | h2 { 30 | font-size: 125%; 31 | } 32 | 33 | h2.instructions { 34 | background-image: url(instructions.png); 35 | background-repeat: no-repeat; 36 | background-position: left center; 37 | padding-left: 30px; 38 | } 39 | 40 | ul.ingredients { 41 | border-top: 1px solid #999; 42 | border-bottom: 1px solid #999; 43 | list-style: none; 44 | margin: 1em 0 1em 0; 45 | padding: 1em 0 1em 30px; 46 | background-image: url(ingredients.png); 47 | background-repeat: no-repeat; 48 | background-position: 0 1em; 49 | } 50 | 51 | a.more:link, a.more:visited { 52 | display: block; 53 | padding: 0.3em 20px 0.3em 0; 54 | text-align: right; 55 | color: #666; 56 | font-weight: bold; 57 | background-image: url(arrow.png); 58 | background-position: right center; 59 | background-repeat: no-repeat; 60 | text-decoration: none; 61 | } -------------------------------------------------------------------------------- /chapter_03/boxshadow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Box Shadow 6 | 7 | 8 | 9 |
10 |
11 |

Baked Garlic

12 | 13 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

14 | 15 |

To make your own baked garlic, you will need:

16 | 17 | 23 | 24 |

Instructions

25 | 26 |
    27 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 28 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 29 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 30 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 31 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 32 |
  6. Enjoy!
    7. 33 |
34 | 35 | More recipes 36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /chapter_03/brushed_alu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/brushed_alu.png -------------------------------------------------------------------------------- /chapter_03/brushed_alu_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/brushed_alu_dark.png -------------------------------------------------------------------------------- /chapter_03/garlic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/garlic.jpg -------------------------------------------------------------------------------- /chapter_03/gear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/gear.png -------------------------------------------------------------------------------- /chapter_03/gear2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/gear2.png -------------------------------------------------------------------------------- /chapter_03/gear3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/gear3.png -------------------------------------------------------------------------------- /chapter_03/gear4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/gear4.png -------------------------------------------------------------------------------- /chapter_03/gold_scale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/gold_scale.png -------------------------------------------------------------------------------- /chapter_03/gradient.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | height: 100%; 7 | background-attachment: fixed; 8 | background-color: #666; 9 | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#666)); 10 | background-image: -webkit-linear-gradient(top, #000, #666); 11 | background-image: -moz-linear-gradient(top, #000, #666); 12 | background-image: -ms-linear-gradient(top, #000, #666); 13 | background-image: -o-linear-gradient(top, #000, #666); 14 | background-image: linear-gradient(top, #000, #666); 15 | color: #fff; 16 | margin: 0; 17 | padding: 0; 18 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 19 | } 20 | 21 | .wrapper { 22 | width: 80%; 23 | margin: 20px auto 40px auto; 24 | background-color: #fff; 25 | color: #333; 26 | background-image: url(brushed_alu.png); 27 | } 28 | 29 | .recipe { 30 | padding: 1em; 31 | } 32 | 33 | h1 { 34 | font-size: 150%; 35 | } 36 | 37 | h2 { 38 | font-size: 125%; 39 | } 40 | 41 | h2.instructions { 42 | background-image: url(instructions.png); 43 | background-repeat: no-repeat; 44 | background-position: left center; 45 | padding-left: 30px; 46 | } 47 | 48 | ul.ingredients { 49 | border-top: 1px solid #999; 50 | border-bottom: 1px solid #999; 51 | list-style: none; 52 | margin: 1em 0 1em 0; 53 | padding: 1em 0 1em 30px; 54 | background-image: url(ingredients.png); 55 | background-repeat: no-repeat; 56 | background-position: 0 1em; 57 | } 58 | 59 | a.more:link, a.more:visited { 60 | display: block; 61 | padding: 0.3em 20px 0.3em 0; 62 | text-align: right; 63 | color: #666; 64 | font-weight: bold; 65 | background-image: url(arrow.png); 66 | background-position: right center; 67 | background-repeat: no-repeat; 68 | text-decoration: none; 69 | } -------------------------------------------------------------------------------- /chapter_03/gradient.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Gradients 6 | 7 | 8 | 9 |
10 |
11 |

Baked Garlic

12 | 13 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

14 | 15 |

To make your own baked garlic, you will need:

16 | 17 | 23 | 24 |

Instructions

25 | 26 |
    27 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 28 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 29 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 30 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 31 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 32 |
  6. Enjoy!
    7. 33 |
34 | 35 | More recipes 36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /chapter_03/gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/gradient.png -------------------------------------------------------------------------------- /chapter_03/gradient2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | background-image: url(gradient.png); 4 | background-repeat: repeat-x; 5 | color: #fff; 6 | margin: 0; 7 | padding: 0; 8 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 9 | } 10 | 11 | .wrapper { 12 | width: 80%; 13 | margin: 20px auto 40px auto; 14 | background-color: #fff; 15 | color: #333; 16 | background-image: url(brushed_alu.png); 17 | } 18 | 19 | .recipe { 20 | padding: 1em; 21 | } 22 | 23 | h1 { 24 | font-size: 150%; 25 | } 26 | 27 | h2 { 28 | font-size: 125%; 29 | } 30 | 31 | h2.instructions { 32 | background-image: url(instructions.png); 33 | background-repeat: no-repeat; 34 | background-position: left center; 35 | padding-left: 30px; 36 | } 37 | 38 | ul.ingredients { 39 | border-top: 1px solid #999; 40 | border-bottom: 1px solid #999; 41 | list-style: none; 42 | margin: 1em 0 1em 0; 43 | padding: 1em 0 1em 30px; 44 | background-image: url(ingredients.png); 45 | background-repeat: no-repeat; 46 | background-position: 0 1em; 47 | } 48 | 49 | a.more:link, a.more:visited { 50 | display: block; 51 | padding: 0.3em 20px 0.3em 0; 52 | text-align: right; 53 | color: #666; 54 | font-weight: bold; 55 | background-image: url(arrow.png); 56 | background-position: right center; 57 | background-repeat: no-repeat; 58 | text-decoration: none; 59 | } -------------------------------------------------------------------------------- /chapter_03/gradient2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Gradients 6 | 7 | 8 | 9 |
10 |
11 |

Baked Garlic

12 | 13 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

14 | 15 |

To make your own baked garlic, you will need:

16 | 17 | 23 | 24 |

Instructions

25 | 26 |
    27 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 28 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 29 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 30 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 31 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 32 |
  6. Enjoy!
    7. 33 |
34 | 35 | More recipes 36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /chapter_03/imageborders.css: -------------------------------------------------------------------------------- 1 | img { 2 | border: 2px solid #000; 3 | } -------------------------------------------------------------------------------- /chapter_03/imageborders.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Image borders 6 | 7 | 8 | 9 | 10 | 11 | Widget the cat 12 | 13 | Widget shows his tongue 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter_03/imageborders2.css: -------------------------------------------------------------------------------- 1 | .imgborder { 2 | border: 2px solid #000; 3 | } -------------------------------------------------------------------------------- /chapter_03/imageborders2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Image borders 6 | 7 | 8 | 9 | 10 | 11 | Widget the cat 12 | 13 | Widget shows his tongue 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter_03/imageborders3.css: -------------------------------------------------------------------------------- 1 | .album img { 2 | border: 2px solid #000; 3 | } -------------------------------------------------------------------------------- /chapter_03/imageborders3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Image borders 6 | 7 | 8 | 9 | 10 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter_03/ingredients.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/ingredients.png -------------------------------------------------------------------------------- /chapter_03/instructions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/instructions.png -------------------------------------------------------------------------------- /chapter_03/opacity.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-image: url(ballet-background.jpg); 3 | background-repeat: no-repeat; 4 | background-position: center center; 5 | background-attachment: fixed; 6 | -webkit-background-size: cover; 7 | -moz-background-size: cover; 8 | -o-background-size: cover; 9 | background-size: cover; 10 | color: #fff; 11 | background-color: #000; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | padding: 0; 17 | font: .875em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 18 | } 19 | 20 | h1 { 21 | width: 40%; 22 | padding: 0.6em 0.6em 0.6em 2em; 23 | margin: 40px 0 0 0; 24 | font-size: 127.6%; 25 | background-color: #fff; 26 | color: #000; 27 | opacity: 0.5; 28 | } 29 | 30 | .content { 31 | width: 60%; 32 | padding: 0.6em 0.6em 0.6em 2em; 33 | margin: 40px 0 0 0; 34 | background-color: #fff; 35 | color: #000; 36 | opacity: 0.5; 37 | } -------------------------------------------------------------------------------- /chapter_03/opacity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: Opacity 6 | 7 | 8 | 9 |

Your first pointe shoes

10 | 11 |
12 |

For a young dancer, being fitted for a first pair of pointe shoes is a milestone moment. Finally, after years of classes she can dance on her toes just like a real ballerina! However the joy of getting those first shoes quickly turns to the realization that dancing on one's toes is not as easy as it looks.

13 | 14 |

This guide aims to help young dancers and their parents through getting that first pair of shoes, and how to look after them. It does not replace the guidance given by your ballet teacher so do check with them before following the instructions here.

15 |
16 | 17 | -------------------------------------------------------------------------------- /chapter_03/rgba.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-image: url(ballet-background.jpg); 3 | background-repeat: no-repeat; 4 | background-position: center center; 5 | background-attachment: fixed; 6 | -webkit-background-size: cover; 7 | -moz-background-size: cover; 8 | -o-background-size: cover; 9 | background-size: cover; 10 | color: #fff; 11 | background-color: #000; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | padding: 0; 17 | font: .875em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 18 | } 19 | 20 | h1 { 21 | width: 40%; 22 | padding: 0.6em 0.6em 0.6em 2em; 23 | margin: 40px 0 0 0; 24 | font-size: 127.6%; 25 | background-color: rgba(255,255,255,0.5); 26 | color: #000; 27 | } 28 | 29 | .content { 30 | width: 60%; 31 | padding: 0.6em 0.6em 0.6em 2em; 32 | margin: 40px 0 0 0; 33 | background-color: rgba(255,255,255,0.5); 34 | color: #000; 35 | } -------------------------------------------------------------------------------- /chapter_03/rgba.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 3: RGBa 6 | 7 | 8 | 9 |

Your first pointe shoes

10 | 11 |
12 |

For a young dancer, being fitted for a first pair of pointe shoes is a milestone moment. Finally, after years of classes she can dance on her toes just like a real ballerina! However the joy of getting those first shoes quickly turns to the realization that dancing on one's toes is not as easy as it looks.

13 | 14 |

This guide aims to help young dancers and their parents through getting that first pair of shoes, and how to look after them. It does not replace the guidance given by your ballet teacher so do check with them before following the instructions here.

15 |
16 | 17 | -------------------------------------------------------------------------------- /chapter_03/widget1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/widget1.jpg -------------------------------------------------------------------------------- /chapter_03/widget2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_03/widget2.jpg -------------------------------------------------------------------------------- /chapter_04/brushed_alu_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_04/brushed_alu_dark.png -------------------------------------------------------------------------------- /chapter_04/dropdown.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgb(255,255,255); 3 | color: rgb(0,0,0); 4 | margin: 0; 5 | padding: 0; 6 | font: 0.875em/1.2 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .nav { 15 | list-style: none; 16 | margin: 0; 17 | padding: 0; 18 | font-size: 114.3%; 19 | } 20 | 21 | .nav > li { 22 | float: left; 23 | width: 130px; 24 | margin-right: 20px; 25 | position: relative; 26 | } 27 | 28 | .nav li a:link, .nav li a:visited { 29 | display: block; 30 | text-decoration: none; 31 | color: rgb(122,106,83); 32 | } 33 | 34 | .nav li a:hover { 35 | color: rgb(153,178,183); 36 | } 37 | 38 | .nav li:hover ul, .nav li.sfHover ul { 39 | margin-left: 0; 40 | } 41 | 42 | .nav ul { 43 | position: absolute; 44 | background-color: rgb(213,222,217); 45 | border: 5px solid rgb(153,178,183); 46 | -webkit-border-radius: 10px; 47 | -moz-border-radius: 10px; 48 | border-radius: 10px; 49 | padding: 0.5em; 50 | margin: 0.5em 0 0 -9999px; 51 | -webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2)); 52 | -moz-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2); 53 | box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2)); 54 | list-style: none; 55 | font-size: 85.7%; 56 | width: 8em; 57 | line-height: 1.8; 58 | } 59 | 60 | .nav ul li a:link, .nav ul li a:visited { 61 | color: rgb(0,0,0); 62 | } 63 | 64 | .nav ul li a:hover { 65 | color: rgb(122,106,83); 66 | } -------------------------------------------------------------------------------- /chapter_04/dropdown.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 4: Dropdown navigation 6 | 7 | 8 | 9 | 22 | 23 | 24 |
25 | 42 |
43 | 44 | -------------------------------------------------------------------------------- /chapter_04/external-links.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.875em/1.2 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | a[href^="http:"] { 15 | padding-left: 20px; 16 | background-image: url(icon-link-external.png); 17 | background-repeat: no-repeat; 18 | } -------------------------------------------------------------------------------- /chapter_04/external-links.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 4: Showing external links 6 | 7 | 8 | 9 |
10 |

You can search for more delicious cheese recipes using Google or view more recipes on this site.

11 |
12 | 13 | -------------------------------------------------------------------------------- /chapter_04/external-links2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.875em/1.2 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .links { 15 | list-style: none; 16 | margin: 0; 17 | padding: 0; 18 | line-height: 1.6; 19 | } 20 | 21 | a[href^="http:"] { 22 | padding-left: 20px; 23 | background-image: url(icon-link-external.png); 24 | background-repeat: no-repeat; 25 | } 26 | 27 | a[href^="mailto:"] { 28 | padding-left: 20px; 29 | background-image: url(icon-link-email.png); 30 | background-repeat: no-repeat; 31 | } 32 | 33 | a[href$=".pdf"] { 34 | padding-left: 20px; 35 | background-image: url(icon-pdf.png); 36 | background-repeat: no-repeat; 37 | } -------------------------------------------------------------------------------- /chapter_04/external-links2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 4: Using attribute selectors 6 | 7 | 8 | 9 |
10 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /chapter_04/horizontal.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #333; 3 | background-image: url(brushed_alu_dark.png); 4 | color: #fff; 5 | margin: 0; 6 | padding: 0; 7 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 8 | } 9 | 10 | .wrapper { 11 | width: 80%; 12 | margin: 20px auto 40px auto; 13 | } 14 | 15 | .nav { 16 | list-style: none; 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | .nav li { 22 | float: left; 23 | min-width: 8em; 24 | margin-right: 0.5em; 25 | text-align: center; 26 | } 27 | 28 | .nav li a:link, 29 | .nav li a:visited { 30 | background-color: rgb(255, 255, 255); 31 | color: rgb(85, 85, 102); 32 | display: block; 33 | padding: 0.2em; 34 | text-decoration: none; 35 | font-weight: bold; 36 | margin: 0 0 0.2em 0; 37 | -webkit-border-radius: 3px; 38 | -moz-border-radius: 3px; 39 | border-radius: 3px; 40 | -webkit-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5); 41 | -moz-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5); 42 | box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5); 43 | } 44 | 45 | .nav li a:hover { 46 | background-color: rgba(255, 255, 255, 0.8); 47 | color: rgb(43, 43, 77); 48 | } -------------------------------------------------------------------------------- /chapter_04/horizontal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 4: Horizontal navigation 6 | 7 | 8 | 9 |
10 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /chapter_04/horizontal2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.875em/1.2 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 700px; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .nav { 15 | list-style: none; 16 | margin: 0; 17 | padding: 0; 18 | } 19 | 20 | .nav li { 21 | float: left; 22 | width: 130px; 23 | margin-right: 20px; 24 | 25 | } 26 | 27 | .nav li a:link strong, 28 | .nav li a:visited strong { 29 | font-size: 157.1%; 30 | display: block; 31 | font-weight: normal; 32 | color: rgb(119,126,134); 33 | font-style: normal; 34 | } 35 | 36 | .nav li a:link, 37 | .nav li a:visited { 38 | text-decoration: none; 39 | color: rgb(93,78,72); 40 | font-style: italic; 41 | } 42 | 43 | .nav li a:hover, .nav li a:hover strong { 44 | color: rgb(0,0,0); 45 | } -------------------------------------------------------------------------------- /chapter_04/horizontal2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 4: Horizontal navigation 6 | 7 | 8 | 9 |
10 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /chapter_04/icon-link-email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_04/icon-link-email.png -------------------------------------------------------------------------------- /chapter_04/icon-link-external.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_04/icon-link-external.png -------------------------------------------------------------------------------- /chapter_04/icon-pdf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_04/icon-pdf.png -------------------------------------------------------------------------------- /chapter_04/listnav-hover.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .nav { 15 | list-style: none; 16 | margin: 0; 17 | padding: 0; 18 | width: 200px; 19 | } 20 | 21 | .nav li { 22 | border-left: 10px solid rgb(144,154,181); 23 | border-bottom: 1px solid rgb(144,154,181); 24 | } 25 | 26 | .nav li a:link, 27 | .nav li a:visited { 28 | background-color: rgb(192,202,229); 29 | color: rgb(49,52,61); 30 | padding: 0.5em; 31 | display: block; 32 | text-decoration: none; 33 | border-left: 5px solid rgb(239,213,252); 34 | } 35 | 36 | .nav li a:hover { 37 | background-color: rgb(144,154,181); 38 | color: rgb(255,255,255); 39 | border-left: 5px solid rgb(250,136,234); 40 | } -------------------------------------------------------------------------------- /chapter_04/listnav-hover.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 4: List navigation 6 | 7 | 8 | 9 |
10 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /chapter_04/listnav-nested.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .nav { 15 | list-style: none; 16 | margin: 0; 17 | padding: 0; 18 | width: 200px; 19 | } 20 | 21 | .nav li { 22 | border-left: 10px solid rgb(144,154,181); 23 | border-bottom: 1px solid rgb(144,154,181); 24 | } 25 | 26 | .nav li a:link, 27 | .nav li a:visited { 28 | background-color: rgb(192,202,229); 29 | color: rgb(49,52,61); 30 | padding: 0.5em; 31 | display: block; 32 | text-decoration: none; 33 | border-left: 5px solid rgb(239,213,252); 34 | } 35 | 36 | .nav li a:hover { 37 | background-color: rgb(144,154,181); 38 | color: rgb(255,255,255); 39 | border-left: 5px solid rgb(250,136,234); 40 | } 41 | 42 | .nav ul { 43 | list-style: none; 44 | margin: 0; 45 | padding: 0; 46 | border: 0; 47 | } 48 | 49 | .nav ul li { 50 | border: 0; 51 | } 52 | 53 | .nav ul li a:link, 54 | .nav ul li a:visited { 55 | background-color: rgb(237,241,252); 56 | color: rgb(49,52,61); 57 | padding: 0.5em 0.5em 0.5em 1em; 58 | display: block; 59 | text-decoration: none; 60 | border-left: 5px solid rgb(239,213,252); 61 | } 62 | 63 | .nav ul li a:hover { 64 | background-color: rgb(255,255,255); 65 | color: rgb(49,52,61); 66 | border-left: 5px solid rgb(250,136,234); 67 | } -------------------------------------------------------------------------------- /chapter_04/listnav-nested.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 4: List navigation 6 | 7 | 8 | 9 |
10 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /chapter_04/listnav.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .nav { 15 | list-style-type: none; 16 | margin: 0; 17 | padding: 0; 18 | width: 200px; 19 | } 20 | 21 | .nav li { 22 | border-left: 10px solid rgb(144,154,181); 23 | border-bottom: 1px solid rgb(144,154,181); 24 | } 25 | 26 | .nav li a:link, 27 | .nav li a:visited { 28 | background-color: rgb(192,202,229); 29 | color: rgb(49,52,61); 30 | padding: 0.5em; 31 | display: block; 32 | text-decoration: none; 33 | border-left: 5px solid rgb(239,213,252); 34 | } -------------------------------------------------------------------------------- /chapter_04/listnav.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 4: List navigation 6 | 7 | 8 | 9 |
10 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /chapter_04/rollover-image.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.875em/1.2 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .intouch { 15 | list-style: none; 16 | margin: 0; 17 | padding: 0; 18 | } 19 | 20 | .intouch li a:link, .intouch li a:visited { 21 | padding: 0.5em 0 0.5em 40px; 22 | display: block; 23 | font-weight: bold; 24 | background-repeat: no-repeat; 25 | background-image: url(sprite-roll.png); 26 | text-decoration: none; 27 | color: rgb(136,136,136); 28 | } 29 | 30 | .intouch li.twitter a:link, .intouch li.twitter a:visited { 31 | background-position: 0 6px; 32 | } 33 | 34 | .intouch li.twitter a:hover { 35 | background-position: 0 -90px; 36 | color: rgb(105,210,231); 37 | } 38 | 39 | .intouch li.rss a:link, .intouch li.rss a:visited { 40 | background-position: 0 -30px; 41 | } 42 | 43 | .intouch li.email a:link, .intouch li.email a:visited { 44 | background-position: 0 -60px; 45 | } 46 | 47 | .intouch li.twitter a:hover { 48 | background-position: 0 -90px; 49 | color: rgb(105,210,231); 50 | } 51 | 52 | .intouch li.rss a:hover { 53 | background-position: 0 -126px; 54 | color: rgb(243,134,48); 55 | } 56 | 57 | .intouch li.email a:hover { 58 | background-position: 0 -156px; 59 | color: rgb(56,55,54); 60 | } -------------------------------------------------------------------------------- /chapter_04/rollover-image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 4: Image rollovers 6 | 7 | 8 | 9 |
10 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /chapter_04/rollover-opacity.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.875em/1.2 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .intouch { 15 | list-style: none; 16 | margin: 0; 17 | padding: 0; 18 | } 19 | 20 | .intouch li a:link, .intouch li a:visited { 21 | padding: 0.5em 0 0.5em 40px; 22 | display: block; 23 | font-weight: bold; 24 | background-repeat: no-repeat; 25 | background-image: url(sprite.png); 26 | text-decoration: none; 27 | } 28 | 29 | .intouch li.twitter a:link, .intouch li.twitter a:visited { 30 | background-position: 0 6px; 31 | color: rgb(105,210,231); 32 | opacity: 0.5; 33 | } 34 | 35 | .intouch li.rss a:link, .intouch li.rss a:visited { 36 | background-position: 0 -30px; 37 | color: rgb(243,134,48); 38 | opacity: 0.5; 39 | } 40 | 41 | .intouch li.email a:link, .intouch li.email a:visited { 42 | background-position: 0 -60px; 43 | color: rgb(56,55,54); 44 | opacity: 0.5; 45 | } 46 | 47 | .intouch li.twitter a:hover, 48 | .intouch li.rss a:hover, 49 | .intouch li.email a:hover { 50 | opacity: 1; 51 | } -------------------------------------------------------------------------------- /chapter_04/rollover-opacity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 4: Opacity rollovers 6 | 7 | 8 | 9 |
10 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /chapter_04/selected.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #333; 3 | background-image: url(brushed_alu_dark.png); 4 | color: #fff; 5 | margin: 0; 6 | padding: 0; 7 | font: 0.875em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 8 | } 9 | 10 | .wrapper { 11 | width: 80%; 12 | margin: 20px auto 40px auto; 13 | } 14 | 15 | .nav { 16 | list-style: none; 17 | margin: 0; 18 | padding: 0; 19 | float: left; 20 | width: 100%; 21 | } 22 | 23 | .nav li { 24 | float: left; 25 | min-width: 8em; 26 | text-align: center; 27 | } 28 | 29 | .nav li a:link, 30 | .nav li a:visited { 31 | background-color: rgba(255,255,255,0.4); 32 | color: rgb(0,0,0); 33 | text-decoration: none; 34 | display: block; 35 | padding: 0.75em; 36 | -moz-border-radius-topleft: 3px; 37 | -moz-border-radius-topright: 3px; 38 | -webkit-border-radius: 3px 3px 0px 0px; 39 | border-radius: 3px 3px 0px 0px; 40 | -webkit-box-shadow: 0px -3px 2px 0px rgba(0, 0, 0, 0.2); 41 | -moz-box-shadow: 0px -3px 2px 0px rgba(0, 0, 0, 0.2); 42 | box-shadow: 0px -3px 2px 0px rgba(0, 0, 0, 0.2); 43 | text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); 44 | } 45 | 46 | #spreads .nav li.spreads a:link, 47 | #spreads .nav li.spreads a:visited, 48 | #fruit .nav li.fruit a:link, 49 | #fruit .nav li.fruit a:visited, 50 | #wine .nav li.wine a:link, 51 | #wine .nav li.wine a:visited, 52 | #biscuits .nav li.biscuits a:link, 53 | #biscuits .nav li.biscuits a:visited { 54 | background-color: rgb(255,255,255); 55 | } 56 | 57 | .nav li a:hover { 58 | background-color: rgba(255,255,255,0.8); 59 | } 60 | 61 | .content { 62 | clear: both; 63 | background-color: #fff; 64 | color: #000; 65 | padding: 1em; 66 | } 67 | 68 | h1 { 69 | font-size: 128.6%; 70 | } -------------------------------------------------------------------------------- /chapter_04/selected.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 4: Horizontal navigation 6 | 7 | 8 | 9 |
10 | 16 |
17 |

Spreads that go with cheese

18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /chapter_04/sitemap.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.2 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .sitemap { 15 | list-style: none; 16 | margin: 0; 17 | padding: 0; 18 | } 19 | 20 | .sitemap > li { 21 | border: 2px solid rgba(153,178,183,0.2); 22 | -webkit-border-radius: 10px; 23 | -moz-border-radius: 10px; 24 | border-radius: 10px; 25 | margin: 0 0 1em 0; 26 | } 27 | 28 | .sitemap > li:hover { 29 | border: 2px solid rgba(153,178,183,1); 30 | } 31 | 32 | .sitemap > li > a:link, .sitemap > li > a:visited { 33 | background-color: rgba(153,178,183,0.1); 34 | color: rgb(0,0,0); 35 | text-decoration: none; 36 | display: block; 37 | padding: 0.75em; 38 | } 39 | 40 | .sitemap > li:hover > a:link, .sitemap > li:hover > a:visited { 41 | background-color: rgba(153,178,183,0.5); 42 | } 43 | 44 | .sitemap ul { 45 | margin: 1em 0 1em 0 ; 46 | padding: 0; 47 | list-style: none; 48 | line-height: 1.8; 49 | } 50 | 51 | .sitemap ul ul { 52 | margin: 0.5em 0 0.5em 0; 53 | } 54 | 55 | .sitemap ul a:link, .sitemap ul a:visited { 56 | padding: 0.75em; 57 | text-decoration: none; 58 | color: rgb(69,80,83); 59 | } 60 | 61 | .sitemap ul ul a:link:before, .sitemap ul ul a:visited:before { 62 | content: "> "; 63 | } -------------------------------------------------------------------------------- /chapter_04/sitemap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 4: Sitemaps 6 | 7 | 8 | 9 |
10 | 32 |
33 | 34 | -------------------------------------------------------------------------------- /chapter_04/sprite-roll.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_04/sprite-roll.png -------------------------------------------------------------------------------- /chapter_04/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_04/sprite.png -------------------------------------------------------------------------------- /chapter_04/tabs.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #333; 3 | background-image: url(brushed_alu_dark.png); 4 | color: #fff; 5 | margin: 0; 6 | padding: 0; 7 | font: 0.875em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 8 | } 9 | 10 | .wrapper { 11 | width: 80%; 12 | margin: 20px auto 40px auto; 13 | } 14 | 15 | .nav { 16 | list-style: none; 17 | margin: 0; 18 | padding: 0; 19 | float: left; 20 | width: 100%; 21 | } 22 | 23 | .nav li { 24 | float: left; 25 | min-width: 8em; 26 | text-align: center; 27 | } 28 | 29 | .nav li a:link, 30 | .nav li a:visited { 31 | background-color: rgba(255,255,255,0.4); 32 | color: rgb(0,0,0); 33 | text-decoration: none; 34 | display: block; 35 | padding: 0.75em; 36 | -moz-border-radius-topleft: 3px; 37 | -moz-border-radius-topright: 3px; 38 | -webkit-border-radius: 3px 3px 0px 0px; 39 | border-radius: 3px 3px 0px 0px; 40 | -webkit-box-shadow: 0px -3px 2px 0px rgba(0, 0, 0, 0.2); 41 | -moz-box-shadow: 0px -3px 2px 0px rgba(0, 0, 0, 0.2); 42 | box-shadow: 0px -3px 2px 0px rgba(0, 0, 0, 0.2); 43 | text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); 44 | } 45 | 46 | .nav li.selected a:link, 47 | .nav li.selected a:visited { 48 | background-color: rgb(255,255,255); 49 | } 50 | 51 | .nav li a:hover { 52 | background-color: rgba(255,255,255,0.8); 53 | } 54 | 55 | .content { 56 | clear: both; 57 | background-color: #fff; 58 | color: #000; 59 | padding: 1em; 60 | } 61 | 62 | h1 { 63 | font-size: 128.6%; 64 | } -------------------------------------------------------------------------------- /chapter_04/tabs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 4: Horizontal navigation 6 | 7 | 8 | 9 |
10 | 16 |
17 |

Spreads that go with cheese

18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /chapter_05/alternate.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .datatable { 15 | width: 100%; 16 | border: 1px solid #d6dde6; 17 | border-collapse: collapse; 18 | } 19 | .datatable td { 20 | border: 1px solid #d6dde6; 21 | padding: 0.3em; 22 | } 23 | .datatable th { 24 | border: 1px solid #828282; 25 | background-color: #bcbcbc; 26 | font-weight: bold; 27 | text-align: left; 28 | padding-left: 0.3em; 29 | } 30 | .datatable caption { 31 | font: bold 110% Arial, Helvetica, sans-serif; 32 | color: #33517a; 33 | text-align: left; 34 | padding: 0.4em 0 0.8em 0; 35 | } 36 | .datatable tr:nth-child(odd) { 37 | background-color: #dfe7f2; 38 | color: #000; 39 | } -------------------------------------------------------------------------------- /chapter_05/alternate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 5: highlighting alternate rows 6 | 7 | 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 |
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
61 |
62 | 63 | -------------------------------------------------------------------------------- /chapter_05/borderstyles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 1em/1.4 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .wrapper div { 15 | background-color: #ccc; 16 | padding: 0.5em; 17 | margin: 0 0 1em 0; 18 | } 19 | 20 | .double { 21 | border: 4px double red 22 | } 23 | 24 | .groove { 25 | border: 4px groove red; 26 | } 27 | 28 | .inset { 29 | border: 4px inset red; 30 | } 31 | 32 | .outset { 33 | border: 4px outset red; 34 | } 35 | 36 | .ridge { 37 | border: 4px ridge red; 38 | } 39 | 40 | .solid { 41 | border: 4px solid red; 42 | } 43 | 44 | .dashed{ 45 | border: 4px dashed red; 46 | } 47 | 48 | .dotted { 49 | border: 4px dotted red; 50 | } 51 | 52 | .none { 53 | border: none; 54 | } -------------------------------------------------------------------------------- /chapter_05/borderstyles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 5: Border styles 6 | 7 | 8 | 9 |
10 |
double
11 |
groove
12 |
inset
13 |
outset
14 |
ridge
15 |
solid
16 |
dashed
17 |
dotted
18 |
none
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /chapter_05/cal.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .clmonth { 15 | border-collapse: collapse; 16 | } 17 | 18 | .clmonth caption { 19 | text-align: left; 20 | font-weight: bold; 21 | font-size: 116.7%; 22 | padding-bottom: 0.4em; 23 | } 24 | 25 | .clmonth th { 26 | border: 1px solid #aaa; 27 | border-bottom: none; 28 | padding: 0.2em 0.6em 0.2em 0.6em; 29 | background-color: #ccc; 30 | color: #3f3f3f; 31 | min-width: 8em; 32 | } 33 | 34 | .clmonth td { 35 | border: 1px solid #eaeaea; 36 | padding: 0.2em 0.6em 0.2em 0.6em; 37 | vertical-align: top; 38 | } 39 | 40 | .clmonth td.previous, .clmonth td.next { 41 | background-color: #f6f6f6; 42 | color: #c6c6c6; 43 | } 44 | 45 | .clmonth td.active { 46 | background-color: #b1cbe1; 47 | color: #2b5070; 48 | border: 2px solid #4682b4; 49 | } 50 | 51 | .clmonth ul { 52 | list-style-type: none; 53 | margin: 0; 54 | padding-left: 1em; 55 | padding-right: 0.6em; 56 | } 57 | 58 | .clmonth li { 59 | margin-bottom: 1em; 60 | } -------------------------------------------------------------------------------- /chapter_05/cal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 5: calendar 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 57 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 87 | 88 | 89 | 90 | 91 | 92 |
November 2011
MondayTuesdayWednesdayThursdayFridaySaturdaySunday
311 24 |
    25 |
  • New pupils' open day
    • 26 |
  • Year 8 theater trip
    • 27 |
28 | 		23456
7 37 |
    38 |
  • Year 7 English exam
    • 39 |
40 | 		8910111213
14151617 53 |
    54 |
  • Sports Day
    • 55 |
56 | 		18 58 |
    59 |
  • Year 7 parents' evening
    • 60 |
  • Prizegiving
    • 61 |
62 | 		1920
21222324 71 |
    72 |
  • Year 8 parents' evening
    • 73 |
74 | 		252627
282930 83 |
    84 |
  • First night of school play
    • 85 |
86 | 		1234
93 |
94 | 95 | -------------------------------------------------------------------------------- /chapter_05/cal_mini.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .clmonth { 15 | border-collapse: collapse; 16 | } 17 | 18 | .clmonth caption { 19 | text-align: left; 20 | font-weight: bold; 21 | font-size: 116.7%; 22 | padding-bottom: 0.4em; 23 | } 24 | 25 | .clmonth th { 26 | border: 1px solid #aaa; 27 | border-bottom: none; 28 | padding: 0.2em 0.4em 0.2em 0.4em; 29 | background-color: #ccc; 30 | color: #3f3f3f; 31 | } 32 | 33 | .clmonth td { 34 | border: 1px solid #eaeaea; 35 | padding: 0.2em 0.4em 0.2em 0.4em; 36 | vertical-align: top; 37 | } 38 | 39 | .clmonth td.previous, .clmonth td.next { 40 | background-color: #f6f6f6; 41 | color: #c6c6c6; 42 | } 43 | 44 | .clmonth td.active { 45 | background-color: #b1cBbe1; 46 | color: #2b5070; 47 | border: 2px solid #4682b4; 48 | } -------------------------------------------------------------------------------- /chapter_05/cal_mini.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 5: mini calendar 6 | 7 | 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 |
November 2011
MTWTFSS
31123456
78910111213
14151617181920
21222324252627
2829301234
67 |
68 | 69 | -------------------------------------------------------------------------------- /chapter_05/colgroups.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .datatable { 15 | border: 1px solid #d6dde6; 16 | border-collapse: collapse; 17 | width: 100%; 18 | } 19 | 20 | .datatable td { 21 | border:2px solid #fff; 22 | padding: 0.3em; 23 | } 24 | 25 | .datatable th { 26 | border:2px solid #fff; 27 | background-color: #00487d; 28 | color: #fff; 29 | font-weight: bold; 30 | text-align: left; 31 | padding: 0.3em; 32 | } 33 | 34 | .datatable colgroup:nth-child(odd) { 35 | background-color: #80c9ff; 36 | color: #000; 37 | } 38 | 39 | .datatable colgroup:nth-child(even) { 40 | background-color: #bfe4ff; 41 | color: #000; 42 | } -------------------------------------------------------------------------------- /chapter_05/colgroups.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 5: styling columns 6 | 7 | 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 | -------------------------------------------------------------------------------- /chapter_05/columns.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .datatable { 15 | border: 1px solid #d6dde6; 16 | border-collapse: collapse; 17 | width: 100%; 18 | } 19 | 20 | .datatable col:nth-child(odd) { 21 | background-color: #80c9ff; 22 | color: #000; 23 | } 24 | 25 | .datatable col:nth-child(even) { 26 | background-color: #bfe4ff; 27 | color: #000; 28 | } 29 | 30 | .datatable td { 31 | border:2px solid #ffffff; 32 | padding: 0.3em; 33 | } 34 | 35 | .datatable th { 36 | border:2px solid #fff; 37 | background-color: #00487d; 38 | color: #fff; 39 | font-weight: bold; 40 | text-align: left; 41 | padding: 0.3em; 42 | } -------------------------------------------------------------------------------- /chapter_05/columns.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 5: styling table columns 6 | 7 | 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 |
Pool APool BPool CPool D
EnglandAustraliaNew ZealandFrance
South AfricaWalesScotlandIreland
SamoaFijiItalyArgentina
USACanadaRomaniaEurope 3
Repechage 2AsiaRepechage 1Namibia
52 |
53 | 54 | -------------------------------------------------------------------------------- /chapter_05/hiliterow.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .datatable { 15 | border: 1px solid #D6DDE6; 16 | border-collapse: collapse; 17 | width: 80%; 18 | } 19 | 20 | .datatable td { 21 | border: 1px solid #D6DDE6; 22 | padding: 0.3em; 23 | } 24 | 25 | .datatable th { 26 | border: 1px solid #828282; 27 | background-color: #BCBCBC; 28 | font-weight: bold; 29 | text-align: left; 30 | padding-left: 0.3em; 31 | } 32 | 33 | .datatable caption { 34 | font-size: 116.7%; 35 | font-weight: bold; 36 | color: #33517A; 37 | text-align: left; 38 | padding: 0.4em 0 0.8em 0; 39 | } 40 | 41 | .datatable tr:hover { 42 | background-color: #DFE7F2; 43 | color: #000000; 44 | } -------------------------------------------------------------------------------- /chapter_05/hiliterow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 5: highlighting table rows 6 | 7 | 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 |
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
61 |
62 | 63 | -------------------------------------------------------------------------------- /chapter_05/pricing.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 1em/1.4 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .pricing { 15 | border-collapse: collapse; 16 | } 17 | 18 | .pricing col { 19 | width: 7em; 20 | } 21 | 22 | .pricing col:first-child { 23 | width: auto; 24 | } 25 | 26 | .pricing td { 27 | color: rgb(51,51,51); 28 | border: 1px solid rgb(255,255,255); 29 | padding: 0.75em; 30 | } 31 | 32 | .pricing tr:nth-child(odd) { 33 | background-color: rgb(246,246,246); 34 | } 35 | 36 | .pricing tr:nth-child(odd):hover td{ 37 | background-color: rgba(59,87,98,.2); 38 | } 39 | 40 | .pricing tr:nth-child(even) { 41 | background-color: rgba(246,246,246,.5); 42 | } 43 | 44 | .pricing tr:nth-child(even):hover td { 45 | background-color: rgba(91,124,121,.2); 46 | } 47 | 48 | .pricing tr:first-child, .pricing tr:first-child:hover td { 49 | background-color: transparent; 50 | } 51 | 52 | .pricing th[scope="col"] { 53 | background-color: rgb(59,87,98); 54 | color: rgb(255,255,255); 55 | border: 1px solid rgb(255,255,255); 56 | font-weight: normal; 57 | padding: 0.75em; 58 | -moz-border-radius-topleft: 10px; 59 | -moz-border-radius-topright: 10px; 60 | -moz-border-radius-bottomright: 0px; 61 | -moz-border-radius-bottomleft: 0px; 62 | -webkit-border-radius: 10px 10px 0px 0px; 63 | border-radius: 10px 10px 0px 0px; 64 | text-shadow: 1px 1px 3px #111111; 65 | } 66 | 67 | .pricing th[scope="col"]:nth-child(odd) { 68 | background-color: rgb(91,124,121); 69 | } 70 | 71 | .pricing th span.price { 72 | display: block; 73 | padding: 0.2em 0 0 0; 74 | font-size: 87.5%; 75 | font-weight: bold; 76 | } 77 | 78 | .pricing th[scope="row"] { 79 | background-color: rgb(232,232,232); 80 | color: rgb(0,0,0); 81 | border: 1px solid rgb(255,255,255); 82 | padding: 0.75em; 83 | font-weight: normal; 84 | text-align: left; 85 | } 86 | 87 | .pricing tr:nth-child(odd) th[scope="row"] { 88 | background-color: rgba(232,232,232,.5); 89 | } -------------------------------------------------------------------------------- /chapter_05/pricing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 5: pricing table example 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 22 | 24 | 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 |
Starter 19 | $5.99Pro 1 21 | $7.99Pro 2 23 | $11.99Reseller 25 | $19.99
Disk Space4 GB6 GB8 GB12 GB
Bandwidth (per month)25 GB50 GB75 GB100 GB
Websites11310
MySQL Databases5102050
Domains1unlimitedunlimitedunlimited
63 |
64 | 65 | -------------------------------------------------------------------------------- /chapter_05/spreadsheet.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .datatable { 15 | border: 1px solid #d6dde6; 16 | border-collapse: collapse; 17 | } 18 | 19 | .datatable td { 20 | border: 1px solid #d6dde6; 21 | text-align: right; 22 | padding: 0.2em; 23 | } 24 | 25 | .datatable th { 26 | border: 1px solid #828282; 27 | background-color: #bcbcbc; 28 | font-weight: bold; 29 | text-align: left; 30 | padding: 0.2em; 31 | } 32 | 33 | .datatable caption { 34 | font-size: 116.7%; 35 | font-weight: bold; 36 | background-color: #b0c4de; 37 | color: #111; 38 | padding: 0.4em 0 0.3em 0; 39 | border: 1px solid #789ac6; 40 | } -------------------------------------------------------------------------------- /chapter_05/spreadsheet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 5: spreadsheet data 6 | 7 | 8 | 9 |
10 | 11 | 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 | 68 | 69 | 70 |
12 | Yearly Income 2008 - 2011 13 |
2008200920102011
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
71 |
72 | 73 | -------------------------------------------------------------------------------- /chapter_05/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 | } -------------------------------------------------------------------------------- /chapter_05/table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 5: spreadsheet data 6 | 7 | 8 | 9 |
10 | 11 | 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 | 68 | 69 | 70 |
12 | Yearly Income 2008 - 2011 13 |
2008200920102011
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
71 |
72 | 73 | 74 | -------------------------------------------------------------------------------- /chapter_06/accept.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_06/accept.png -------------------------------------------------------------------------------- /chapter_06/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_06/email.png -------------------------------------------------------------------------------- /chapter_06/email_error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_06/email_error.png -------------------------------------------------------------------------------- /chapter_06/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_06/error.png -------------------------------------------------------------------------------- /chapter_06/fieldsets.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | form { 15 | background-color: rgb(244,252,232); 16 | width: 500px; 17 | padding: 1em; 18 | -webkit-border-radius: 10px; 19 | -moz-border-radius: 10px; 20 | border-radius: 10px; 21 | } 22 | 23 | fieldset { 24 | background-color: rgba(126,208,214,0.3); 25 | border: 3px solid rgb(255,255,255); 26 | -webkit-border-radius: 10px; 27 | -moz-border-radius: 10px; 28 | border-radius: 10px; 29 | margin: 0 0 1em 0; 30 | } 31 | 32 | fieldset:hover { 33 | background-color: rgba(126,208,214,0.5); 34 | } 35 | 36 | legend { 37 | font-size: 133%; 38 | } 39 | 40 | form div { 41 | float: left; 42 | width: 100%; 43 | padding: 0 0 0.75em 0; 44 | position: relative; 45 | } 46 | 47 | form p.help { 48 | font-style: italic; 49 | padding: 0 1em 1em 1em; 50 | } 51 | 52 | form p.help em { 53 | color: red; 54 | } 55 | 56 | form fieldset div:first-of-type { 57 | padding-top: 1em; 58 | } 59 | 60 | form label { 61 | float: left; 62 | width: 30%; 63 | font-size: 116.7%; 64 | } 65 | 66 | form div label em { 67 | position: absolute; 68 | color: red; 69 | right: 0; 70 | } 71 | 72 | form input { 73 | width: 65%; 74 | font-size: 133%; 75 | border: 0; 76 | -webkit-border-radius: 10px; 77 | -moz-border-radius: 10px; 78 | border-radius: 10px; 79 | padding: 0.25em; 80 | } 81 | 82 | div.submit { 83 | float: none; 84 | background-color: rgba(126,208,214,0.3); 85 | border: 3px solid rgb(255,255,255); 86 | -webkit-border-radius: 10px; 87 | -moz-border-radius: 10px; 88 | border-radius: 10px; 89 | margin: 0 0 1em 0; 90 | padding: 0.5em 0 0.5em 0; 91 | text-align: center; 92 | } 93 | 94 | form input[type="submit"] { 95 | width: auto; 96 | border: 3px solid rgb(126,208,214); 97 | background-color: rgba(78,150,137,0.5); 98 | color: rgb(255,255,255); 99 | } 100 | 101 | form input[type="submit"]:hover { 102 | background-color: rgb(78,150,137); 103 | } -------------------------------------------------------------------------------- /chapter_06/fieldsets.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 6: grouping data with fieldsets 6 | 7 | 8 | 9 |
10 |
11 |

Please complete the form to register. Required fields are indicated by a *.

12 |
13 | Create an account 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 |
26 |
27 | Your address 28 |
29 |
30 | 31 |
32 |
33 | 34 |
35 |
36 | 37 |
38 |
39 |
40 |
41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /chapter_06/form-highlight.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | form { 15 | width: 400px; 16 | } 17 | 18 | form div { 19 | float: left; 20 | width: 400px; 21 | padding: 0 0 0.75em 0; 22 | } 23 | 24 | form label { 25 | float: left; 26 | width: 120px; 27 | } 28 | 29 | form textarea, form input { 30 | float:right; 31 | width: 250px; 32 | border-top: 1px solid #999; 33 | border-right: 1px solid #ccc; 34 | border-bottom: 1px solid #cfcfcf; 35 | border-left: 1px solid #cfcfcf; 36 | -webkit-box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 37 | -moz-box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 38 | box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 39 | padding: 4px; 40 | } 41 | 42 | form textarea:focus, form input:focus { 43 | background-color: #adb3c5; 44 | } 45 | 46 | form input[type="submit"] { 47 | float: none; 48 | width: auto; 49 | padding: 0.25em; 50 | -webkit-box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 51 | -moz-box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 52 | box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 53 | font-size: 125%; 54 | -webkit-border-radius: 3px; 55 | -moz-border-radius: 3px; 56 | border-radius: 3px; 57 | } 58 | 59 | form input[type="submit"]:focus { 60 | background-color: #fbef8e; 61 | } 62 | 63 | form div.submit { 64 | text-align: right; 65 | } -------------------------------------------------------------------------------- /chapter_06/form-highlight.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 6: Styling a form 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter_06/form-html5.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | form { 15 | width: 400px; 16 | } 17 | 18 | form div { 19 | float: left; 20 | width: 400px; 21 | padding: 0 0 0.75em 0; 22 | } 23 | 24 | form label { 25 | float: left; 26 | width: 120px; 27 | } 28 | 29 | form textarea, form input { 30 | float:right; 31 | width: 250px; 32 | border-top: 1px solid #999; 33 | border-right: 1px solid #ccc; 34 | border-bottom: 1px solid #cfcfcf; 35 | border-left: 1px solid #cfcfcf; 36 | -webkit-box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 37 | -moz-box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 38 | box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 39 | padding: 4px; 40 | } 41 | 42 | form input[type="submit"] { 43 | float: none; 44 | width: auto; 45 | padding: 0.25em; 46 | -webkit-box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 47 | -moz-box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 48 | box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 49 | font-size: 125%; 50 | -webkit-border-radius: 3px; 51 | -moz-border-radius: 3px; 52 | border-radius: 3px; 53 | } 54 | 55 | form div.submit { 56 | text-align: right; 57 | } -------------------------------------------------------------------------------- /chapter_06/form-html5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 6: HTML5 elements and attributes 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter_06/form-inline.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | form { 15 | border: 3px solid #ccc; 16 | background-color: #fcfcfc; 17 | padding: 1em; 18 | -webkit-border-radius: 10px; 19 | -moz-border-radius: 10px; 20 | border-radius: 10px; 21 | } 22 | 23 | form p { 24 | line-height: 2.5; 25 | } 26 | 27 | form p.helptext { 28 | line-height: 1.4; 29 | font-style: italic; 30 | } 31 | 32 | form input { 33 | border-top: 1px solid #999; 34 | border-right: 1px solid #ccc; 35 | border-bottom: 1px solid #cfcfcf; 36 | border-left: 1px solid #cfcfcf; 37 | -webkit-box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 38 | -moz-box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 39 | box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 40 | padding: 4px; 41 | } 42 | 43 | input:focus:required:invalid { 44 | background-image: url(error.png); 45 | background-position: 98% center; 46 | background-repeat: no-repeat; 47 | } 48 | 49 | input:required:valid { 50 | background-image: url(accept.png); 51 | background-position: 98% center; 52 | background-repeat: no-repeat; 53 | } 54 | 55 | input[type="email"]:focus:required:invalid { 56 | background-image: url(email_error.png); 57 | } 58 | 59 | form input[type="submit"] { 60 | width: auto; 61 | border: 3px solid #ccc; 62 | background-color: #fff; 63 | color: #333; 64 | -webkit-border-radius: 5px; 65 | -moz-border-radius: 5px; 66 | border-radius: 5px; 67 | font-weight: bold; 68 | } -------------------------------------------------------------------------------- /chapter_06/form-inline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 6: Styling a form 6 | 7 | 8 | 9 |
10 |

Subscribe

11 |
12 |

Hello! We need to take a few details to be able to process your subscription. Please fill in the form below - all fields are required.

13 |

14 | and 15 | 16 | . 21 |

22 |
23 |
24 |
25 | 26 | -------------------------------------------------------------------------------- /chapter_06/form-validation.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | form { 15 | width: 400px; 16 | } 17 | 18 | form div { 19 | float: left; 20 | width: 400px; 21 | padding: 0 0 0.75em 0; 22 | } 23 | 24 | form label { 25 | float: left; 26 | width: 120px; 27 | } 28 | 29 | form textarea, form input { 30 | float:right; 31 | width: 250px; 32 | border-top: 1px solid #999; 33 | border-right: 1px solid #ccc; 34 | border-bottom: 1px solid #cfcfcf; 35 | border-left: 1px solid #cfcfcf; 36 | -webkit-box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 37 | -moz-box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 38 | box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 39 | padding: 4px; 40 | } 41 | 42 | input:focus:required:invalid { 43 | background-image: url(error.png); 44 | background-position: 98% center; 45 | background-repeat: no-repeat; 46 | } 47 | 48 | input:required:valid { 49 | background-image: url(accept.png); 50 | background-position: 98% center; 51 | background-repeat: no-repeat; 52 | } 53 | 54 | input[type="email"]:focus:required:invalid { 55 | background-image: url(email_error.png); 56 | } 57 | 58 | form input[type="submit"] { 59 | float: none; 60 | width: auto; 61 | padding: 0.25em; 62 | -webkit-box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 63 | -moz-box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 64 | box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 65 | font-size: 125%; 66 | -webkit-border-radius: 3px; 67 | -moz-border-radius: 3px; 68 | border-radius: 3px; 69 | } 70 | 71 | form div.submit { 72 | text-align: right; 73 | } -------------------------------------------------------------------------------- /chapter_06/form-validation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 6: Form validation 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /chapter_06/form.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | form { 15 | width: 400px; 16 | } 17 | 18 | form div { 19 | float: left; 20 | width: 400px; 21 | padding: 0 0 0.75em 0; 22 | } 23 | 24 | form label { 25 | float: left; 26 | width: 120px; 27 | } 28 | 29 | form textarea, form input:not([type="submit"]) { 30 | float: right; 31 | width: 260px; 32 | } 33 | 34 | form input[type="submit"] { 35 | float: none; 36 | width: auto; 37 | } 38 | 39 | form div.submit { 40 | text-align: right; 41 | } -------------------------------------------------------------------------------- /chapter_06/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 6: Styling a form 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /chapter_06/form2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | form { 15 | width: 400px; 16 | } 17 | 18 | form div { 19 | float: left; 20 | width: 400px; 21 | padding: 0 0 0.75em 0; 22 | } 23 | 24 | form label { 25 | float: left; 26 | width: 120px; 27 | } 28 | 29 | form textarea, form input { 30 | float:right; 31 | width: 250px; 32 | border-top: 1px solid #999; 33 | border-right: 1px solid #ccc; 34 | border-bottom: 1px solid #cfcfcf; 35 | border-left: 1px solid #cfcfcf; 36 | -webkit-box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 37 | -moz-box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 38 | box-shadow: inset -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 39 | padding: 4px; 40 | } 41 | 42 | form input[type="submit"] { 43 | float: none; 44 | width: auto; 45 | padding: 0.25em; 46 | -webkit-box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 47 | -moz-box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 48 | box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 49 | font-size: 125%; 50 | -webkit-border-radius: 3px; 51 | -moz-border-radius: 3px; 52 | border-radius: 3px; 53 | } 54 | 55 | form div.submit { 56 | text-align: right; 57 | } -------------------------------------------------------------------------------- /chapter_06/form2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 6: Styling a form 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter_06/html5-elements.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | form { 15 | width: 400px; 16 | } 17 | 18 | form div { 19 | float: left; 20 | width: 400px; 21 | padding: 0 0 0.75em 0; 22 | } 23 | 24 | form label { 25 | float: left; 26 | width: 120px; 27 | } 28 | 29 | 30 | 31 | form input[type="submit"] { 32 | float: none; 33 | width: auto; 34 | padding: 0.25em; 35 | -webkit-box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 36 | -moz-box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 37 | box-shadow: -2px 1px 2px 2px rgba(0, 0, 0, 0.1); 38 | font-size: 125%; 39 | -webkit-border-radius: 3px; 40 | -moz-border-radius: 3px; 41 | border-radius: 3px; 42 | } 43 | 44 | -------------------------------------------------------------------------------- /chapter_06/html5-elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 6: HTML5 elements and attributes 6 | 7 | 8 | 9 |
10 | 11 |
12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /chapter_07/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_07/arrow.png -------------------------------------------------------------------------------- /chapter_07/brushed_alu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_07/brushed_alu.png -------------------------------------------------------------------------------- /chapter_07/brushed_alu_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_07/brushed_alu_dark.png -------------------------------------------------------------------------------- /chapter_07/example1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #333; 3 | background-image: url(brushed_alu_dark.png); 4 | color: #fff; 5 | margin: 0; 6 | padding: 0; 7 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 8 | } 9 | 10 | .wrapper { 11 | width: 80%; 12 | margin: 20px auto 40px auto; 13 | background-color: #fff; 14 | color: #333; 15 | background-image: url(brushed_alu.png); 16 | -webkit-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 17 | -moz-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 18 | box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 19 | -webkit-border-radius: 10px; 20 | -moz-border-radius: 10px; 21 | border-radius: 10px; 22 | } 23 | 24 | .recipe { 25 | padding: 1em; 26 | } 27 | 28 | .recipe img { 29 | float:right; 30 | width: 200px; 31 | margin: 0 0 1em 1em; 32 | -webkit-box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4); 33 | -moz-box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4); 34 | box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4); 35 | -webkit-transform: rotate(5deg); 36 | -moz-transform: rotate(5deg); 37 | -o-transform: rotate(5deg); 38 | -ms-transform: rotate(5deg); 39 | transform: rotate(5deg); 40 | } 41 | 42 | h1 { 43 | font-size: 150%; 44 | } 45 | 46 | h2 { 47 | font-size: 125%; 48 | } 49 | 50 | h2.instructions { 51 | background-image: url(instructions.png); 52 | background-repeat: no-repeat; 53 | background-position: left center; 54 | padding-left: 30px; 55 | } 56 | 57 | ul.ingredients { 58 | clear:both; 59 | border-top: 1px solid #999; 60 | border-bottom: 1px solid #999; 61 | list-style: none; 62 | margin: 1em 0 1em 0; 63 | padding: 1em 0 1em 30px; 64 | background-image: url(ingredients.png); 65 | background-repeat: no-repeat; 66 | background-position: 0 1em; 67 | } 68 | 69 | a.more:link, a.more:visited { 70 | display: block; 71 | padding: 0.3em 20px 0.3em 0; 72 | text-align: right; 73 | color: #666; 74 | font-weight: bold; 75 | background-image: url(arrow.png); 76 | background-position: right center; 77 | background-repeat: no-repeat; 78 | text-decoration: none; 79 | } -------------------------------------------------------------------------------- /chapter_07/example1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 7: Example 1 6 | 7 | 8 | 9 |
10 |
11 |

Baked Garlic

12 | Garlic 13 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

14 |

To make your own baked garlic, you will need:

15 | 21 | 22 |

Instructions

23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | More recipes 32 |
33 |
34 | 35 | -------------------------------------------------------------------------------- /chapter_07/garlic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_07/garlic.jpg -------------------------------------------------------------------------------- /chapter_07/ingredients.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_07/ingredients.png -------------------------------------------------------------------------------- /chapter_07/instructions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_07/instructions.png -------------------------------------------------------------------------------- /chapter_07/pie.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #333; 3 | background-image: url(brushed_alu_dark.png); 4 | color: #fff; 5 | margin: 0; 6 | padding: 0; 7 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 8 | } 9 | 10 | .wrapper { 11 | width: 80%; 12 | margin: 20px auto 40px auto; 13 | background-color: #fff; 14 | color: #333; 15 | background-image: url(brushed_alu.png); 16 | -webkit-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 17 | -moz-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 18 | box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 19 | -webkit-border-radius: 10px; 20 | -moz-border-radius: 10px; 21 | border-radius: 10px; 22 | behavior: url(PIE.htc); 23 | } 24 | 25 | .recipe { 26 | padding: 1em; 27 | } 28 | 29 | .recipe img { 30 | float:right; 31 | width: 200px; 32 | margin: 0 0 1em 1em; 33 | -webkit-box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4); 34 | -moz-box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4); 35 | box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4); 36 | -webkit-transform: rotate(5deg); 37 | -moz-transform: rotate(5deg); 38 | -o-transform: rotate(5deg); 39 | -ms-transform: rotate(5deg); 40 | transform: rotate(5deg); 41 | behavior: url(PIE.htc); 42 | } 43 | 44 | h1 { 45 | font-size: 150%; 46 | } 47 | 48 | h2 { 49 | font-size: 125%; 50 | } 51 | 52 | h2.instructions { 53 | background-image: url(instructions.png); 54 | background-repeat: no-repeat; 55 | background-position: left center; 56 | padding-left: 30px; 57 | } 58 | 59 | ul.ingredients { 60 | clear:both; 61 | border-top: 1px solid #999; 62 | border-bottom: 1px solid #999; 63 | list-style: none; 64 | margin: 1em 0 1em 0; 65 | padding: 1em 0 1em 30px; 66 | background-image: url(ingredients.png); 67 | background-repeat: no-repeat; 68 | background-position: 0 1em; 69 | } 70 | 71 | a.more:link, a.more:visited { 72 | display: block; 73 | padding: 0.3em 20px 0.3em 0; 74 | text-align: right; 75 | color: #666; 76 | font-weight: bold; 77 | background-image: url(arrow.png); 78 | background-position: right center; 79 | background-repeat: no-repeat; 80 | text-decoration: none; 81 | } -------------------------------------------------------------------------------- /chapter_07/pie.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 7: CSS PIE 6 | 7 | 8 | 9 |
10 |
11 |

Baked Garlic

12 | Garlic 13 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

14 |

To make your own baked garlic, you will need:

15 | 21 | 22 |

Instructions

23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 | More recipes 32 |
33 |
34 | 35 | -------------------------------------------------------------------------------- /chapter_07/selectors-conditional.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 7: Selectivizr 6 | 7 | 8 | 9 | 10 | 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 |
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
67 |
68 | 69 | -------------------------------------------------------------------------------- /chapter_07/selectors-jquery.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .datatable { 15 | width: 100%; 16 | border: 1px solid #d6dde6; 17 | border-collapse: collapse; 18 | } 19 | 20 | .datatable td { 21 | border: 1px solid #d6dde6; 22 | padding: 0.3em; 23 | } 24 | 25 | .datatable th { 26 | border: 1px solid #828282; 27 | background-color: #bcbcbc; 28 | font-weight: bold; 29 | text-align: left; 30 | padding-left: 0.3em; 31 | } 32 | 33 | .datatable caption { 34 | font: bold 110% Arial, Helvetica, sans-serif; 35 | color: #33517a; 36 | text-align: left; 37 | padding: 0.4em 0 0.8em 0; 38 | } 39 | 40 | .datatable tr:nth-child(odd), .datatable tr.odd { 41 | background-color: #dfe7f2; 42 | color: #000000; 43 | } -------------------------------------------------------------------------------- /chapter_07/selectors-jquery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 7: Selectivizr 6 | 7 | 8 | 9 | 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 |
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
68 |
69 | 70 | -------------------------------------------------------------------------------- /chapter_07/selectors.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #111; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | .datatable { 15 | width: 100%; 16 | border: 1px solid #d6dde6; 17 | border-collapse: collapse; 18 | } 19 | 20 | .datatable td { 21 | border: 1px solid #d6dde6; 22 | padding: 0.3em; 23 | } 24 | 25 | .datatable th { 26 | border: 1px solid #828282; 27 | background-color: #bcbcbc; 28 | font-weight: bold; 29 | text-align: left; 30 | padding-left: 0.3em; 31 | } 32 | 33 | .datatable caption { 34 | font: bold 110% Arial, Helvetica, sans-serif; 35 | color: #33517a; 36 | text-align: left; 37 | padding: 0.4em 0 0.8em 0; 38 | } 39 | 40 | .datatable tr:nth-child(odd) { 41 | background-color: #dfe7f2; 42 | color: #000000; 43 | } -------------------------------------------------------------------------------- /chapter_07/selectors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 7: Selectivizr 6 | 7 | 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 |
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
64 |
65 | 66 | -------------------------------------------------------------------------------- /chapter_08/boxmodel.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.5 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | p { 15 | margin: 0; 16 | padding; 0; 17 | } 18 | 19 | .box { 20 | width: 500px; 21 | float:left; 22 | background-color: rgb(209,243,219); 23 | } 24 | 25 | .box div { 26 | margin: 20px; 27 | padding: 20px; 28 | border: 5px solid rgb(126,111,113); 29 | background-color: rgb(254,255,241); 30 | } -------------------------------------------------------------------------------- /chapter_08/boxmodel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 8: The Box Model 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 |
14 | 15 |

This example consists of two div elements nested one inside the other. The outer div has a class of 'box' and is 500 pixels wide. It has no margin or padding applied.

16 | 17 |

The inner div has no width set. As a block level element it expands to fill the containing div. However we have added 20 pixels of margin to this div, a 5 pixel border and 20 pixels of padding.

18 | 19 |

We can calculate the total width of the content area of the inner div (containing this text) as follows:

20 | 21 |

500 - 40 pixels (the left and right margins) = 460 22 |
460 - 10 pixels (the left and right border) = 450 23 |
450 - 40 pixels (the left and right padding) = 410 pixels.

24 | 25 |
26 |
27 | 28 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /chapter_08/boxmodel2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.5 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | p { 15 | margin: 0; 16 | padding; 0; 17 | } 18 | 19 | .box { 20 | width: 500px; 21 | margin: 20px; 22 | padding: 20px; 23 | border: 5px solid rgb(126,111,113); 24 | background-color: rgb(254,255,241); 25 | } 26 | 27 | -------------------------------------------------------------------------------- /chapter_08/boxmodel2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 8: The Box Model 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 |
14 | 15 |

This example consists of a div element with a class of 'box'.

16 | 17 |

div.box has a width set of 500 pixels. We have added 20 pixels of margin to this div, a 5 pixel border and 20 pixels of padding.

18 | 19 |

The content area has a width of 500 pixels and we then add on the margin, padding and border to this width. So the total width our div takes up on the page is:

20 | 21 |

500 + 40 pixels (left and right padding) = 540 22 |
540 + 10 pixels (left and right border) = 550 23 |
550 + 40 pixels (left and right margin, space around the visible element) = 590 pixels.

24 | 25 |
26 |
27 | 28 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /chapter_08/centering.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.5 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 600px; 11 | padding: 40px; 12 | margin: 20px auto 40px auto; 13 | border: 5px solid rgb(126,111,113); 14 | } -------------------------------------------------------------------------------- /chapter_08/centering.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 8: Center a box 6 | 7 | 8 | 9 |
10 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lectus vitae nisi suscipit suscipit et sed felis. Sed id erat felis. Integer imperdiet lectus eget nulla ullamcorper non laoreet nisl vestibulum. Fusce vitae augue orci, tincidunt iaculis libero. Mauris semper metus nec massa egestas gravida. Fusce posuere nulla ac mi blandit congue. Fusce at cursus nulla. Etiam erat dui, egestas at suscipit at, interdum ac est. Fusce tempor malesuada sollicitudin. Donec quis urna arcu.

11 |

Pellentesque volutpat eleifend orci, eget dictum dui porta in. Ut vitae tempor risus. Etiam sit amet nisl ac dolor tincidunt pellentesque ut vitae metus. Fusce auctor magna ac nisi mattis sit amet condimentum metus condimentum. Pellentesque nisl nulla, rutrum a viverra sed, facilisis a sapien. Suspendisse adipiscing ultrices augue eget mattis. Praesent nec lorem diam, id dapibus augue. Duis eu nulla sit amet justo tristique venenatis. Integer vel lacus eget eros pellentesque consequat eget ut augue. Aliquam nec est eget velit scelerisque dignissim vel a risus. Ut lacus leo, sodales nec ultricies bibendum, euismod placerat enim.

12 |
13 | 14 | -------------------------------------------------------------------------------- /chapter_08/float-clear.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #333; 3 | background-image: url(brushed_alu_dark.png); 4 | color: #fff; 5 | margin: 0; 6 | padding: 0; 7 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 8 | } 9 | 10 | .wrapper { 11 | width: 80%; 12 | margin: 20px auto 40px auto; 13 | background-color: #fff; 14 | color: #333; 15 | background-image: url(brushed_alu.png); 16 | -webkit-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 17 | -moz-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 18 | box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 19 | -webkit-border-radius: 10px; 20 | -moz-border-radius: 10px; 21 | border-radius: 10px; 22 | } 23 | 24 | .recipe { 25 | padding: 1em; 26 | } 27 | 28 | .recipe img { 29 | float: right; 30 | width: 200px; 31 | margin: 0 0 1em 1em; 32 | -webkit-box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4); 33 | -moz-box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4); 34 | box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4); 35 | } 36 | 37 | h1 { 38 | font-size: 150%; 39 | } 40 | 41 | h2 { 42 | font-size: 125%; 43 | } 44 | 45 | h2.instructions { 46 | background-image: url(instructions.png); 47 | background-repeat: no-repeat; 48 | background-position: left center; 49 | padding-left: 30px; 50 | } 51 | 52 | ul.ingredients { 53 | clear: both; 54 | border-top: 1px solid #999; 55 | border-bottom: 1px solid #999; 56 | list-style: none; 57 | margin: 1em 0 1em 0; 58 | padding: 1em 0 1em 30px; 59 | background-image: url(ingredients.png); 60 | background-repeat: no-repeat; 61 | background-position: 0 1em; 62 | } -------------------------------------------------------------------------------- /chapter_08/float-clear.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 8: Clear 6 | 7 | 8 | 9 |
10 |
11 |

Baked Garlic

12 | Garlic 13 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

14 |

To make your own baked garlic, you will need:

15 | 21 | 22 |

Instructions

23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /chapter_08/float.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #333; 3 | background-image: url(brushed_alu_dark.png); 4 | color: #fff; 5 | margin: 0; 6 | padding: 0; 7 | font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 8 | } 9 | 10 | .wrapper { 11 | width: 80%; 12 | margin: 20px auto 40px auto; 13 | background-color: #fff; 14 | color: #333; 15 | background-image: url(brushed_alu.png); 16 | -webkit-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 17 | -moz-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 18 | box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 19 | -webkit-border-radius: 10px; 20 | -moz-border-radius: 10px; 21 | border-radius: 10px; 22 | } 23 | 24 | .recipe { 25 | padding: 1em; 26 | } 27 | 28 | .recipe img { 29 | float: right; 30 | width: 200px; 31 | margin: 0 0 1em 1em; 32 | -webkit-box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4); 33 | -moz-box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4); 34 | box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4); 35 | } 36 | 37 | h1 { 38 | font-size: 150%; 39 | } 40 | 41 | h2 { 42 | font-size: 125%; 43 | } 44 | 45 | h2.instructions { 46 | background-image: url(instructions.png); 47 | background-repeat: no-repeat; 48 | background-position: left center; 49 | padding-left: 30px; 50 | } 51 | 52 | ul.ingredients { 53 | border-top: 1px solid #999; 54 | border-bottom: 1px solid #999; 55 | list-style: none; 56 | margin: 1em 0 1em 0; 57 | padding: 1em 0 1em 30px; 58 | background-image: url(ingredients.png); 59 | background-repeat: no-repeat; 60 | background-position: 0 1em; 61 | } -------------------------------------------------------------------------------- /chapter_08/float.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 8: Float 6 | 7 | 8 | 9 |
10 |
11 |

Baked Garlic

12 | Garlic 13 |

Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.

14 |

To make your own baked garlic, you will need:

15 | 21 | 22 |

Instructions

23 |
    24 |
  1. Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.
    2. 25 |
  2. In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.
    3. 26 |
  3. Add a few tablespoons of water to the nest then add the garlic heads.
    4. 27 |
  4. Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.
    5. 28 |
  5. Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.
    6. 29 |
  6. Enjoy!
    7. 30 |
31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /chapter_08/gallery.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.5 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | ul.gallery { 15 | margin: 0; 16 | padding: 0; 17 | list-style: none; 18 | } 19 | 20 | ul.gallery li { 21 | float: left; 22 | width: 240px; 23 | margin: 0 20px 20px 0; 24 | border: 1px solid #000; 25 | position: relative; 26 | -webkit-box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.3); 27 | -moz-box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.3); 28 | box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.3); 29 | } 30 | 31 | ul.gallery img { 32 | display: block; 33 | } 34 | 35 | ul.gallery span { 36 | position: absolute; 37 | bottom: 0; 38 | left: 0; 39 | background-color: rgba(0,0,0,0.7); 40 | color: rgb(255,255,255); 41 | width: 220px; 42 | padding: 10px; 43 | } 44 | 45 | ul.gallery span { 46 | margin-left: -9999px; 47 | } 48 | 49 | ul.gallery li:hover span { 50 | margin-left: 0; 51 | } -------------------------------------------------------------------------------- /chapter_08/gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 8: Gallery 6 | 7 | 8 | 9 |
10 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /chapter_08/garlic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_08/garlic.jpg -------------------------------------------------------------------------------- /chapter_08/inline-block.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.5 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | p { 10 | margin: 0; 11 | padding: 1em 0 1em 0; 12 | } 13 | 14 | .wrapper { 15 | width: 80%; 16 | margin: 20px auto 40px auto; 17 | } 18 | 19 | .one { 20 | background-color: #ccc; 21 | color: #000; 22 | border: 2px solid #aaa; 23 | padding: 1em; 24 | margin: 1em; 25 | } 26 | 27 | .two { 28 | background-color: #ccc; 29 | color: #000; 30 | border: 2px solid #aaa; 31 | padding: 1em; 32 | display: inline; 33 | } 34 | 35 | a { 36 | background-color: #ccc; 37 | color: #fff; 38 | text-decoration: none; 39 | padding: 1em; 40 | } 41 | 42 | a.block { 43 | display: block; 44 | margin: 1em; 45 | padding: 1em; 46 | } 47 | 48 | a.inline-block { 49 | display: inline-block; 50 | margin: 1em; 51 | padding: 1em; 52 | width: 200px; 53 | } -------------------------------------------------------------------------------- /chapter_08/inline-block.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 8: Inline and block-level elements 6 | 7 | 8 | 9 |
10 |
A div is a block-level element. This div has padding of 1em and a margin of 1em. It is taking up the full width of the containing element (.wrapper).
11 |

12 |
This div is displaying as an inline element.
13 |
This div is also displaying as an inline element.
14 |

15 |

This paragraph contains a link that displays as an inline element. This is the default for links.

16 |

This paragraph contains a link that is set to display as block-level using CSS.

17 |

This paragraph contains a link that displays as an inline block element. This means that I can give it a width.

18 |
19 | 20 | -------------------------------------------------------------------------------- /chapter_08/instructions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_08/instructions.png -------------------------------------------------------------------------------- /chapter_08/margin.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.5 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | p { 15 | border: 2px solid #aaa; 16 | background-color: #eee; 17 | } 18 | 19 | p.margintest { 20 | margin: 2em; 21 | } -------------------------------------------------------------------------------- /chapter_08/margin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 8: Margins 6 | 7 | 8 | 9 |
10 |

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.

11 |

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.

12 |

This paragraph has a 2em 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.

13 |
14 | 15 | -------------------------------------------------------------------------------- /chapter_08/padding.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.5 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | } 13 | 14 | p { 15 | border: 2px solid #aaa; 16 | background-color: #eee; 17 | } 18 | 19 | p.paddingtest { 20 | padding: 2em; 21 | } -------------------------------------------------------------------------------- /chapter_08/padding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chapter 8: Padding 6 | 7 | 8 | 9 |
10 |

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.

11 |

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.

12 |

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

13 |
14 | 15 | -------------------------------------------------------------------------------- /chapter_08/position.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | margin: 0; 5 | padding: 0; 6 | font: 0.75em/1.5 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | .wrapper { 10 | width: 80%; 11 | margin: 20px auto 40px auto; 12 | position: relative; 13 | } 14 | 15 | .box1 { 16 | width: 300px; 17 | padding: 20px; 18 | border: 5px solid rgb(130,108,84); 19 | background-color: rgb(244,234,199); 20 | position: absolute; 21 | top: 10px; 22 | left: 10px; 23 | } 24 | 25 | .box2 { 26 | width: 300px; 27 | padding: 20px; 28 | border: 5px solid rgb(216,174,158); 29 | background-color: rgb(250,230,232); 30 | position: absolute; 31 | bottom: 10px; 32 | right: 10px; 33 | } -------------------------------------------------------------------------------- /chapter_08/widget1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_08/widget1.jpg -------------------------------------------------------------------------------- /chapter_08/widget2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_08/widget2.jpg -------------------------------------------------------------------------------- /chapter_08/widget3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_08/widget3.jpg -------------------------------------------------------------------------------- /chapter_08/widget4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_08/widget4.jpg -------------------------------------------------------------------------------- /chapter_08/widget5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_08/widget5.jpg -------------------------------------------------------------------------------- /chapter_08/widget6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_08/widget6.jpg -------------------------------------------------------------------------------- /chapter_09/2col-float.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgb(255,255,255); 3 | color: rgb(59,67,68); 4 | margin: 0; 5 | padding: 0; 6 | font: 1em/1.4 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | h1, h2, h3 { 10 | margin: 0; 11 | padding: 0 0 1em 0; 12 | text-shadow: 1px 1px 2px rgba(0,0,0,0.3); 13 | } 14 | 15 | ul, ol, p { 16 | list-style-type: none; 17 | margin: 0; 18 | padding: 0 0 1em 0; 19 | } 20 | 21 | h1 { 22 | font-size: 137.5%; 23 | color: rgb(241,47,93); 24 | } 25 | 26 | h2 { 27 | font-size: 125%; 28 | color: rgb(241,47,93); 29 | } 30 | 31 | h3 { 32 | font-size: 100%; 33 | } 34 | 35 | a:link, a:visited { 36 | color: rgba(241,47,93,0.8); 37 | } 38 | 39 | a:hover { 40 | color: rgb(241,47,93); 41 | text-decoration: none; 42 | } 43 | 44 | .nav { 45 | list-style-type: none; 46 | padding: 0; 47 | } 48 | 49 | .nav a:link, .nav a:visited { 50 | text-decoration: none; 51 | display: block; 52 | border-top: 1px solid rgb(232,243,248); 53 | padding: 0.5em 0 0.5em 0; 54 | color: rgb(66,148,182); 55 | } 56 | 57 | .nav a:hover { 58 | background-color: rgba(232,243,248,0.3); 59 | } 60 | 61 | .box { 62 | border-top: 1px solid rgb(219,230,236); 63 | padding: 1em 0 1em 0; 64 | } 65 | 66 | .wrapper { 67 | width: 940px; 68 | margin: 0 auto 0 auto; 69 | } 70 | 71 | .header { 72 | text-align: right; 73 | padding: 40px 0 0 0; 74 | border-bottom: 8px solid rgb(59,67,68); 75 | margin-bottom: 40px; 76 | } 77 | 78 | .header h1 { 79 | font-size: 187.5%; 80 | border-bottom: 1px solid rgb(59,67,68); 81 | margin-bottom: 2px; 82 | padding-bottom: 10px; 83 | color: rgb(59,67,68); 84 | } 85 | 86 | .header h1 span { 87 | font-style: italic; 88 | color: rgb(241,47,93); 89 | } 90 | 91 | .article { 92 | float:left; 93 | width: 540px; 94 | } 95 | 96 | .aside { 97 | width: 300px; 98 | float:right; 99 | } 100 | 101 | .footer { 102 | clear: both; 103 | background-color: rgb(59,67,68); 104 | color: rgb(255,255,255); 105 | padding: 20px; 106 | 107 | /*overflow: auto;*/ 108 | } 109 | 110 | /* For modern browsers */ 111 | .cf:before, 112 | .cf:after { 113 | content:""; 114 | display:table; 115 | } 116 | 117 | .cf:after { 118 | clear:both; 119 | } 120 | 121 | /* For IE 6/7 (trigger hasLayout) */ 122 | .cf { 123 | zoom:1; 124 | } 125 | 126 | .footer .copy { 127 | float: left; 128 | width: 520px; 129 | } 130 | 131 | .footer .vcard { 132 | float: right; 133 | width: 280px; 134 | } 135 | 136 | .footer a:link, .footer a:visited { 137 | color: rgb(255,255,255); 138 | } -------------------------------------------------------------------------------- /chapter_09/2col-positioning.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgb(255,255,255); 3 | color: rgb(59,67,68); 4 | margin: 0; 5 | padding: 0; 6 | font: 1em/1.4 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | h1, h2, h3 { 10 | margin: 0; 11 | padding: 0 0 1em 0; 12 | text-shadow: 1px 1px 2px rgba(0,0,0,0.3); 13 | } 14 | 15 | ul, ol, p { 16 | margin:0; 17 | padding: 0 0 1em 0; 18 | } 19 | 20 | 21 | h1 { 22 | font-size: 137.5%; 23 | color: rgb(241,47,93); 24 | } 25 | 26 | h2 { 27 | font-size: 125%; 28 | color: rgb(241,47,93); 29 | } 30 | 31 | h3 { 32 | font-size: 100%; 33 | } 34 | 35 | a:link, a:visited { 36 | color: rgba(241,47,93,0.8); 37 | } 38 | 39 | a:hover { 40 | color: rgb(241,47,93); 41 | text-decoration: none; 42 | } 43 | 44 | .nav { 45 | list-style-type: none; 46 | padding: 0; 47 | } 48 | 49 | .nav a:link, .nav a:visited { 50 | text-decoration: none; 51 | display: block; 52 | border-top: 1px solid rgb(232,243,248); 53 | padding: 0.5em 0 0.5em 0; 54 | color: rgb(66,148,182); 55 | } 56 | 57 | .nav a:hover { 58 | background-color: rgba(232,243,248,0.3); 59 | } 60 | 61 | .box { 62 | border-top: 1px solid rgb(219,230,236); 63 | padding: 1em 0 1em 0; 64 | } 65 | 66 | .wrapper { 67 | width: 940px; 68 | margin: 0 auto 0 auto; 69 | } 70 | 71 | .header { 72 | text-align: right; 73 | padding: 40px 0 0 0; 74 | border-bottom: 8px solid rgb(59,67,68); 75 | margin-bottom: 40px; 76 | } 77 | 78 | .header h1 { 79 | font-size: 187.5%; 80 | border-bottom: 1px solid rgb(59,67,68); 81 | margin-bottom: 2px; 82 | padding-bottom: 10px; 83 | color: rgb(59,67,68); 84 | } 85 | 86 | .header h1 span { 87 | font-style: italic; 88 | color: rgb(241,47,93); 89 | } 90 | 91 | .main { 92 | position: relative; 93 | } 94 | 95 | .article { 96 | position: absolute; 97 | top: 0; 98 | left: 0; 99 | width: 540px; 100 | } 101 | 102 | .aside { 103 | width: 300px; 104 | position: absolute; 105 | top: 0; 106 | right: 0; 107 | } 108 | 109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /chapter_09/3col-float.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgb(255,255,255); 3 | color: rgb(59,67,68); 4 | margin: 0; 5 | padding: 0; 6 | font: 1em/1.4 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 7 | } 8 | 9 | h1, h2, h3 { 10 | margin: 0; 11 | padding: 0 0 1em 0; 12 | text-shadow: 1px 1px 2px rgba(0,0,0,0.3); 13 | } 14 | 15 | ul, ol, p { 16 | margin:0; 17 | padding: 0 0 1em 0; 18 | } 19 | 20 | 21 | h1 { 22 | font-size: 137.5%; 23 | color: rgb(241,47,93); 24 | } 25 | 26 | h2 { 27 | font-size: 125%; 28 | color: rgb(241,47,93); 29 | } 30 | 31 | h3 { 32 | font-size: 100%; 33 | } 34 | 35 | a:link, a:visited { 36 | color: rgba(241,47,93,0.8); 37 | } 38 | 39 | a:hover { 40 | color: rgb(241,47,93); 41 | text-decoration: none; 42 | } 43 | 44 | .wrapper { 45 | width: 940px; 46 | margin: 0 auto 0 auto; 47 | } 48 | 49 | .header { 50 | text-align: right; 51 | padding: 40px 0 0 0; 52 | border-bottom: 8px solid rgb(59,67,68); 53 | margin-bottom: 40px; 54 | } 55 | 56 | .header h1 { 57 | font-size: 187.5%; 58 | border-bottom: 1px solid rgb(59,67,68); 59 | margin-bottom: 2px; 60 | padding-bottom: 10px; 61 | color: rgb(59,67,68); 62 | } 63 | 64 | .header h1 span { 65 | font-style: italic; 66 | color: rgb(241,47,93); 67 | } 68 | 69 | .subnav { 70 | width: 220px; 71 | float: left; 72 | margin-right: 20px; 73 | } 74 | 75 | .article { 76 | float: left; 77 | width: 440px; 78 | } 79 | 80 | .aside { 81 | width: 220px; 82 | float: right; 83 | } 84 | 85 | .footer { 86 | clear: both; 87 | background-color: rgb(59,67,68); 88 | color: rgb(255,255,255); 89 | padding: 20px; 90 | overflow: auto; 91 | } 92 | 93 | .footer .copy { 94 | float: left; 95 | width: 200px; 96 | } 97 | 98 | .footer .vcard { 99 | float: right; 100 | width: 200px; 101 | } 102 | 103 | .footer a:link, .footer a:visited { 104 | color: rgb(255,255,255); 105 | } 106 | 107 | .nav { 108 | list-style-type: none; 109 | padding: 0; 110 | } 111 | 112 | .nav a:link, .nav a:visited { 113 | text-decoration: none; 114 | display: block; 115 | border-top: 1px solid rgb(232,243,248); 116 | padding: 0.5em 0 0.5em 0; 117 | color: rgb(66,148,182); 118 | } 119 | 120 | .nav a:hover { 121 | background-color: rgba(232,243,248,0.3); 122 | } 123 | 124 | .box { 125 | border-top: 1px solid rgb(219,230,236); 126 | padding: 1em 0 1em 0; 127 | } -------------------------------------------------------------------------------- /chapter_09/3col-responsive-ie-old.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .wrapper { 4 | width: 940px; 5 | } 6 | 7 | .subnav { 8 | width: 220px; 9 | float: left; 10 | margin-right: 20px; 11 | } 12 | 13 | .article { 14 | float: left; 15 | width: 440px; 16 | } 17 | 18 | .aside { 19 | width: 220px; 20 | float: right; 21 | 22 | } 23 | 24 | .footer .copy { 25 | float: left; 26 | width: 220px; 27 | } 28 | 29 | .footer .vcard { 30 | float: right; 31 | width: 220px; 32 | } -------------------------------------------------------------------------------- /chapter_09/3col-responsive-print.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgb(255,255,255); 3 | color: rgb(0,0,0); 4 | padding: 20px; 5 | font: 1em/1.4 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 6 | } 7 | 8 | h1, h2, h3 { 9 | margin: 0; 10 | padding: 0 0 1em 0; 11 | } 12 | 13 | p { 14 | margin:0; 15 | padding: 0 0 1em 0; 16 | } 17 | 18 | ul, ol { 19 | margin:0; 20 | padding: 0 0 1em 1em; 21 | } 22 | 23 | 24 | h1 { 25 | font-size: 137.5%; 26 | } 27 | 28 | h2 { 29 | font-size: 125%; 30 | } 31 | 32 | h3 { 33 | font-size: 100%; 34 | } 35 | 36 | a:link, a:visited { 37 | color: rgb(0,0,0); 38 | } 39 | 40 | .header { 41 | text-align: right; 42 | padding: 20px 0 0 0; 43 | border-bottom: 8px solid rgb(0,0,0); 44 | margin-bottom: 40px; 45 | } 46 | 47 | .header h1 { 48 | font-size: 187.5%; 49 | padding-bottom: 10px; 50 | } 51 | 52 | .header .inner { 53 | border-bottom: 1px solid rgb(0,0,0); 54 | margin-bottom: 2px; 55 | } 56 | 57 | .header h1 span { 58 | font-style: italic; 59 | } 60 | 61 | .footer { 62 | border-top: 1px solid rgb(0,0,0); 63 | padding: 20px 0 20px 0; 64 | overflow: auto; 65 | } 66 | 67 | .wrapper { 68 | width: 90%; 69 | margin: 0 auto 0 auto; 70 | } 71 | 72 | .subnav { 73 | display: none; 74 | } 75 | 76 | .aside { 77 | display: none; 78 | } 79 | 80 | .footer .vcard { 81 | display: none; 82 | } -------------------------------------------------------------------------------- /chapter_09/gallery/eight.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_09/gallery/eight.jpg -------------------------------------------------------------------------------- /chapter_09/gallery/five.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_09/gallery/five.jpg -------------------------------------------------------------------------------- /chapter_09/gallery/four.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_09/gallery/four.jpg -------------------------------------------------------------------------------- /chapter_09/gallery/imgSizer.js: -------------------------------------------------------------------------------- 1 | var imgSizer = { 2 | Config : { 3 | imgCache : [] 4 | ,spacer : "/path/to/your/spacer.gif" 5 | } 6 | 7 | ,collate : function(aScope) { 8 | var isOldIE = (document.all && !window.opera && !window.XDomainRequest) ? 1 : 0; 9 | if (isOldIE && document.getElementsByTagName) { 10 | var c = imgSizer; 11 | var imgCache = c.Config.imgCache; 12 | 13 | var images = (aScope && aScope.length) ? aScope : document.getElementsByTagName("img"); 14 | for (var i = 0; i < images.length; i++) { 15 | images[i].origWidth = images[i].offsetWidth; 16 | images[i].origHeight = images[i].offsetHeight; 17 | 18 | imgCache.push(images[i]); 19 | c.ieAlpha(images[i]); 20 | images[i].style.width = "100%"; 21 | } 22 | 23 | if (imgCache.length) { 24 | c.resize(function() { 25 | for (var i = 0; i < imgCache.length; i++) { 26 | var ratio = (imgCache[i].offsetWidth / imgCache[i].origWidth); 27 | imgCache[i].style.height = (imgCache[i].origHeight * ratio) + "px"; 28 | } 29 | }); 30 | } 31 | } 32 | } 33 | 34 | ,ieAlpha : function(img) { 35 | var c = imgSizer; 36 | if (img.oldSrc) { 37 | img.src = img.oldSrc; 38 | } 39 | var src = img.src; 40 | img.style.width = img.offsetWidth + "px"; 41 | img.style.height = img.offsetHeight + "px"; 42 | img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')" 43 | img.oldSrc = src; 44 | img.src = c.Config.spacer; 45 | } 46 | 47 | // Ghettomodified version of Simon Willison's addLoadEvent() -- http://simonwillison.net/2004/May/26/addLoadEvent/ 48 | ,resize : function(func) { 49 | var oldonresize = window.onresize; 50 | if (typeof window.onresize != 'function') { 51 | window.onresize = func; 52 | } else { 53 | window.onresize = function() { 54 | if (oldonresize) { 55 | oldonresize(); 56 | } 57 | func(); 58 | } 59 | } 60 | } 61 | } -------------------------------------------------------------------------------- /chapter_09/gallery/main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_09/gallery/main.jpg -------------------------------------------------------------------------------- /chapter_09/gallery/nine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_09/gallery/nine.jpg -------------------------------------------------------------------------------- /chapter_09/gallery/one.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_09/gallery/one.jpg -------------------------------------------------------------------------------- /chapter_09/gallery/seven.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_09/gallery/seven.jpg -------------------------------------------------------------------------------- /chapter_09/gallery/six.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_09/gallery/six.jpg -------------------------------------------------------------------------------- /chapter_09/gallery/ten.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_09/gallery/ten.jpg -------------------------------------------------------------------------------- /chapter_09/gallery/three.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_09/gallery/three.jpg -------------------------------------------------------------------------------- /chapter_09/gallery/two.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/CSSANT4/353fd0af0e3332e2796934841c9bb490cbc7d068/chapter_09/gallery/two.jpg -------------------------------------------------------------------------------- /chapter_09/ios-orientationchange-fix.js: -------------------------------------------------------------------------------- 1 | /*! A fix for the iOS orientationchange zoom bug. 2 | Script by @scottjehl, rebound by @wilto. 3 | MIT License. 4 | */ 5 | (function(w){ 6 | var doc = w.document; 7 | 8 | if( !doc.querySelector ){ return; } 9 | 10 | var meta = doc.querySelector( "meta[name=viewport]" ), 11 | initialContent = meta && meta.getAttribute( "content" ), 12 | disabledZoom = initialContent + ",maximum-scale=1", 13 | enabledZoom = initialContent + ",maximum-scale=10", 14 | enabled = true, 15 | x, y, z, aig; 16 | 17 | if( !meta ){ return; } 18 | 19 | function restoreZoom(){ 20 | meta.setAttribute( "content", enabledZoom ); 21 | enabled = true; 22 | } 23 | 24 | function disableZoom(){ 25 | meta.setAttribute( "content", disabledZoom ); 26 | enabled = false; 27 | } 28 | 29 | function checkTilt( e ){ 30 | aig = e.accelerationIncludingGravity; 31 | x = Math.abs( aig.x ); 32 | y = Math.abs( aig.y ); 33 | z = Math.abs( aig.z ); 34 | 35 | // If portrait orientation and in one of the danger zones 36 | if( !w.orientation && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){ 37 | if( enabled ){ 38 | disableZoom(); 39 | } 40 | } 41 | else if( !enabled ){ 42 | restoreZoom(); 43 | } 44 | } 45 | 46 | w.addEventListener( "orientationchange", restoreZoom, false ); 47 | w.addEventListener( "devicemotion", checkTilt, false ); 48 | 49 | })( this ); -------------------------------------------------------------------------------- /chapter_09/responsive-1180.css: -------------------------------------------------------------------------------- 1 | /* 2 | Calculating from width 1180px 3 | Grid 15 columns at 60px, gutter 20px 4 | 5 | gutter = 20px | 1.69491% 6 | 1 = 60px | 5.08474% 7 | 2 = 140px | 11.8644% 8 | 3 = 220px | 18.64406% 9 | 4 = 300px | 25.42372% 10 | 5 = 380px | 32.20338% 11 | 6 = 460px | 38.98305% 12 | 7 = 540px | 45.76271% 13 | 8 = 620px | 52.54237% 14 | 9 = 700px | 59.32203% 15 | 10 = 780px | 66.10169% 16 | 11 = 860px | 72.88135% 17 | 12 = 940px | 79.66101% 18 | 13 = 1020 | 86.44067% 19 | 14 = 1100 | 93.22033% 20 | 15 = 1180 | 100% 21 | 22 | */ 23 | 24 | .wrapper { 25 | max-width: 1180px; 26 | } 27 | 28 | .feature { 29 | float: left; 30 | width: 79.66101%; 31 | } 32 | 33 | .intro { 34 | float: right; 35 | width: 18.64406%; 36 | } 37 | 38 | .gallery li:nth-child(n) { 39 | width: 18.64406%; 40 | margin: 0 0 1.69491% 1.69491%; 41 | } 42 | 43 | .gallery li:nth-child(5n+1) { 44 | margin-left: 0; 45 | } -------------------------------------------------------------------------------- /chapter_09/responsive-410.css: -------------------------------------------------------------------------------- 1 | /* 2 | Calculating from width 410px 3 | Grid 6 columns at 60px, gutter 10px 4 | 5 | gutter = 10px | 2.43902% 6 | 1 = 60px | 14.63414% 7 | 2 = 130px | 31.70731% 8 | 3 = 200px | 48.78048% 9 | 4 = 270px | 65.85365% 10 | 5 = 340px | 82.92682% 11 | 6 = 410px | 100% 12 | 13 | */ 14 | 15 | .gallery { 16 | overflow: hidden; 17 | clear: both; 18 | } 19 | 20 | .gallery li { 21 | float: left; 22 | width: 48.78048%; 23 | margin: 0 0 2.43902% 2.43902%; 24 | } 25 | 26 | .gallery li:nth-child(2n+1) { 27 | margin-left: 0; 28 | } -------------------------------------------------------------------------------- /chapter_09/responsive-700.css: -------------------------------------------------------------------------------- 1 | /* 2 | Calculating from width 700px 3 | Grid 9 columns at 60px, gutter 20px 4 | 5 | gutter = 20px | 2.85714% 6 | 1 = 60px | 8.57142% 7 | 2 = 140px | 20% 8 | 3 = 220px | 31.42857% 9 | 4 = 300px | 42.85714% 10 | 5 = 380px | 54.28571% 11 | 6 = 460px | 65.71428% 12 | 7 = 540px | 77.14285% 13 | 8 = 620px | 88.57142% 14 | 9 = 700px | 100% 15 | 16 | */ 17 | 18 | .header .nav { 19 | position: absolute; 20 | top: 20px; 21 | right: 0; 22 | list-style-type: none; 23 | } 24 | 25 | .header h1 { 26 | padding: 20px 0 20px 0; 27 | font-size: 175%; 28 | } 29 | 30 | .header .nav li { 31 | font-size: 175%; 32 | } 33 | 34 | .gallery li:nth-child(n) { 35 | width: 31.42857%; 36 | margin: 0 0 2.85714% 2.85714%; 37 | } 38 | 39 | .gallery li:nth-child(3n+1) { 40 | margin-left: 0; 41 | } -------------------------------------------------------------------------------- /chapter_09/responsive-940.css: -------------------------------------------------------------------------------- 1 | /* 2 | Calculating from width 940px 3 | Grid 12 columns at 60px, gutter 20px 4 | 5 | gutter = 20px | 2.12765% 6 | 1 = 60px | 6.38297% 7 | 2 = 140px | 14.89361% 8 | 3 = 220px | 23.40425% 9 | 4 = 300px | 31.91489% 10 | 5 = 380px | 40.42553% 11 | 6 = 460px | 48.93617% 12 | 7 = 540px | 57.4468% 13 | 8 = 620px | 65.95744% 14 | 9 = 700px | 74.46808% 15 | 10 = 780px | 82.97872% 16 | 11 = 860px | 91.48936% 17 | 12 = 940px | 100% 18 | 19 | */ 20 | 21 | .gallery { 22 | overflow: hidden; 23 | clear: both; 24 | } 25 | 26 | .gallery li:nth-child(n) { 27 | width: 23.40425%; 28 | margin: 0 0 2.12765% 2.12765%; 29 | } 30 | 31 | .gallery li:nth-child(4n+1) { 32 | margin-left: 0; 33 | } -------------------------------------------------------------------------------- /chapter_09/responsive-basic.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font: 1em/1.4 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; 5 | background-color: rgb(255,255,255); 6 | color: rgb(59,67,68); 7 | } 8 | 9 | .wrapper { 10 | width: 90%; 11 | margin: 0 auto 0 auto; 12 | } 13 | 14 | img { 15 | max-width: 100%; 16 | display: block; 17 | } 18 | 19 | h1,h2,h3 { 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | h2 { 25 | font-size: 125%; 26 | padding: 0 0 1em 0; 27 | } 28 | 29 | p { 30 | margin: 0; 31 | padding: 0 0 1em 0; 32 | } 33 | 34 | ul { 35 | margin: 0; 36 | padding: 0; 37 | } 38 | 39 | a:link, a:visited { 40 | color: rgb(122,106,83); 41 | } 42 | 43 | .header { 44 | background-color: rgb(59,67,68); 45 | color: rgb(255,255,255); 46 | border-bottom: 1px solid rgb(0,0,0); 47 | margin-bottom: 1em; 48 | } 49 | 50 | .header .wrapper { 51 | position: relative; 52 | } 53 | 54 | .header h1 { 55 | display: inline-block; 56 | padding: 1em 0 0.3em 0; 57 | font-size: 125%; 58 | font-weight: normal; 59 | text-shadow: 1px 1px 2px rgba(0,0,0,0.7); 60 | } 61 | 62 | .header .nav { 63 | padding-bottom: 1em; 64 | } 65 | 66 | .header .nav li { 67 | display: inline; 68 | font-size: 125%; 69 | color: rgb(255,255,255); 70 | padding: 0 0.5em 0 0; 71 | text-shadow: 1px 1px 2px rgba(0,0,0,0.7); 72 | } 73 | 74 | .header .nav a:link, .header .nav a:visited { 75 | text-decoration: none; 76 | color: rgb(255,255,255); 77 | } 78 | 79 | .feature { 80 | background-color: rgb(59,67,68); 81 | color: rgb(255,255,255); 82 | margin: 0 0 1em 0; 83 | } 84 | 85 | .caption { 86 | padding: 0.3em; 87 | font-size: 87.5%; 88 | text-shadow: 1px 1px 2px rgba(0,0,0,0.7); 89 | } 90 | 91 | .gallery ul { 92 | list-style-type: none; 93 | margin: 0 0 1em 0; 94 | padding: 0; 95 | } 96 | 97 | .footer { 98 | border-top: 1px solid rgb(59,67,68); 99 | font-size: 87.5%; 100 | padding: 1em 0 1em 0; 101 | } -------------------------------------------------------------------------------- /chapter_09/responsive-ie-old.css: -------------------------------------------------------------------------------- 1 | /* 2 | we deal with crusty browsers by setting the width to 940 pixels 3 | 4 | */ 5 | 6 | .wrapper { 7 | width: 940px; 8 | } 9 | 10 | .header .nav { 11 | position: absolute; 12 | top: 20px; 13 | right: 0; 14 | list-style-type: none; 15 | } 16 | 17 | .header h1 { 18 | padding: 20px 0 20px 0; 19 | font-size: 175%; 20 | } 21 | 22 | .header .nav li { 23 | font-size: 175%; 24 | } 25 | 26 | .feature img { 27 | width: 940px; 28 | } 29 | 30 | .gallery { 31 | overflow:hidden; 32 | clear: both; 33 | width: 960px; 34 | margin-left: -20px; 35 | } 36 | 37 | .gallery li { 38 | float: left; 39 | width: 220px; 40 | margin: 0 0 20px 20px; 41 | } 42 | 43 | .gallery li img { 44 | display: block; 45 | height: 220px; 46 | width: 220px; 47 | } --------------------------------------------------------------------------------