1. External Style rules for HTML Standardize organization web sites Page Layout using positioning Absolute & Relative Positioning of Elements Cascading Style Sheets by sharing style sheets - instead of tables Box Formatting Model - for HTML Elements Powerful when combined with Javascript

2. XML CSS DTD Link > CSS-XML-Examples > CSS-ExamplesCSS-XML-Examples Hello @import "myCS01.css"; body { } background-color: #bbbbbb ; font-family: verdana ; reference to style sheet myCS01.css style rule for body element Cross-Reference Style Sheets style sheet

3. Style sheet Web site 1Web site 3 Standardize "Look" of multiple web sites called 'Cascading' because of how priority rules resolve conflicts when multiple rules apply to an element.

4. body { } background-color: #bbbbbb; font-family: verdana, arial, helvetica, sans-serif ; myCS01.css h1 { margin: 30px; padding: 50px; border: 3px dashed #333; } uses Box Format Model For Html elements fonts in order of preference

5. margin border padding HTML content Atmospheric space around HTML content has width & color - solid, dashed Buffer space beyond border Box Formatting Model EVERY HTML element http://www. w3.org/TR/REC-CSS1#formatting-model space-border-space

6. margin border padding HTML content cell padding border cell spacing element cell contents

7. myCS01.css Style rule for paragraph p { } Top-Right-Bottom-Left T RI B LE (clockwise) border: 3px dashed #333; font-size: 11px; line-height: 20px; margin: 20px 20px 20px 20px; padding: 0px; Box Formatting Model

8. Simple style rules - Grouped elements Types of Style Rules h1 { color: blue } declaration h1, h2, h3 { color: blue } Grouped declarations h1 { color: blue ; font-size: 12pt ; } NO quotes!

9. ID selector # bluish { } --- CSS Rule HTML reference Versus rules for HTML Elements h1 { color: blue } h1, h2, h3 { color: blue } Named rules These can be applied to any HTML element – tables, forms, etc !c

10. Class selector ID selector h1. bluish { color: blue }. bluish { color: blue } --- # bluish { } --- CSS RuleHTML reference CSS Rule HTML reference

11. #Immobile { } Absolute Positioning parent absolute container top width left position: absolute; top: 150px; left: 50px; width: 200px; line-height: 17px; background-color: #cba; font: 11px/20px verdana, arial padding: 10px; border: 1px dashed #999; Anchors element on page Html Element

12. #Content-right { } Relative Positioning /* Top-Right-Bottom-Left margin box T RI B LE */ margin: 50px 30px 50px 300px ; background-color: #eee; line-height: 17px ; border: 1px dashed #999 ; padding: 10px ; Html content Parent Html Top Right Bottom Left Body test00.html & css00.css Experiment with these. Style rule Embedded in Parent Html Element CSS Rule

13. ' position absolute position absolute test00.html myCS00.css Absolute & Relative Layout Control Relative to body margin

15. body { margin: 10px; padding:0px; font-family:verdana, arial, helvetica, sans-serif; border:10px solid #111; background-color:#bbb; } p { font:11px/20px verdana, arial, helvetica, sans-serif; margin:20px 20px 20px 20px; padding:0px; border:1px dashed #999; background-color:#eee; } /* same as: p { font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; line-height: 20px; margin:20px 20px 20px 20px; padding:0px; } */ #Content-right { margin: 50px 30px 50px 300px; padding:10px; border:1px dashed #999; background-color:#eee; line-height:17px; } /* Top-Right-Bottom-Left constraints on margin box T-RI-B-LE */ #Content-left { margin: 20px 350px 70px 20px; padding:10px; border:1px dashed #999; background-color:#dce; line-height:17px; } #Immobile { position:absolute; top:150px; left:50px; bottom 220px; font:11px/20px verdana, arial, helvetica, sans-serif; padding:10px; width:200px; background-color:#cba; border:1px dashed #999; line-height:17px; } #Menu { position:absolute; top:650px; left:50px; width:172px; padding:10px; font:11px/20px verdana, arial, helvetica, sans-serif; background-color:#eba; border:1px dashed #999; line-height:17px; }

16. @import "myCS00.css"; Hello Hello. I hope you are having a nice day. THE SUN RISING. by John Donne BUSY old fool, unruly Sun, Why dost thou thus, Through windows, and through curtains, call on us ? Must to thy motions lovers' seasons run ? Saucy pedantic wretch, go chide Late school-boys and sour prentices,. Thy beams so reverend, and strong Why shouldst thou think ? I could eclipse and cloud them with a wink, But that I would not lose her sight so long. If her eyes have not blinded thine, Look, and to-morrow late tell me, See what the Immobile style does. #Immobile { position:absolute; top:150px; left:0px; padding:10px; width:200px; background-color:#cba; border:1px dashed #999; line-height:17px; } hello hello hello List of Links nowhere to go fake link another deadend Choose an HTML Reference Site Table of HTML Commands and Attributes HTML reference w3schools HTML reference w3schools DOM reference Style Properties

17. XML CSS menu > CSS-XML-TopicsCSS-XML-Topics http://www.w3.org/TR/REC-CSS1#formatting-model http://www.html-faq.com/faq.php especially Box Formatting model http://justinsomnia.org/notes/css/CSS_notes.html References to CSS Links > CSS-Examples/CSS-Examples/ Web Standards Organization http://bluerobot.com/web/layouts/ examples adapted from here