cascade style sheet demo isys 350. cascading style sheets cascading style sheets (css) is a...
TRANSCRIPT
Cascade Style Sheet Demo
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– <body style="background-color:lightgrey">
• Color– color:red
• font– font-family:courier
• Font-size– font-size:300%
• text-align– text-align:center
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" />
Three Ways to Insert CSS
• 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>
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!
HTML Element as Selector
• Apply to all elements of a specific type:– H1 { color: blue; }– p {color:red;text-align:center;}
Example
<head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></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>
H1 { color: blue; }H3 {color:green;}H6 {color:red;}p {color:red;text-align:center;}body {background-color:aqua;}
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 used to specify a style for a group of elements. The class selector uses the HTML class attribute to set a particular style for many 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
<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> This is h6 text again</h6><br> <br> <p> This is the P tag data</p> <p class="left">This is the 2nd P tag data</p> </div> </body>
.center{text-align:center;}
p.left{text-align:left;}
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; }
Example: Page View
HTML Code<body> <div id=“mycontent"> <h1>Product Discount Calculator</h1> <form action="display_discount.php" method="post"> <div id=“mydata"> <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>
Note: The HTML code for a no-break space is .
body { font-family: Arial, Helvetica, sans-serif; margin: 10px; padding: 0;}#mycontent { width: 450px; margin: 0 auto; padding: 15px; background: white; border: 2px solid navy;}h1 { color: navy;}label { width: 10em; padding-right: 1em; float: left;}#mydata input { float: left; width: 15em; margin-bottom: .5em;}#buttons input { float: left; margin-bottom: .5em;}br { clear: left;}
CSS Font-Size: em vs. px vs. pt vs. percenthttp://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/
• 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%
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:
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
<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;}
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; margin: 0 auto; }.evenColor {color:red;}.oddColor {color:black;}p { font-size: 200; font-weight: bold; text-align: center; text-decoration: underline;}
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 element with a fixed 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 { width: 100px; margin: 0 auto; padding: 15px; background: red; border: 2px solid navy;}</style> </head> <body> <div id="div1">This is div 1</div> <div id="div2">This is div 2</div> </body>
With positioning<style> #div1 { 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; width: 100px; margin: 0 auto; padding: 15px; background: red; border: 2px solid navy;}</style> </head> <body> <div id="div1">This is div 1</div> <div id="div2">This is div 2</div> </body>
Adding New Elements to HTMLhttp://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><Book><btitle>My Second Favorite Book</btitle><ISBN>1-34567-04-02</ISBN>
<Authors><AuthorName>Adam Smith</AuthorName>
</Authors><Price> $25.00</Price><Description>This is a second great book</Description>
</Book></Books>
Style Sheet Examplebtitle {
display:block;font-family: Aerial, Helvetica;font-weight: bold;font-size: 20pt;color: #9370db;text-align: center;}
ISBN {display:block;font-family: Aerial, Helvetica;font-weight: bold;font-size: 12pt;color: #c71585;text-align: left;}
Authors {display:inline;font-family: Aerial, Helvetica;font-style: italic;font-size: 10pt;color: #9370db;text-align: left;}
Price {display:block;font-family: Aerial, Helvetica;font-size: 12pt;color: #ff1010;text-align: left;}
Description {display:block;font-family: Aerial, Helvetica;font-size: 12pt;color: #ff1010;text-align: left;}
Tutorials
• W3C:– http://www.w3.org/TR/REC-CSS1/#css1-propertie
s• W3Schools.com:– http://www.w3schools.com/css/default.asp