Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Cascading Style Sheets External Style rules for HTML Standardize organization web sites by sharing style sheets Box Formatting Model - for HTML Elements Absolute & Relative Positioning of Elements Page Layout using positioning - instead of tables Powerful when combined with Javascript Cross-Reference Style Sheets reference to style sheet <html> <head> <style type="text/css">@import "myCS01.css"; </style> </head> <body> Hello style rule for body element </body> </html> myCS01.css body { background-color: #bbbbbb ; font-family: verdana ; } style sheet XML CSS DTD Link > CSS-XML-Examples > CSS-Examples Standardize "Look" of multiple web sites Style sheet Web site 1 Web site 3 Web site 3 called 'Cascading' because of how priority rules resolve conflicts when multiple rules apply to an element. fonts in order of preference 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 Box Formatting Model EVERY HTML element Buffer space beyond border margin has width & color - solid, dashed border padding HTML content http://www.w3.org/TR/REC-CSS1#formatting-model Atmospheric space around HTML content space-border-space <td> element cell spacing margin border border padding cell padding HTML content cell contents Box Formatting Model myCS01.css Style rule for paragraph p { font-size: 11px; line-height: 20px; margin: 20px 20px 20px 20px; padding: 0px; border: 3px dashed #333; } Top-Right-Bottom-Left T RI B LE (clockwise) Types of Style Rules NO quotes! declaration Simple style rules - h1 { color: blue } Grouped elements h1, h2, h3 { color: blue } Grouped declarations h1 { color: blue ; font-size: 12pt ; } Versus rules for HTML Elements h1 { color: blue } h1, h2, h3 { color: blue } Named rules CSS Rule ID selector #bluish { HTML reference } <p id=bluish> --- </p> These can be applied to any HTML element – tables, forms, etc !c CSS Rule Class selector HTML reference . h1 bluish { color: blue } .bluish { color: blue } CSS Rule ID selector #bluish { <h1 class=bluish> --- </h1> <p class=bluish> --- </p> HTML reference } <p id=bluish> --- </p> Absolute Positioning parent absolute container top #Immobile { left position: top: left: width: absolute; 150px; 50px; 200px; line-height: 17px; background-color: #cba; font: 11px/20px verdana, arial padding: 10px; border: 1px dashed #999; } Anchors element on page width Html Element Relative Positioning Body CSS Rule Parent Html #Content-right { margin: 50px 30px 50px 300px ; Top padding: border: line-height: 10px ; 1px dashed #999 ; 17px ; Html content Left background-color: #eee; Right } Bottom Embedded in Parent Html Element /* Top-Right-Bottom-Left margin box T RI B LE */ test00.html & css00.css Experiment with these. <body> margin test00.html myCS00.css Relative to body Absolute & Relative Layout Control <p> margin <div id='Immobile> ' position absolute <pre id="Content-right"> <pre id="Content-left"> <table id="Content-right"> <div id='Menu'> position absolute <form id="Content-left"> <select id="Content-right"> <img id="Content-right"> 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; } <tr><td>hello</td><td>hello</td><td>hello</td></tr> <tr><td>hello</td><td>hello</td><td>hello</td></tr> </table> <form id="Content-left" > <input type="text" value= "hello" /> <input type="button" value= "bye " /> </form> <div id="Menu">List of Links <br> <a href="a.html"> nowhere to go </a><br> <a href="a.html"> fake link </a><br> <a href="a.html"> another deadend </a><br> </div> <select id="Content-right" name="menu" onchange="window.location = menu.value" > <option value="Menu04.html" Site </option> > Choose an HTML Reference <option value="http://www.transaction.net/web/tutor/cmdtable.html"> Table of HTML Commands and Attributes </option> <option value="http://www.htmlreference.com/" </option> > HTML reference <option value="http://www.w3schools.com/tags//tag_img.asp" reference </option> <option value="http://www.htmlreference.com/" reference </option> > w3schools HTML > w3schools DOM <option value="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/refer ence/properties/fontsize.asp"> Style Properties </option> </select> <img id="Content-right" src="California.gif" /> </body> References to CSS Links XML CSS menu > CSS-XML-Topics > CSS-Examples/ http://www.w3.org/TR/REC-CSS1#formatting-model especially Box Formatting model Web Standards Organization http://bluerobot.com/web/layouts/ http://justinsomnia.org/notes/css/CSS_notes.html examples adapted from here http://www.html-faq.com/faq.php