Session #4 Cascading Style Sheets February 23, 2004 B118 Web Programming Session #4 Cascading Style Sheets February 23, 2004
Tonight’s Agenda Campus event announcements Website review grading scheme Tips on preparing for the midterm XHTML examples & discussion Tables (colspan & rowspan) Validation Anything else? Look at CSS examples Chapters 5 & 6 quiz next week !!!
Tonight’s Agenda Website review grading scheme Follow-up on XHTML Look at CSS examples Quiz on Chapter 4 Chapters 5 & 6 quiz next week !!!
Due Tonight XHTML Resume Project team roster Help wanted / positions available Infrastructure team?
Website Review Grading Scheme Points 15 “Perfect” exec summary, criteria analysis (including 2 benefits/speculation per criteria), grammar & appearance 14 One minor flaw (usually grammar) 13 (incomplete exec summary + a minor flaw) or (2 minor flaws) 12 Weak criteria analysis 11 Missing benefits/speculation in most criteria evaluations or significant flaws in several areas
Website Review – Common Misconceptions Navigation pages and whole sites should show gradients of complexity
Follow-up on XHTML XHTML examples & discussion Tables (colspan & rowspan) Validation Anything else? Any questions on lecture or midterm prep exercises?
General Form of a CSS <style type="text/css"> element { property: value } element.class { property: value; property: value } element:pseudoclass { property: value } element1, element2 { property: value } element child-element { property: value } </style>
CSS examples: font color <html> <head> <style type="text/css"> .blue-text {color: blue} </style> </head> <body> <p>This is regular color text. </p> <p class=blue-text>This is colored text. </p> <p>Back to normal color.</p> <p class=“blue-text”>Color. </p> </body> </html> Additional example: css-text.htm
CSS examples: table width & font settings Instead of <table width=“600”>: Define standards for H1 & H2 Example: Jason’s resume <!-- use inline style declaration --> <div style=“width:600px"> </div> <style type="text/css"> h1 { font-family:"times"} h2 { font-family:"arial"; font-style:"oblique"} </style>
CSS examples: positioning & layers top, left, position to define object positioning z-index to define layers higher value layers sit on top of lower value layers Examples: layer.htm & layer2.htm <table style ="top: 0px; left:0px; z-index:1"> <tr> <td> </td> </table>
Midterm Prep Exercise 6.8 Exercise 6.8: Write an XHTML document that shows the results of a color survey. The document should contain a form with radio buttons that allows users to vote for their favorite color. One of the colors should be selected as a default. The document should also contain a table showing various colors and the corresponding percentage of votes for each color. (Each row should be displayed in the color to which it is referring.) Use attributes to format width, border and cell spacing for the table. You don't need to make the Submit and Clear buttons do anything if they're clicked.
Screen Shot
Tips & Notes Based on layer.htm with radio button & forms added See end of Chapter 5 for details on XHTML forms Use <form method = "post" action = ""> to create submit and clear buttons
Tips & Notes (cont’d) Radio buttons Need common name to group buttons together Value attribute used to set property if selected Use checked attribute to set default radio button Surround radio button tag with <label> to distinguish this type text from the other text elements Define style to align label text (text-align) <p> <label>Blue <input name = "color" type = "radio" checked = "checked" value = "Blue" /> </label> </p>