University of Mauritius

Computer Science and Engineering Department

CSE2026Y Information Systems Innovations and Web Technologies
Lab exercise

Week 7

At the end of this lab session, you should be able to

• Understand and apply cascaded style sheets [CSS]

• Compare different ways to apply styles to a web page
• Apply styles to change the color property of a web page
• Apply styles to change the font property of a web page
• Use materials from an online reference website to modify the look of a web page

As far as possible, you should aim at completing all lab exercises in the lab itself. Students should
note that all lab works may be examinable and your lecturer will verify satisfactory completion of
each lab work every week. In this respect, save all completed work.

Exercise 1
a) List three reasons to use CSS on a web page.
b) State the different types of CSS used to style web pages.
c) Describe one advantage to using inline styles instead of embedded styles.
d) Explain where inline and embedded styles are placed on a web page.
e) When should one use external styles?
f) State where external styles are placed.
g) How do web pages indicate they are using external styles?

Exercise 2
In this exercise you will be applying style to a web page. The first snapshot [figure 1] on the next
page shows the web page with some basic style applied already. The next snapshot [figure 2]
shows the same web page with appropriate color and font style applied. The web page
lighthouse.html [without the link element] and sufficient CSS information in lighthouse.css file
along with appropriate images are available on LCMS as practice2.zip. For this exercise, your
task is to:

• Download and extract all files for practice2.zip

• Link the web page to the css file
• Identify those selectors and properties that allow you to obtain the web page in figure 2
• Provide appropriate values to obtain the desired results as shown in figure 2.

Lab  sheet  prepared  by  Dr.  M.  Y.  Chuttur.  Document  can  be  shared  and  used  for  educational  purpose  only.   1  
 Figure 1: lighthouse with some styling applied

Figure 2: lighthouse with desired styling applied

Exercise 3
Visit http://www.w3schools.com/cssref/ to explain the use of the following properties/selectors:

margin, margin-bottom, float, padding, a:hover, text-decoration, text-align, list-style-type,

background-repeat.

|End of lab exercise – week 7

Lab  sheet  prepared  by  Dr.  M.  Y.  Chuttur.  Document  can  be  shared  and  used  for  educational  purpose  only.   2