WIF2003 Tutorial

Tutorial 02: Implementing CSS for JavaJam Coffee House website

In this exercise, you have to do the following tasks:

Task 1: Create a folder

Create a folder on your hard drive or portable storage device (USB or SD card) called
“javajam2” to contain your JavaJam website files. Copy all the files from your Tutorial/Lab
2’s folder (javajam) into the javajam2 folder. Next, copy the new image files (background.gif,
javajamlog.jpg, mugs.jpg, windingroad.jpg) into the javajam2 folder. You may organize files
and folder structure in your project folder (e.g. create ‘images’ and ‘stylesheets’ folders to
store images and css files), here are some references:
• https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files
• https://stuyhsdesign.wordpress.com/basic-html/directory-structure/

NOTE: If you have installed Git / SVN in your computer, you may consider to use Git/SVN to
manage the versions of your codes. Reference for:
• Differences between Git and SVN: https://www.geeksforgeeks.org/difference-between-git-and-svn/
o Install Git: https://git-scm.com/download
o Git Documentation: https://git-scm.com/doc
• Learn Git In 15 Minutes: https://www.youtube.com/watch?v=USjZcfj8yxE
• GitHub with VS Code: VS Code will leverage your machine’s Git installation, you need to install Git first
before you get these features. Make sure you install at least version 2.0.0. (to get started with the GitHub
in VS Code, you'll need to create a GitHub account). References:
o https://github.com/
o https://docs.github.com/en/get-started/quickstart/hello-world
o https://code.visualstudio.com/learn/students/github-pack
o https://code.visualstudio.com/docs/editor/versioncontrol#_git-support
o https://www.youtube.com/watch?v=jWLUhHWXMT8
• You can also consider code hosting platforms such as GitLab and Bitbucket:
o https://stackshare.io/stackups/bitbucket-vs-github-vs-gitlab
WIF2003 Tutorial

Task 2: Configure the External Cascading Style Sheet (CSS)

You will use a text editor to create a new external cascading style sheet, save it as
javajam.css.

Code the javajam.css to configure the following:

1. Configure global styles for the document (use the body element selector) with
background color #FCEBB6; text color #221811; Verdana, Arial, or any sans-serif font-
family, and set a background image using background.gif.
body {background-color: #FCEBB6;
color: #221811;
font-family: Verdana, Arial, sans-serif;
background-image: url(background.gif);
}

2. Configure for the header area with the background color #D2B48C, 150 pixels of
height, background image (javajamlogo.jpg) and no repeat for background-repeat
property.
header { background-color: #D2B48C;
height: 150px;
background-image:url(javajamlogo.jpg);
background-repeat: no-repeat;
}

3. A wrapper is commonly used to center a layout on the page. The wrapper keeps a
layout from looking too wide or too narrow depending on the device or viewport width.
Configure a wrapper for JavaJam Website with background color #FEF6C2, 80%
width, auto right margin, auto left margin, 900 pixels of mininum width, 1280 pixels of
maximum width, and set box-shadow effect using 3 pixels of offset-x, 3 pixels of offset-
y, 3 pixels of blur-radius and color #666666.
#wrapper { background-color: #FEF6C2;
width: 80%;
margin-right: auto;
margin-left: auto;
min-width: 900px;
max-width: 1280px;
box-shadow: 3px 3px 3px #666666;
}
WIF2003 Tutorial

4. Configure for the navigation area with center alignment (text-align: center), bold
font-weight, 1.5em of font-size and 10 pixels of top padding.
nav {text-align: center;
font-weight: bold;
font-size: 1.5em;
padding-top: 10px;
}

5. Configure the navigation hyperlinks. Use a contextual selector to add a new style
rule for the anchor tags within the nav. Configure this selector with 15 pixels of
bottom padding and no underline on hyperlinks.
nav a { text-decoration: none; }

6. Configure the main area with 2em of left padding, 2em of right padding, 2em of bottom
pading and displays the element in main area as a block element (like <p>, it starts on
a new line, and takes up the whole width).
main { padding-left: 2em;
padding-right: 2em;
padding-bottom: 2em;
display: block;
}

7. Configure the footer area with background color #D2B48C, small font size, italic font
style and 2 pixels of top border with color #221811 and solid line.
footer { background-color: #D2B48C;
font-size: small;
font-style: italic;
text-align: center;
padding-bottom: 10px;
border-top: 2px #221811 solid;
}

