CSS
CSCI 201
Principles of Software Development
Jeffrey Miller, Ph.D.
[email protected] 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
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 201L 3/13
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>
<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>
</body>
</html>
USC CSCI 201L 4/13
style Tag
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 5/13
id Attribute
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; No point12 id
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
28
<td>CSCI</td>
<td>201</td> With point12 id
29 </tr>
30 <tr>
31 <td>EE</td>
32 <td>101</td>
33 </tr>
34 </table>
35 </body>
36 </html>
USC CSCI 201L 6/13
class Attribute
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 } No center class
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
30
<tr>
<td>CSCI</td> With center class
31 <td>201</td>
32 </tr>
33 <tr>
34 <td>EE</td>
35 <td>101</td>
36 </tr>
37 </table>
38 </body>
39 </html>
USC CSCI 201L 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>
<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.
</div>
</body>
</html>
USC CSCI 201L 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.w3schools.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 201L
Program
▪ Create one HTML page that is formatted in the following ways with different stylesheets.
12/13
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.
13/13
