4.3. CSS Example

Assuming you’ve already read about Cascading Style Sheets, this is an example that shows how use CSS to style a document.

4.3.1. Starting HTML

Let’s start with a basic HTML document that has no CSS and no style information. We’ll include a line to an External CSS that we will eventually fill in with style information. Note that the filename we specified is css-test.css. You might want a different file name for your project.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Computer Science Class Descriptions</title>

  <!-- This points us to the css_test sheet. -->
  <link rel="stylesheet" type="text/css" href="css_test.css">
</head>

<body>
  <nav>
    <ul>
      <li>
        <a href="index.html">Home Page</a>
      </li>

      <li>
        <a href="about.html">About</a>
      </li>

      <li>
        <a href="business.html">Business</a>
      </li>
    </ul>
  </nav>

  <header>Simpson College</header>

  <section>
    <h1>Computer Science Class Descriptions</h1>

    <article>
      <h2>150. Introduction to Programming</h2>

      <p class="description">This course introduces computer programming, emphasizing algorithm design
      and implementation using conditionals, loops, functions, recursion, and object
      oriented programming. The course is taught in Python.</p>
      <p class="prerequisite">Prerequisite: One of the following: Math 105/105T Quantitative
      Reasoning, Math ACT of 22 or higher, or Math SAT of 530 or higher.</p>
      <p class="embedded_skill">Embedded skill: Quantitative Reasoning.</p>
      <p class="credits">Four credits.</p>
      <p class="offered">Offered every semester</p>
    </article>

    <article>
      <h2>155. Data Structures and Object Oriented Programming</h2>

      <p class="description">This course explores object-oriented programming in
      Java, including encapsulation, overloading, interfaces, inheritance and
      data structures such as linked lists, stacks and queues. Algorithms for
      searching and sorting are examined.</p>
      <p class="prerequisite">Prerequisite: CmSc 150.</p>
      <p class="credits">Four credits.</p>
      <p class="offered">Offered every spring</p>
    </article>
  </section>

  <footer>Copyright 2022</footer>
</body>
</html>

If you open this document in a web browser, before we add the CSS, it looks like this:

Mosaic Web Browser

4.3.2. Example CSS

First, let’s just make sure our external style sheet is working. Create a new file called css_test.css in the same directory as the HTML document. We’ll select the <body> tag and make the background color red. That should make it very obvious if it works or not.

body {
    background-color: red;
}

If it doesn’t work, make sure the <link> tag in your html is correct, the file name matches, and they are in the same directory. Ask the instructor for help if needed.

A red background looks terrible, so let’s just update it to an off-white color:

body {
    background-color: #ece3d7;
}

We can change fonts as well. This changes the font of every paragraph. See W3Schools section on specifying fonts.

p {
    font-family: arial, sans-serif;
}

A bit more work and we can specify font size, color, and alignment of our <h1> and <h2> headings:

h1 {
  font-size: 24px;
  font-family: arial,sans-serif;
  color: rgb(147, 26, 42);
  text-align: center;
}

h2 {
  font-size: 20px;
  font-family: arial,sans-serif;
  color: rgb(147, 26, 42);
}

You can specify the width, or the max-width of an element to keep the text from getting too long.

You can enforce spacing by specifying padding and margin. See W3Schools article on the box model. In addition to specifying padding you can also specify top-padding or left-padding for example.

../../../_images/box_model.png 
section {
  background: #FFFFFF;
  max-width: 800px;
  padding: 5px;
}

You can put borders around things:

article {
  border-style: solid;
  border-width: 5px;
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
}

Here’s the full example. Don’t forget you can use W3Schools CSS Reference to look up additional info on any of these attributes.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
body {
  background-color: #ece3d7;
}

p {
    font-family: arial,sans-serif;
}

h1 {
  font-size: 24px;
  font-family: arial,sans-serif;
  color: rgb(147, 26, 42);
  text-align: center;
}

h2 {
  font-size: 20px;
  font-family: arial,sans-serif;
  color: rgb(147, 26, 42);
}

section {
  background-color: #FFFFFF;
  max-width: 800px;
  padding: 5px;
}

article {
  border-style: solid;
  border-width: 5px;
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
}

.prerequisite {
  font-style: italic;
  display: inline;
}

.credits {
  display: inline;
  color: #800000;
}

.embedded_skill {
  display: inline;
  color: #995c00;
}

.offered {
  display: inline;
  color: #000080;
}

header {
  background-color: #931a2a;
  background-image: url("header.png");
  background-repeat: no-repeat;
  color: #f9e5af;
  font-family: Georgia, Palatino, serif;
  font-size: 60px;
  height: 75px;
  padding: 10px;
}


/* --- Nav Bar --- */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  font-family: arial,sans-serif;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
nav li a:hover {
  /* This is a three digit code. Same as #111111 */
  background-color: #111;
}

Here’s the result:

Rendered Web Page

We will go through this example in class. Outside of class, go through this tutorial:

http://www.w3schools.com/css/default.asp

Don’t check in any updates to your website with CSS, we’ll do that later.