Official (Closed) - Non Sensitive

Page 1 of 6

Fundamentals of Computing Week 4

Polytechnic Foundation Program
2022/23 Semester 2 Session 2
Practical 4 – Cascading Style Sheet

OBJECTIVES

At the end of this exercise, you should know:

 How to Use CSS to enhance the web page

REFERENCES

 http://www.w3schools.com/html/

SUBMISSION

 Create a folder, Week04 in your FC folder.

 At the end of the session, copy the Week04 folder (which contains all your
work) to FC folder in MS Team.

ACTIVITIES

PART A

1. Add internal CSS onto webpage

Copy your completed Week 1 practical (index.html) to the Week04 folder

and rename to index_A.html

Add the following internal CSS code below the <title> tags.

FC AY22/23 Sem 2 Last update 07/09/22

Week 4 Session 2
Official (Closed) - Non Sensitive

Page 2 of 6

Note:
Setting the width of a block-level element will prevent it from stretching out
to the edges of its container to the left and right. Then, you can set the left
and right margins to auto to horizontally center that element within its
container. The element will take up the width you specify, then the
remaining space will be split evenly between the two margins.

2. Save the file and view the document in a browser. Note the updated style
for the webpage body, h1 & h2 heading and the list items as shown below.

FC AY22/23 Sem 2 Last update 07/09/22

Week 4 Session 2
Official (Closed) - Non Sensitive

Page 3 of 6

3. In the internal CSS, add in another styling for the terms <dt> of the
description list and view the webpage again.

The description list styling is updated as shown:

FC AY22/23 Sem 2 Last update 07/09/22

Week 4 Session 2
Official (Closed) - Non Sensitive

Page 4 of 6

4. Try changing the values of some of the CSS attributes and view again in the
browser.

Note: CSS colour names can be found from the link below:
http://www.w3schools.com/cssref/css_colors.asp

FC AY22/23 Sem 2 Last update 07/09/22

Week 4 Session 2
Official (Closed) - Non Sensitive

Page 5 of 6

PART B

1. Create a new HTML file and name it index_B.html.

 Add the meta tags for "author" as your name and "description" as
"Graduation Ceremony".
 Set the title of the web page as "Graduation Ceremony".

2. Create an internal CSS to include the following styling:

Webpage body Font family: Arial, Helvetica, sans-serif;

Text color: blue

Table Text-alignment: center

Solid black border
4px padding

Caption Font size: 150%

Text color: black

3. Create a table with the caption "PFP Graduation 2020" with the contents as
shown below:

4. Copy the image ICT.jpg from MEL and place into the subfolder image.
 The image ICT.jpg should be placed at the top right corner of the page
and is hyperlinked to http://www.np.edu.sg/ict, and set to open in a new
tab.
 The image width should be set to 50px and height set to 100px.
 Set the alternate text as "ICT Logo" when the image is not available.

FC AY22/23 Sem 2 Last update 07/09/22

Week 4 Session 2
Official (Closed) - Non Sensitive

Page 6 of 6

5. At the bottom of the page, add "Done by " followed by your name in italics.

6. Save your file and view the document in a browser. Check if the formatting
follows accordingly to your webpage internal styling.

Hint: You may need to add in some inline styling to cater for some of the
formatting.

FC AY22/23 Sem 2 Last update 07/09/22

Week 4 Session 2