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

XML CSS DTD Link > CSS-XML-Examples > CSS-ExamplesCSS-XML-Examples "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

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.

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

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 w3.org/TR/REC-CSS1#formatting-model space-border-space

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

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

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!

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

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

#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

#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

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

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

@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

XML CSS menu > CSS-XML-TopicsCSS-XML-Topics especially Box Formatting model References to CSS Links > CSS-Examples/CSS-Examples/ Web Standards Organization examples adapted from here