Download presentation
Presentation is loading. Please wait.
1
Principles of Software Development
CSS CSCI 201 Principles of Software Development Jeffrey Miller, Ph.D.
2
Outline CSS Program USC CSCI 201L
3
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
4
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
5
style Tag USC CSCI 201L 5 <style> 6 h2 { 7 color: blue; 8 }
1 <!DOCTYPE html> 2 <html> 3 <head> <title>My First CSS</title> 5 <style> h2 { color: blue; } 9 </style> 10 </head> 11 <body> <h2>CSCI 201</h2> <h4>This class is learning about HTML and CSS.</h4> <table> <tr> <th>Prefix</th> <th>Number</th> </tr> <tr> <td>CSCI</td> <td>104</td> </tr> <tr> <td>CSCI</td> <td>201</td> </tr> <tr> <td>EE</td> <td>101</td> </tr> </table> 32 </body> 33 </html> USC CSCI 201L
6
id Attribute No point12 id With point12 id USC CSCI 201L
1 <!DOCTYPE html> 2 <html> 3 <head> <title>My First CSS</title> 5 <style> h2 { color: blue; } #point12 { font-size: 12pt; } 12 </style> 13 </head> 14 <body> 15 <h2 id=“point12”>CSCI 201</h2> <h4>This class is learning about HTML and CSS.</h4> <table> <tr> <th>Prefix</th> <th>Number</th> </tr> <tr> <td>CSCI</td> <td>104</td> </tr> <tr> <td>CSCI</td> <td>201</td> </tr> <tr> <td>EE</td> <td>101</td> </tr> </table> 35 </body> 36 </html> No point12 id With point12 id USC CSCI 201L
7
class Attribute No center class With center class USC CSCI 201L
1 <!DOCTYPE html> 2 <html> 3 <head> <title>My First CSS</title> 5 <style> h2 { color: blue; } #point12 { font-size: 12pt; } center { text-align: center; } 15 </style> 16 </head> 17 <body> <h2 id=“point12”>CSCI 201</h2> 19 <h4 class=“center”>This class is learning about HTML and CSS.</h4> <table> <tr> <th>Prefix</th> <th>Number</th> </tr> <tr> <td>CSCI</td> <td>104</td> </tr> <tr> <td>CSCI</td> <td>201</td> </tr> <tr> <td>EE</td> <td>101</td> </tr> </table> 38 </body> 39 </html> No center class With center class USC CSCI 201L
8
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
9
More CSS For more information on CSS
Go to Go to any web page and view the source (though you may need to find the stylesheet if it is external)
10
Outline CSS Program USC CSCI 201L
11
Program Create one HTML page that is formatted in the following ways with different stylesheets.
12
Program Go to and modify the form to be more aesthetic like modern web pages. Make the form look different for each page.
Similar presentations
