CSS TUTORIALS DUE: CSS THE MISSING MANUAL PAGE 111 THE CASCADE IN ACTION CSS THE MISSING MANUAL PAGE 172 TEXT FORMATTING THE MISSING MANUAL PAGE 216 MARGINS BORDERS AND BACKGROUND
Moaied Alharbi
CMTC275_Tutorials_7_8_9_10.zipCMTC275_Tutorials_7_8_9_10/.DS_Store
__MACOSX/CMTC275_Tutorials_7_8_9_10/._.DS_Store
CMTC275_Tutorials_7_8_9_10/07/images/banner.png
__MACOSX/CMTC275_Tutorials_7_8_9_10/07/images/._banner.png
CMTC275_Tutorials_7_8_9_10/07/images/bg_page.png
__MACOSX/CMTC275_Tutorials_7_8_9_10/07/images/._bg_page.png
__MACOSX/CMTC275_Tutorials_7_8_9_10/07/._images
CMTC275_Tutorials_7_8_9_10/07/index.html
The Amazing World of CSS
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
NOTE
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.
Who Knew CSS Had Such Power?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.
Not Me!
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Me Neither!
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
Copyright 2015, The Lorem Ipsum Corporation
__MACOSX/CMTC275_Tutorials_7_8_9_10/07/._index.html
CMTC275_Tutorials_7_8_9_10/07/main.css
/* reset browser styles */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1.2; } ol { padding-left: 1.4em; list-style: decimal; } ul { padding-left: 1.4em; list-style: square; } table { border-collapse: collapse; border-spacing: 0; } /* end reset browser styles */
__MACOSX/CMTC275_Tutorials_7_8_9_10/07/._main.css
__MACOSX/CMTC275_Tutorials_7_8_9_10/._07
CMTC275_Tutorials_7_8_9_10/08/01_image_ex/image.html
CosmoFarmer’s Guide to Apartment Lawn Maintenance
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
Copyright 2015, CosmoFarmer.com
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/01_image_ex/._image.html
CMTC275_Tutorials_7_8_9_10/08/01_image_ex/styles.css
/* reset browser styles */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1.2; } ol { padding-left: 1.4em; list-style: decimal; } ul { padding-left: 1.4em; list-style: square; } table { border-collapse: collapse; border-spacing: 0; } /* end reset browser styles */ body { font-size: 62.5%; } .content { margin: 15px; border: 1px dashed #999; border-bottom: none; } h1 { font: normal 2.4em Verdana, Arial, Helvetica, sans-serif; border-bottom: 1px dashed #999; padding: 5px 0 5px 8px; color: #14556b; } p { font: 1.6em/160% Georgia, "Times New Roman", Times, serif; margin: 10px 8px; } .copyright { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; text-transform: uppercase; color: #666666; margin: 0px; padding-left: 8px; border-top: 1px dashed #999; clear: both; } /* add your styles below here */
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/01_image_ex/._styles.css
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/._01_image_ex
CMTC275_Tutorials_7_8_9_10/08/02_gallery_ex/gallery.html
CosmoFarmer.com’s Indoor Grass Photo Gallery
A selection of indoor sod options: reviewed and tested by CosmoFarmer.com in our state-of-the-art “Apartment Laboratory” on 5th Avenue.
Copyright 2015, CosmoFarmer.com
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/02_gallery_ex/._gallery.html
CMTC275_Tutorials_7_8_9_10/08/02_gallery_ex/styles.css
/* reset browser styles */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1.2; } ol { padding-left: 1.4em; list-style: decimal; } ul { padding-left: 1.4em; list-style: square; } table { border-collapse: collapse; border-spacing: 0; } /* end reset browser styles */ body { font-size: 62.5%; } .content { margin-left: 15px; margin-top: 15px; border: 1px dashed #999; border-right: none; border-bottom: none; } p.caption { font-size: 1.3em; line-height: normal; margin-bottom: 15px; } .gallery .figure p { font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; text-align: center; line-height: normal; } h1 { font: normal 2.4em Verdana, Arial, Helvetica, sans-serif; margin: 0; border-bottom: 1px dashed #999; padding: 5px 0 5px 8px; color: #14556b; } p { font: 1.6em/160% Georgia, "Times New Roman", Times, serif; margin: 10px 8px; } .copyright { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; text-transform: uppercase; color: #666666; margin-left: 0px; padding-left: 8px; border-top: 1px dashed #999; clear: both; }
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/02_gallery_ex/._styles.css
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/._02_gallery_ex
CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/bg_images.html
CSS: The Missing Manual
Lorem Ipsum Dolor Sat
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Nisi Ut Aliquid
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Announcements
- Lorem Ipsum Dolor Sat
- Quis nostrum exercitationem ullam
- Eius modi tempora incidunt
- Quis autem vel eum iure reprehenderit
- Sed quia non numquam eius modi tempora incidu
- Nemo enim ipsam voluptate
Copyright 2015, Lorem Ipsum Corporation
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/._bg_images.html
CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/bg_main.jpg
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/._bg_main.jpg
CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/bg_page.png
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/._bg_page.png
CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/bullet.png
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/._bullet.png
CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/scroll_bottom.jpg
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/._scroll_bottom.jpg
CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/scroll_middle.jpg
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/._scroll_middle.jpg
CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/scroll_top.jpg
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/._scroll_top.jpg
CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/underline.png
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/images/._underline.png
__MACOSX/CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/._images
CMTC275_Tutorials_7_8_9_10/08/03_bg_ex/styles.css
/* reset browser styles */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1.2; } ol { padding-left: 1.4em; list-style: decimal; } ul { padding-left: 1.4em; list-style: square; } table { border-collapse: collapse; border-spacing: 0; } /* end reset browser styles */ .wrapper { width: 960px; margin-right: auto; margin-left: auto; overflow: hidden; /* contain float */ } .main { float: right; width: 565px; margin-right: 15px; padding-top: 25px; } .announcement { margin-right: 600px; margin-left: 20px; } .copyright { clear: both; font: bold 12px Tahoma, Geneva, sans-serif; color: #65747E; padding: 5px; margin: 0 15px; border: 1px dotted #98AFBE; border-left: none; border-right: none; } .banner h1 { font: normal 48px Georgia, "Times New Roman", Times, serif; text-align: right; color: #272D32; } .main h2 { font: 24px Tahoma, Geneva, sans-serif; margin-bottom: 15px; font-family: Tahoma, Geneva, sans-serif; } .main p { font: 14px Tahoma, Geneva, sans-serif; color: #323A3F; margin-bottom: 20px; font-family: Tahoma, Geneva, sans-serif; } .announcement h2 { font: italic bold normal 20px Georgia, "Times New Roman", Times, serif; text-align: center; color: #323A3F; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; } .announcement ul { font: 14px Tahoma, Geneva, sans-serif; } /* add your styles here */
