Scribd
Upload
80 views

Lab 5..

The document provides instructions for a lab assignment on using CSS in HTML pages. It includes 3 tasks: [1] Complete code examples demonstrating inline, embedded and external CSS; [2] Create a class timetable webpage applying CSS styles like coloring the header blue and bold formatting for day names; [3] Create a personal details webpage using tables and CSS for headings, cell alignment, background colors and adding a logo image. Students are asked to paste screenshots of their outputs.

Uploaded by

Bisma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
80 views

Lab 5..

The document provides instructions for a lab assignment on using CSS in HTML pages. It includes 3 tasks: [1] Complete code examples demonstrating inline, embedded and external CSS; [2] Create a class timetable webpage applying CSS styles like coloring the header blue and bold formatting for day names; [3] Create a personal details webpage using tables and CSS for headings, cell alignment, background colors and adding a logo image. Students are asked to paste screenshots of their outputs.

Uploaded by

Bisma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

The Islamia University of Bahawalpur

Faculty of Engineering

Department of Computer Systems Engineering

Web Engineering

Session (2017-2021)

LAB 5

NAME: Roll no.

Class: Instructor:

Objective:
To use CSS in HTML page.

Pre Lab:
CSS BASICS:

 Inline Css:
<html>
<head>
<title>Exercise - 1</title>
</head>
<body>
<p style="font-family:'times new roman';font-size:20px;font-
weight:bold;color:green">Hello World</p>
</body>
</html>

Output: ??

 Embedded CSS:
<html>
<head>
<title>Exercise - 1</title>
<style>
#embpara
{
font-family:'times new roman';
font-size:20px;
font-weight:bold;
color:green
}
</style>
</head>
<body>
<p id="embpara">My Name is XYZ, I am a student of BSc
Computer Engineering</p>
</body>
</html>
Output?

 External CSS:
ex1.html

ex1style.css

#extpara
{
font-family:'times new roman';
font-size:20px;
font-weight:bold;
color:green
}
LAB TASK 1:
 Complete the code and write down the output

LAB TASK 2:

Create a webpage which displays the class time table and apply the following effects
on the table:

 For the table header apply blue as the background colour and white for the
colour of the text in the table header.
 Display day names (Mon, Tue etc...) in bold format with the first letter in the
day name in uppercase.
 Display lunch slightly in bigger font other than the remaining text.
LAB TASK 3:

Create a webpage to manage personal details like name, class, qualifications, photo,
address etc., using tables and other suitable HTML tags. Apply the following style
information:

 Display the heading of the page in Times New Roman font and with 24px size.
 Align all the field names like Name, Class, Photo etc to right in the table.
 Apply light blue as background colour for the left side cells in the table which
contains field names like Name, Class etc...
 Also display your college logo as background image in the top right position of
the web page.

NOTE: Paste the screenshots of your outputs here.

You might also like