CSS CSCI 201 Principles of Software Development Jeffrey
- Slides: 13
CSS CSCI 201 Principles of Software Development Jeffrey Miller, Ph. D. jeffrey. miller@usc. edu
Outline • CSS • Program USC CSCI 201 L
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 1. Inline in an HTML element through the style attribute 2. In the <style> tag in an HTML document 3. 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 201 L 3/13
HTML Page <!DOCTYPE html> <head> <title>My First CSS</title> </head> <body> <h 2>CSCI 201</h 2> <h 4>This class is learning about HTML and CSS. </h 4> <table> <tr> <th>Prefix</th> <th>Number</th> </tr> <td>CSCI</td> <td>104</td> </tr> <td>CSCI</td> <td>201</td> </tr> <td>EE</td> <td>101</td> </tr> </table> </body> </html> USC CSCI 201 L 4/13
style Tag 1 2 3 4 5 6 7 8 9 <!DOCTYPE html> <head> <title>My First CSS</title> <style> h 2 { color: blue; } </style> 10 </head> 11 <body> 12 <h 2>CSCI 201</h 2> 13 <h 4>This class is learning about HTML and CSS. </h 4> 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 201 L 5/13
id Attribute 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <head> <title>My First CSS</title> <style> h 2 { color: blue; } #point 12 { font-size: 12 pt; } </style> No point 12 id </head> <body> <h 2 id=“point 12”>CSCI 201</h 2> 16 <h 4>This class is learning about HTML and CSS. </h 4> 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> With point 12 id USC CSCI 201 L 6/13
class Attribute 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <head> <title>My First CSS</title> <style> h 2 { color: blue; } #point 12 { font-size: 12 pt; } . center { text-align: center; } </style> No center class </head> <body> <h 2 id=“point 12”>CSCI 201</h 2> <h 4 class=“center”>This class is learning about HTML and CSS. </h 4> 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> With center class USC CSCI 201 L 7/13
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> <head> <title>My First CSS</title> </head> <body> <h 2>CSCI <span style="color: red">201</span></h 2> <div style="background-color: blue; color: white"> This class is learning about HTML and CSS. Hopefully it will be fun. </div> </body> </html> USC CSCI 201 L 8/13
CSS Frameworks ▪ CSS Frameworks are very popular now to help programmers with some of the more common tasks, such as responsiveness (i. e. a web page that automatically resizes for different screen sizes) ▪ Bootstrap (https: //getbootstrap. com/) is probably the most popular CSS Framework, though many others exist 9/13
More CSS ▪ For more information on CSS › Go to http: //www. w 3 schools. com/css › Go to any web page and view the source (though you may need to find the stylesheet if it is external) 10/13
Outline • CSS • Program USC CSCI 201 L
Program ▪ Create one HTML page that is formatted in the following ways with different stylesheets. 12/13
Program ▪ ▪ Go to http: //www. w 3 schools. com/css_form. asp and modify the form to be more aesthetic like modern web pages. Make the form look different for each page. 13/13
