Practical 3 CSS

Practical 2 for an introduction to the Katuta Coffee House Case Study. That includes a site map for the Katuta Web site. The Home page and Menu page were created in Practical 2.

Uploaded by

Lastone Kamwendo

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

32 views

Practical 3 CSS

Practical 2 for an introduction to the Katuta Coffee House Case Study. That includes a site map for the Katuta Web site. The Home page and Menu page were created in Practical 2.

Uploaded by

Lastone Kamwendo

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 3

IWS 521 Internet and Web Systems

Practical 3: CSS
Instructions
1. Submit the website file(s) in zip file name with your Last name on google classroom. i.e.
katutacss folder should be placed under a folder named after your surname. Email submission
is not allowed.
2. This is individual Assignment. Plagiarism will not be tolerated.
3. University rules on late submissions will be followed strictly.
4. Marks will be deducted for not following instructions

Introduction
See Practical 2 for an introduction to the Katuta Coffee House Case Study. That includes a site
map for the Katuta Web site. The Home page and Menu page were created in Practical 2. You
will use the existing Web site as a start while you create a new version that uses an external
style sheet to configure text and color.
You have the following tasks:
1. Create an external style sheet named Katuta.css that configures the color and text for the
Katuta Web site.
2. Modify the Home page to utilize an external style sheet to configure colors and fonts. The
new Home page and color swatches are shown in Figure 1 (also described below).
3. Modify the Menu page to be consistent with the new Home page.
4. Configure centered page layout
Create a folder called Katutacss. Copy all the files from your Katuta folder into the
Katutacss folder.
1. The External Style Sheet.
Launch VS Code. You will create an external style sheet named Katuta.css. Code the CSS
to configure the following:
 Global styles for the document background color (#ffffcc), text color (#330000),
and Verdana, Arial, or any sans-serif font
 Style rules for the h1 selector that configure background color (#ccaa66), text
color (#000000), 200% line height, and centered text
 Style rules for the centered navigation area (use an id named nav)
 Style rules for the page footer area (use an id named footer) for background color
(#ccaa66), text color (#000000), small font size (.60em), italics, and centered
Save the file as Katuta.css in the Katutacss folder. Check your syntax with the CSS
validator (http://jigsaw.w3.org/css-validator). Correct and retest if necessary.
2. The Home Page.
Launch VS Code and open the index.html file. You will modify this file to apply styles
from the Katuta.css external style sheet as follows:
 Add a <link /> element to associate the Web page with the Katuta.css external
style sheet file. Save and test your index.html page in a browser and you’ll notice
that the styles configured with the body and h1 selectors are already applied!
 Configure the navigation area. Since the navigation is not semantically a
“paragraph” (a collection of sentences about a central topic), replace the <p>
element with a <div> element. Assign this <div> to the id named nav.
 Configure the content area with a div assigned to an id named “content”. Code the
opening div tag on a new line after the navigation div. Code the closing div tag
after the end of the paragraph that contains the address and phone number. This
content id will be styled with CSS in later practicals
Experiment with modifying the katuta.css file. Change the page background color, the
font family, and so on. Test your pages in a browser. Isn’t it amazing how a change in a
single file can affect multiple files when external style sheets are used? BUT for
submission make sure to maintain the styles as above.