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.

Selector Examples All elements of a specific type: – H1 { color: blue } ID as a selector: with a preceding '#': – HTML: – Style: #content { width: 450px; margin: 0 auto; padding: 15px; background: white; border: 2px solid navy; }

Class As Selector Example 1: – HTML: Center-aligned heading – Style: with a preceding “.”.center{ text-align:center; } Example 2: For a specific element – HTML: – 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:

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 element inside the head section

Example: Page View

HTML Code Product Discount Calculator Product Description: List Price: Discount Percent: %

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: 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: var boxFV=document.getElementById('FV'); fv=myPV*Math.pow(1+myRate,myYear); if (fv>1000) boxFV.style.backgroundColor = "red"; else boxFV.style.backgroundColor = "green";

Loan Affordability Analysis

HTML Code Loan Affordability Analysis Enter Loan: Enter Rate: Enter Term: Enter Affordable payment: Payment is:

computePmt() 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)); var boxPmt=document.getElementById("Pmt"); if (Pmt>Afford) boxPmt.style.backgroundColor="red"; else boxPmt.style.backgroundColor="green"; boxPmt.value=Pmt.toFixed(2); }

CSS File div { width: 450px; margin: 0 auto; padding: 15px; background: aqua; border: 2px solid navy; } p {font-weight:bold;}

function showTable(){ value=eval(document.depForm.pValue.value); life=eval(document.depForm.pLife.value); depreciation = value / life; var table = document.getElementById('depTable'); var totalDepreciation=0; for(var i = table.rows.length - 1; i > 0; i--) { table.deleteRow(i); } for (count = 1; count <= life; count++) { var rowCount = 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; }

Body Section Straight Line Depreciation Table Enter Property Value: Enter Property Life_: Year Value at BeginYr Dep During Yr Total to EndOfYr

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: – properties properties W3Schools.com: –