Scribd
Upload
88 views18 pages

Lab 2

This document provides an overview of HTML CSS fundamentals and includes examples of using CSS properties. It covers key concepts like CSS structure, basic properties, and using div and CSS for page layouts. Solved activities demonstrate applying CSS styles and designing responsive forms and page layouts. Graded tasks involve recreating templates using tables and external CSS.

Uploaded by

muhammadakbar21182118
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
88 views18 pages

Lab 2

This document provides an overview of HTML CSS fundamentals and includes examples of using CSS properties. It covers key concepts like CSS structure, basic properties, and using div and CSS for page layouts. Solved activities demonstrate applying CSS styles and designing responsive forms and page layouts. Graded tasks involve recreating templates using tables and external CSS.

Uploaded by

muhammadakbar21182118
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/ 18

Lab 02

HTML CSS Fundamentals

Objective:
To familiarize the students with the use of div, Cascading Style Sheet (CSS) and the use of CSS
for designing page layout cascading style sheets.

Activity Outcomes:

After this lab, the students should be able to


1. Apply CSS to the web pages.
2. Use the DIV tag
3. Use CSS for page layout designing

Instructor Note:
As pre-lab activity, read Chapter 4 from the textbook “Web Design Playground: HTML & CSS the
Interactive Way 1st Edition, April 2019 by Paul McFedries”.
1. Useful Concepts:

CSS (Cascading Style Sheet)


CSS stands for Cascading Style Sheets. It is a way to style HTML webpages. A style sheet is the
presentation of HTML document. CSS is a style language that defines layout of HTML
documents. For example, CSS covers fonts, colours, margins, lines, height, width, background
images, advanced positions and many other things.
CSS can be written either inside the html tags (i.e. Inline), in the <head></head> section of an
HTML document (i.e. Internal) or in a separate CSS File (i.e. External).

CSS Basic Structure


For Inline styling CSS is written inside the style attribute of a tag. For example,

For Internal styling, CSS is written into the head section of the HTML document. For example,

For External styling, CSS is written as a separate file and the file is saved with an extension
.css. In external style sheets the style tags are not necessary. Whereas, external CSS follow the
same structure as the Internal CSS does.

Basic CSS Properties:


Font Properties
 Font Family
 Font Style
 Font Variant
 Font Weight
 Font Size Font Color

Background Properties
 Color Background
 Color Background Image
 Background Repeat
 Background Position
Text Properties
 Word Spacing
 Letter Spacing
 Text Decoration
 Vertical Alignment
 Line Height

Box Properties
 Margin Padding
 Border Width
 Border Color
 Border Style
 Width
 Height
 Float

Examples:

Inline CSS

Internal CSS

External CSS
CSS file: (mystyle.css)
DIV Tag
The div tag is used to define a division or section in an HTML document. It visually, allows us to
make containers that can be formatted.
It can be declared as: <div>……</div>.
We use div and CSS to design a page layout. The div tag is used to represent sections in a page
and CSS is used to style these sections.
We can describe the process of designing a page as:
 Determine the requirements of the site
 Group the required information
 Make a site map
 Identify key elements for each page
 Decide about the arrangement of information on each page
 Translate the design into code
2) Solved Lab Activites

Sr.No Allocated Time Level of Complexity CLO Mapping


1 15 Minutes Low CLO-4
2 45 Minutes High CLO-4
3 30 Minutes Medium CLO-4
4 30 Minutes Medium CLO-4

Activity 1:
Apply border and padding properties on the different paragraphs of an HTML document.
Solution:

Output:
Activity 2:
Use the HTML page created in Lab 1 (Signup page) and create an external style sheet that
styles the elements of the page including the style for
1. apply font and text properties
2. control the background color with CSS
3. style different states of inks
4. paragraphs and headings
Solution:
External Stylesheet.css
Output:
Activity 3:
Use div and CSS properties to design a responsive form that contains First name, Last Name, Country
(dropdown), Subject and submit button.

Solution:
Output:
Activity 4:
Use div and CSS properties to design a page layout that contains
1. a header section to display the title, style this title with CSS
2. a form container that contains a registration form, use CSS to style the elements of the
form
3. a footer section

Solution:
External CSS:
Output:
3) Graded Lab Tasks
Note: The instructor can design graded lab activities according to the level of difficulty and complexity
of the solved lab activities. The lab tasks assigned by the instructor should be evaluated in the same lab

Lab Task 1
Design the web template given below using tables and external CSS
Lab Task 2
Design the web template given below using tables and external CSS
Lab Task 3
Design the web template given below using tables and external CSS

Lab Task 4
Design the web page for Comsats Alumni using External CSS.

You might also like