B118 Web Programming

B118 Web Programming Session #4 Cascading Style Sheets February 23, 2004

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

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 • Additional example: css-text.htm <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>

CSS examples: table width & font settings • Instead of <table width=“600”>: • Define standards for H1 & H2 • Example: Jason’s resume  <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>

B118 Web Programming