1. External style rules for HTML Organization web sites can share a style sheet Layout of pages using positioning Absolute & Relative Positioning Cascading Style Sheets - standardizing appearance - replacing tables for layout HTML Elements' Box Formatting Model

2. XML and CSS menu > CSS-XML-Examples > CSS-Examples/CSS-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 'Cascading' because of how priority rules are used to resolve conflicts when multiple style rules apply to the same 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 to understand effects - experiment with values Another Style Rule 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 Applies to EVERY HTML element http://www.w3.org/TR/REC-CSS1#formatting-modelspace-border-space

6. body { } background-color: #bbb ; font-family: verdana, arial, helvetica, sans-serif ; myCS01.css p { } Top-Right-Bottom-Left T RI B LE (clockwise) Experiment - font-size line-height margin padding border: 3px dashed #333; font-size: 11px; line-height: 20px; margin: 20px 20px 20px 20px; padding: 0px; Another rule Box Formatting Model

7. Simple style rules - Grouped elements Class selector Types of Style Rules h1 { color: blue } declarationselector h1, h2, h3 { color: blue } Grouped declarationsh1 { color: blue ; font-size: 12pt ; } ID selector h1.bluish { color: blue }. bluish { color: blue } --- # bluish { } --- CSS Rule HTML reference These can be applied to any HTML element – tables, forms, etc ! CSS Rule HTML reference

8. Cross Reference ID selector # bluish { } --- CSS Rule HTML reference

9. with respect to nearest absolute parent container eg #Immobile { } Absolute Positioning closest absolute Html container top width left position: absolute; top: 150px; left: 50px; width: 200px; background-color: #cba; font: 11px/20px verdana, arial, helvetica, sans-serif; padding: 10px; border: 1px dashed #999; line-height: 17px; Anchors the element on Html page Html elt

10. #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

11. ' position absolute position absolute test00.html myCS00.html - Code next slides Absolute Relative Layout Control Relative to body margin

13. 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; }

14. @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

15. 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