Cascade Style Sheet Demo W3Schools. com: http://www. w3schools ISYS 350
Cascading Style Sheets Cascading Style Sheets (CSS) is a mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. A style sheet consists of a list of style rules. Each rule or rule-set consists of one or more selectors, and a declaration block.
CSS Rule Syntax A CSS rule has two main parts: a selector, and one or more declarations:
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets. Example: p { color:red; text-align:center; }
Typical Properties of Style background-color background-color:lightgrey" Color color:red font font-family:courier Font-size font-size:300% text-align text-align:center
Three Ways to Apply Style Rules External style sheet Internal style sheet Inline style
External Style Sheet An external style sheet can be written in any text editor. It should be saved with a .css extension. An external style sheet is ideal when the style is applied to many pages. A web page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
External Style sheet Example: mystyle.css /* Author : David */ H1 { color: blue; } H3 {color:green;} H6 {color:red;} p {color:red;text-align:center;} body {background-color:aqua;}
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" />
Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this: <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head> Note: Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is: margin-left:20px
Inline Styles To use inline styles you use the style attribute in the HTML tag. Example: <p style="color:sienna;margin-left:20px">This is a paragraph.</p> An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!
Creating an External Stylesheet File 1 Creating an External Stylesheet File 1. Right-Click Web Pages Folder, then select New/ Cascade Style Sheet 2. Define rules 3. Add a reference to the style sheet file H1 { color: blue; } H3 {color:green;} H6 {color:red;} p {color:red;text-align:center;} body {background-color:aqua;}
External Stylesheet Example head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <div> <h1> This is h1 text</h1><br> <h3> This is h3 text</h3><br> <h6> This is h6 text</h6><br> <h1> This is h1 text again</h1><br> <h3> This is h3 text again</h3><br> <h6> This is h6 text again</h6><br> <br> <p> This is the P tag data</p> </div> </body>
Example: Internal stylesheet <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> H1 { color: blue; } H3 {color:green;} H6 {color:red;} p {color:red;text-align:center;} body {background-color:aqua;} </style> </head> <body> <div> <h1> This is h1 text</h1><br> <h3> This is h3 text</h3><br> <h6> This is h6 text</h6><br> <h1> This is h1 text again</h1><br> <h3> This is h3 text again</h3><br> <h6> This is h6 text again</h6><br> <br> <p> This is the P tag data</p> </div> </body>
HTML Element as Selector Apply to all elements of a specific type: H1 { color: blue; } p {color:red;text-align:center;}
ID as a selector The id selector is used to specify a style for a single, unique element identified by the id attribute of the HTML element. The selector is with a preceding '#': Example: A HTML element : <div id=“mycontent"> The style rule is: #mycontent { width: 450px; margin: 0 auto; padding: 15px; background: white; border: 2px solid navy; }
Class As Selector The class selector is defined with a "." The class selector is used to specify a style for a group of elements (which may be different HTML elements). The class selector uses the HTML class attribute to set a particular style for many different HTML elements with the same class. The class selector is defined with a "."
Examples of Class Selector Example 1: All HTML elements with class="center" will be center-aligned: HTML: <h1 class="center">Center-aligned heading</h1> Style: with a preceding “.” .center{ text-align:center; } Example 2: In the example below, all p elements with class="center" will be center-aligned: p.center {text-align:center;}
Example <style> .center{ text-align:center; } p.right{ <body> <div id="mycontent"> <h1> This is h1 text</h1><br> <h3 class="center"> This is h3 text</h3><br> <h6> This is h6 text</h6><br> <h1> This is h1 text again</h1><br> <h3 class="center"> This is h3 text again</h3><br> <h6 class="center"> This is h6 text again</h6><br> <br> <p class="center"> This is the first P tag data</p> <p> This is the 2nd P tag data</p> <p class="right">This is the 3rd P tag data</p> </div> </body> <style> .center{ text-align:center; } p.right{ text-align:right; </style>
The CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
box model
Explanation of the different parts of a box Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear
Example width:250px; padding:10px; border:5px solid gray; margin:10px; The total width of the element in the example is 300px: 250px (width) + 20px (left + right padding) + 10px (left + right border) + 20px (left + right margin) = 300px
Example: Define a box for a P tag: p{color:red; text-align:center; width:250px; padding:10px; border:5px solid gray; margin:10px; }
HTML DOM className Property http://www. w3schools Assuming we have two classes: .evenColor {color:red;} .oddColor {color:black;} Example of assigning className value dynamically using code. /* Declare a vsriable representing an HTML element */ var row = table.insertRow(rowCount); if(count % 2 == 0) { row.className = "evenColor"; } else { row.className = "oddColor"; }
Example of assigning style property using code:
Loan Affordability Analysis
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)); var boxPmt=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;}
Positioning http://www.w3schools.com/css/css_positioning.asp Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. Fixed: An fixed element will not move even if the window is scrolled Relative: absolute #mycontent { position: absolute; left:100px; top:100px; width: 450px; margin: 0 auto; padding: 15px; background: white; border: 2px solid navy; }
Without Positioning <style> #div1 { width: 100px; margin: 0 auto; padding: 15px; background: blue; border: 2px solid navy; } #div2 { background: red; </style> </head> <body> <div id="div1">This is div 1</div> <div id="div2">This is div 2</div> </body>
With positioning Note: Change the div2 left to 234. <style> position: absolute;left:100px;top:100px; width: 100px; margin: 0 auto; padding: 15px; background: blue; border: 2px solid navy; } #div2 { position: absolute;left:200px;top:100px; background: red; </style> </head> <body> <div id="div1">This is div 1</div> <div id="div2">This is div 2</div> </body> Note: Change the div2 left to 234.
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;} p:hover{color:blue;} See list of pseudo-classess such as link, visited, focus, etc.: http://www.w3schools.com/css/css_pseudo_classes.asp
<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'); 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; </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; .evenColor {color:red;} .oddColor {color:black;} p { font-size: 200; font-weight: bold; text-align: center; text-decoration: underline;
Adding New User-Defined Elements to HTML Using document Adding New User-Defined Elements to HTML Using document.createElement http://www.w3schools.com/html/html5_browsers.asp <head> <title>Creating an HTML Element</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <myHero>My First Hero</myHero> </body>
XML with Stylesheet Example <?xml version = "1.0" ?> <?xml-stylesheet type="text/css" href="books.css" ?> <Books> <Book> <btitle>My Favorite Book</btitle> <ISBN>1-34567-04-01</ISBN> <Authors> <AuthorName>John Smith</AuthorName> <AuthorName>Peter Chen</AuthorName> </Authors> <Price> $45.00</Price> <Description>This is a grerat book</Description> </Book> <btitle>My Second Favorite Book</btitle> <ISBN>1-34567-04-02</ISBN> <AuthorName>Adam Smith</AuthorName> <Price> $25.00</Price> <Description>This is a second great book</Description> </Books>
Style Sheet Example btitle { display:block; font-family: Aerial, Helvetica; font-weight: bold; font-size: 20pt; color: #9370db; text-align: center; } ISBN { font-size: 12pt; color: #c71585; text-align: left; Authors { display:inline; font-style: italic; font-size: 10pt; Price { color: #ff1010; Description {
CSS Font-Size: em vs. px vs. pt vs. percent http://kyleschaeffer An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Generally, 1em = 12pt = 16px = 100%