8. Configure the h1 element selector with background color 45 pixels of top padding,
220 pixels of left padding and 3em of font-size.
h1 { padding-top: 45px;
padding-left: 220px;
font-size: 3em;
}
WIF2003 Tutorial

9. Configure the h4 element selector with background color #D2B48C, 1.2em of font size,
10 pixels of left padding, and 5 pixels of bottom padding.
h4 { background-color: #D2B48C;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
10. Configure img element selector with 10 pixels of left padding and 10 pixels of right
padding.
img { padding-left: 10px;
padding-right: 10px;
}

11. Configure an id element named address with 20px left padding. This id element will
be used in the index.html files to style the address.
#address{
padding-left: 20px;
}
12. Configure a class element named details with 10% left padding and 10% right padding.
This class element will be used in the music.html files to style the performance details.
.details { padding-left: 10%;
padding-right: 10%;
}
13. Configure a class element named floatright with ‘float’ property and have image float
to the ‘right’. This class element will be used in the index.html and menu.html files to
style the image element floats to the right of its container.
.floatright {
float: right;
}
WIF2003 Tutorial

Task 3: The Home Page

Launch a text editor, and open the index.html file. You will modify this file to apply styles
from the javajam.css external style sheet as follows:
1. Add a <link> element to associate the web page with the javajam.css external style sheet
file. Save and test your index.html page in a browser and you will notice that the styles
configured with the body and h1 element selectors are already applied!
<head>
<title>JavaJam Coffee House</title>
<link rel="stylesheet" href="javajam.css">
</head>
Note: If you have created folders such as “stylesheets’ and ‘images’ to store css and images, then you need to
include the file path as “stylesheets/javajam.css”, same goes to images ‘images/filename’.
2. Configure the page body area, add a div with id named wrapper to associate the web
page’s body area with the wrapper layout configured in the javajam.css.
<body>
<div id="wrapper">

</div>
</body>

3. Configure the page footer area. Remove the <small> and <i> elements, because the font-
size and font-style are configured in javajam.css.
4. Add a new image (windingroad.jpg) in the <main> area, before the “Relax at JavaJam”
heading. Set the following image attributes: alternate text as “winding road through the
woods”, right alignment using the css selector class “floatright”, 400 pixels of width, and 300
pixels of height.

<img class="floatright" src="windingroad.jpg" alt="winding road

through the woods" width="400" height="300">

5. Replace the heading <h2>Relax at JavaJam</h2> with the new text:

Follow the Winding Road to JavaJam

6. Add a new paragraph <p> after the heading “Follow the Winding Road to JavaJam” with the
following text:
We're a little out of the way, but take a drive down Route 42 to JavaJam today! Indulge in
our locally roasted free-trade coffee and home-made pastries. You'll feel right at home at
JavaJam!
WIF2003 Tutorial

7. After the new paragraph, add a new heading <h3> with the text before the unordered list:
JavaJam Coffee House features:

8. Configure css for the <div> element for address and phone number contact information using
the “address” id.

<div id="address">

9. Save the index.html file, and test it in a browser. Your page should look similar to the one
shown in Figure 1.

Figure 1: New JavaJam index.html

WIF2003 Tutorial

Task 4: The Menu Page

Launch a text editor, and open the music.html file. You will modify this file to apply styles
from the javajam.css external style sheet as follows:
1. Add a <link> element to associate the web page with the javajam.css external style sheet
file.
<head>
<title>JavaJam Coffee House</title>
<link rel="stylesheet" href="javajam.css">
</head>
2. Configure the page body area, add a div with id named wrapper to associate the web
page’s body area with the wrapper layout configured in the javajam.css.
<body>
<div id="wrapper">

</div>
</body>

3. Configure the page footer area. Remove the <small> and <i> elements, because the font-
size and font-style are configured in javajam.css.
4. Add a new image (mugs.jp) in the <main> area, before the “Coffee at JavaJam” heading.
Set the following image attributes: alternate text as “mugs on a wall”, right alignment using
the css selector class “floatright”, 400 pixels of width, and 300 pixels of height.

<img class="floatright" src="mugs.jpg" alt="mugs on a wall"

width="400" height="300">

5. Add a new paragraph <p> after the heading “Coffee at Javajam” with the following text:
Indulge in our locally roasted free-trade coffee and enjoy the aroma, the smooth taste, the
caffeine! Join our Mug Club and get a 10% discount on each cup of coffee you purchase —
ask the barista for details.

