190 likes | 337 Views
Cascade Style Sheet Demo. Cascading Style Sheets . Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.
E N D
Cascading Style Sheets • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. • A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.
Selector Examples • All elements of a specific type: • H1 { color: blue } • ID as a selector: with a preceding '#': • HTML: <div id="content"> • Style: #content { width: 450px; margin: 0 auto; padding: 15px; background: white; border: 2px solid navy; }
Class As Selector • Example 1: • HTML: <h1 class="center">Center-aligned heading</h1> • Style: with a preceding “.” .center{ text-align:center; } • Example 2: For a specific element • HTML: <ul class="nav"> • Style: ul.nav { list-style-type: none; margin-left: 0; padding-left: 0; }
Pseudo Class Selector:pseudo-classes are used to add special effects to some selectors. For example, change color when mouse is over the element, a:hover {color:#FF00FF;} • table:hover{color:red;} • td:hover {color:blue;} • Others: http://www.w3schools.com/css/css_pseudo_classes.asp
CSS MIME Type • Multipurpose Internet Mail Extensions (MIME) is an Internet standard of content type system. • CSS MIME type: • text/css • Example: referencing a CSS file using the <link> element inside the head section <link rel="stylesheet" type="text/css" href="main.css" />
HTML Code <body> <div id="content"> <h1>Product Discount Calculator</h1> <form action="display_discount.php" method="post"> <div id="data"> <label>Product Description:</label> <input type="text" name="product_description"/><br /> <label>List Price:</label> <input type="text" name="list_price"/><br /> <label>Discount Percent:</label> <input type="text" name="discount_percent"/>%<br /> </div> <div id="buttons"> <label> </label> <input type="submit" value="Calculate Discount" /><br /> </div> </form> </div> </body>
body { font-family: Arial, Helvetica, sans-serif; margin: 10px; padding: 0; } #content { width: 450px; margin: 0 auto; padding: 15px; background: white; border: 2px solid navy; } h1 { color: navy; } label { width: 10em; padding-right: 1em; float: left; } #data input { float: left; width: 15em; margin-bottom: .5em; } #buttons input { float: left; margin-bottom: .5em; } br { clear: left; }
HTML Element Object Properties:http://www.w3schools.com/jsref/dom_obj_all.asp • className property • style property • Assuming we have two classes: • .evenColor {color:red;} • .oddColor {color:black;} • Example of assigning className value dynamically using code. var row = table.insertRow(rowCount); if(count % 2 == 0){ row.className= "evenColor"; } else{ row.className = "oddColor"; } Example of assigning style property using code: varboxFV=document.getElementById('FV'); fv=myPV*Math.pow(1+myRate,myYear); if (fv>1000) boxFV.style.backgroundColor = "red"; else boxFV.style.backgroundColor = "green";
HTML Code <body> <div> <p>Loan Affordability Analysis</p> <form name="pmtForm"> <p>Enter Loan: <input type="text" id="Loan" name="Loan" value="" /><br><br> <p>Enter Rate: <input type="text" id="Rate" name="Rate" value="" /><br><br> <p>Enter Term: <input type="text" id="Term" name="Term" value="" /><br><br> <p>Enter Affordable payment: <input type="text" id="Afford" name="Afford" value="" /><br><br> <p>Payment is: <input type="text" id="Pmt" name="Pmt" value="" /><br><br> <input type="button" value="Compute Payment" name="btnCompute" onclick="computePmt()" /> </form> </div> </body>
computePmt() <script> function computePmt(){ Loan=parseFloat(document.getElementById("Loan").value); Rate=parseFloat(document.getElementById("Rate").value); Term=parseFloat(document.getElementById("Term").value); Afford=parseFloat(document.getElementById("Afford").value); Pmt=(Loan*Rate/12)/(1-Math.pow(1+Rate/12,-12*Term)); varboxPmt=document.getElementById("Pmt"); if (Pmt>Afford) boxPmt.style.backgroundColor="red"; else boxPmt.style.backgroundColor="green"; boxPmt.value=Pmt.toFixed(2); } </script>
CSS File div { width: 450px; margin: 0 auto; padding: 15px; background: aqua; border: 2px solid navy; } p {font-weight:bold;}
<head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="rowcss.css" /> <script> function showTable(){ value=eval(document.depForm.pValue.value); life=eval(document.depForm.pLife.value); depreciation = value / life; var table = document.getElementById('depTable'); vartotalDepreciation=0; for(vari = table.rows.length - 1; i > 0; i--) { table.deleteRow(i); } for (count = 1; count <= life; count++) { varrowCount = table.rows.length; var row = table.insertRow(rowCount); if(count % 2 == 0){ row.className = "evenColor"; }else{ row.className = "oddColor"; } var cell0 = row.insertCell(0); cell0.innerHTML=count; var cell1 = row.insertCell(1); cell1.innerHTML="$" + value.toFixed(2); var cell2 = row.insertCell(2); cell2.innerHTML="$" + depreciation.toFixed(2); totalDepreciation += depreciation; var cell3 = row.insertCell(3); cell3.innerHTML="$" + totalDepreciation.toFixed(2); value -= depreciation; } } </script> </head>
Body Section <body> <div id="content"> <p>Straight Line Depreciation Table<p><br><br> <form name="depForm"> Enter Property Value: <input type="text" name="pValue" value="" /><br><br> Enter Property Life_: <input type="text" name="pLife" value="" /><br> <br> <input type="button" value="Show Table" name="btnShowTable" onclick="showTable()" /> </form><br> <table id="depTable" border="1" width="400" cellspacing="1"> <thead> <tr> <th>Year</th> <th>Value at BeginYr</th> <th>Dep During Yr</th> <th>Total to EndOfYr</th> </tr> </thead> <tbody> </tbody> </table> </div> </body>
CSS File #content { width: 650px; margin: 0 auto; padding: 15px; background: aqua; border: 2px solid navy; } table:hover {color:blue;} td:hover {color:blue;} table { border:1px solid green; margin: 0 auto; } .evenColor {color:red;} .oddColor {color:black;} p { font-size: 200; font-weight: bold; text-align: center; text-decoration: underline; }
Tutorials • W3C: • http://www.w3.org/TR/REC-CSS1/#css1-properties • W3Schools.com: • http://www.w3schools.com/css/default.asp