Principles of Software Development CSS CSCI 201 Principles of Software Development Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu
Outline CSS Program USC CSCI 201L
CSS Cascading Style Sheets (CSS) are used in conjunction with HTML to describe how HTML elements should be displayed CSS can be included in three ways Inline in an HTML element through the style attribute In the <style> tag in an HTML document In an external file that is included in an HTML document in the <link> tag In the <head> tag, include <link rel=“stylesheet” type=“text/css” href=“test.css” /> USC CSCI 201L
HTML Page <!DOCTYPE html> <html> <head> <title>My First CSS</title> </head> <body> <h2>CSCI 201</h2> <h4>This class is learning about HTML and CSS.</h4> <table> <tr> <th>Prefix</th> <th>Number</th> </tr> <td>CSCI</td> <td>104</td> <td>201</td> <td>EE</td> <td>101</td> </table> </body> </html> USC CSCI 201L
style Tag USC CSCI 201L 5 <style> 6 h2 { 7 color: blue; 8 } 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>My First CSS</title> 5 <style> 6 h2 { 7 color: blue; 8 } 9 </style> 10 </head> 11 <body> 12 <h2>CSCI 201</h2> 13 <h4>This class is learning about HTML and CSS.</h4> 14 <table> 15 <tr> 16 <th>Prefix</th> 17 <th>Number</th> 18 </tr> 19 <tr> 20 <td>CSCI</td> 21 <td>104</td> 22 </tr> 23 <tr> 24 <td>CSCI</td> 25 <td>201</td> 26 </tr> 27 <tr> 28 <td>EE</td> 29 <td>101</td> 30 </tr> 31 </table> 32 </body> 33 </html> USC CSCI 201L
id Attribute No point12 id With point12 id USC CSCI 201L 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>My First CSS</title> 5 <style> 6 h2 { 7 color: blue; 8 } 9 #point12 { 10 font-size: 12pt; 11 } 12 </style> 13 </head> 14 <body> 15 <h2 id=“point12”>CSCI 201</h2> 16 <h4>This class is learning about HTML and CSS.</h4> 17 <table> 18 <tr> 19 <th>Prefix</th> 20 <th>Number</th> 21 </tr> 22 <tr> 23 <td>CSCI</td> 24 <td>104</td> 25 </tr> 26 <tr> 27 <td>CSCI</td> 28 <td>201</td> 29 </tr> 30 <tr> 31 <td>EE</td> 32 <td>101</td> 33 </tr> 34 </table> 35 </body> 36 </html> No point12 id With point12 id USC CSCI 201L
class Attribute No center class With center class USC CSCI 201L 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>My First CSS</title> 5 <style> 6 h2 { 7 color: blue; 8 } 9 #point12 { 10 font-size: 12pt; 11 } 12 .center { 13 text-align: center; 14 } 15 </style> 16 </head> 17 <body> 18 <h2 id=“point12”>CSCI 201</h2> 19 <h4 class=“center”>This class is learning about HTML and CSS.</h4> 20 <table> 21 <tr> 22 <th>Prefix</th> 23 <th>Number</th> 24 </tr> 25 <tr> 26 <td>CSCI</td> 27 <td>104</td> 28 </tr> 29 <tr> 30 <td>CSCI</td> 31 <td>201</td> 32 </tr> 33 <tr> 34 <td>EE</td> 35 <td>101</td> 36 </tr> 37 </table> 38 </body> 39 </html> No center class With center class USC CSCI 201L
HTML Block Tags div and span tags are often used with the style or class attribute div is a block-level element span is an inline element <!DOCTYPE html> <html> <head> <title>My First CSS</title> </head> <body> <h2>CSCI <span style="color:red">201</span></h2> <div style="background-color:blue; color:white"> This class is learning about HTML and CSS.<br /> Hopefully it will be fun. </body> </html> The div will automatically go to a new line since it represents blocks of text USC CSCI 201L
More CSS For more information on CSS Go to http://www.w3schools.com/css Go to any web page and view the source (though you may need to find the stylesheet if it is external)
Outline CSS Program USC CSCI 201L
Program Create one HTML page that is formatted in the following ways with different stylesheets.
Program Go to http://www.w3schools.com/css/css_form.asp and modify the form to be more aesthetic like modern web pages. Make the form look different for each page.