6. Save the menu.html page, and test it in a browser and you will notice that the styles
configured in javajam.css are already applied. Your page should look similar to the one shown
in Figure 2.
WIF2003 Tutorial

Figure 2: New JavaJam menu.html

WIF2003 Tutorial

Task 5: The Music Page

Launch a text editor, and open the menu.html file. You will modify this file to apply styles
from the javajam.css external style sheet as follows:
1. Add a <link> element to associate the web page with the javajam.css external style sheet
file.
<head>
<title>JavaJam Coffee House</title>
<link rel="stylesheet" href="javajam.css">
</head>
2. Configure the page body area, add a div with id named wrapper to associate the web
page’s body area with the wrapper layout configured in the javajam.css.
<body>
<div id="wrapper">

</div>
</body>

3. Configure the page footer area. Remove the <small> and <i> elements, because the font-
size and font-style are configured in javajam.css.

4. Replace the paragraph tags <p> </p> with <div> </div> tags. Assign the new div section with
a class name called “details” to associate the music.html page with the .details class css
styles configured in the javajam.css

<h4>January</h4>
<div class="details">
<a href="melanie.jpg"><img src="melaniethumb.jpg" alt="Melanie
Morris" width="80" height="80"></a>
Melanie Morris entertains with her melodic folk style.
</div>

<h4>February</h4>
<div class="details">
<a href="greg.jpg"><img src="gregthumb.jpg" alt="Tahoe Greg"
width="80" height="80"></a>
Tahoe Greg is back from his tour. New songs. New stories.
</div>
WIF2003 Tutorial

5. Save the music.html page, and test it in a browser and you will notice that the styles
configured in javajam.css are already applied. Your page should look similar to the one shown
in Figure 3.

Figure 3: New JavaJam music.html

WIF2003 Tutorial

Task 6: The Jobs Page

Launch a text editor, and open the jobs.html file. You will modify this file to apply styles from
the javajam.css external style sheet as follows:
1. Add a <link> element to associate the web page with the javajam.css external style sheet
file.
<head>
<title>JavaJam Coffee House</title>
<link rel="stylesheet" href="javajam.css">
</head>
2. Configure the page body area, add a div with id named wrapper to associate the web
page’s body area with the wrapper layout configured in the javajam.css.
<body>
<div id="wrapper">

</div>
</body>

3. Configure the page footer area. Remove the <small> and <i> elements, because the font-
size and font-style are configured in javajam.css.
4. Save the jobs.html page, and test it in a browser and you will notice that the styles configured
in javajam.css are already applied. Your page should look similar to the one shown in Figure
4.

Figure 4: New JavaJam jobs.html

WIF2003 Tutorial

Task 6: Implementing a CSS Two-Column Page Layout

Launch a text editor, and open the javajam.css file. You will modify this file to implement a
new CSS two-column page layout for JavaJam Coffee House website. The steps are as
follows:
1. Create a new folder called javajam3. Copy all the files from your javajam2 folder into the
javajam3 folder.
2. Modify the javajam.css file to configure the a two-column page layout:
a. Set a universal box-sizing and displays the header, nav, main and footer element as
a block element:
* { box-sizing: border-box; }
header, nav, main, footer { display: block; }

b. Set the <nav> area with 200 pixels of width and floats to the left of the container:
nav { text-align: center;
font-weight: bold;
font-size: 1.5em;
padding-top: 10px;
float: left;
width: 200px;
}

c. Set left padding to 0 pixel and remove the list bullets of the unordered list in navigation
menu <nav ul>:
nav ul { list-style-type: none;
padding-left: 0;
}
d. Set the <main> area with background color #FEF6C2, 200 pixels of left margin, top
padding 0, right padding 0, bottom padding 2em, and left padding 0.
main { padding: 0 0 2em 0;
margin-left: 200px;
background-color: #FEF6C2;
}

3. Modify the index.html, menu.html, music.html and jobs.html: Change the navigation menu
to an unordered list <ul></ul>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a> </li>
<li><a href="music.html">Music</a> </li>
WIF2003 Tutorial

<li><a href="jobs.html">Jobs</a> </li>

</ul>
</nav>

4. Save the javajam.css and html files, and test all the web pages (index.html, menu.html,
music.html and jobs.html) in a browser and you will notice that the styles configured in
javajam.css are already applied. Your page should look similar to the one shown in Figure 5.

Figure 5: New JavaJam index.html with CSS Two-Column page layout