Scribd
Upload
23 views10 pages

CSC336 Web Technologies LAB04

The document provides instructions and examples for a lab on CSS basics. The objectives are to familiarize students with CSS and apply CSS to web pages. Examples are given for inline, internal, and external CSS. Styles are demonstrated for fonts, text, background colors, borders, and other box properties. The lab activities have students apply CSS to style elements of an HTML page created previously including fonts, text, backgrounds, links, headings and paragraphs. Sample code is provided of an external CSS file and HTML page with the applied styles. Finally, graded lab tasks are outlined to design web templates using tables and external CSS.

Uploaded by

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

CSC336 Web Technologies LAB04

The document provides instructions and examples for a lab on CSS basics. The objectives are to familiarize students with CSS and apply CSS to web pages. Examples are given for inline, internal, and external CSS. Styles are demonstrated for fonts, text, background colors, borders, and other box properties. The lab activities have students apply CSS to style elements of an HTML page created previously including fonts, text, backgrounds, links, headings and paragraphs. Sample code is provided of an external CSS file and HTML page with the applied styles. Finally, graded lab tasks are outlined to design web templates using tables and external CSS.

Uploaded by

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

Lab 04

CSS (Cascading Style Sheet) Basics


Objective:

To familiarize the students with the cascading style sheets.

Activity Outcomes:

After this lab the students should be able to apply CSS to the web pages.

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
Introduction

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 an 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

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

<tag style=”property:value”></tag>

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

<style>

.class

property:value;

</style>

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 and Background Properties

Color Background Color

28
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

4. Examples Inline CSS:

<table style=”width:200px; background-color: #000000;”> Table element with Inline


Style</table>

Internal CSS:

<html>
<head>

<title>Internal CSS</title>
<style> h1{color:#FF0000; font-family:Calibri; font-size:36px
}
</style>
</head>
<body>
<h1>This heading is styled with CSS</h1>
</body>

29
</html>
External CSS:

CSS file: (mystyle.css)

h1{color:green; font-size:36px; font-family:calibri


}

2. Solved Lab Activites

Activity 1-4:
3. Use the html page created in Lab 2 (page for COMSATS) and create an external style-sheet
which style the elements of the page including 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:

body {

background-color: lightblue;

h1 {

color: navy; margin-left: 20px; font-family: verdana;

font-size: 50px;

#para1 {

30
text-align: center; color: red;

.center {

text-align: center; color: yellow; }

<!DOCTYPE html>

<html>

<style>

body {font-family: Arial, Helvetica, sans-serif;}

* {box-sizing: border-box}

/* Full-width input fields */

input[type=text], input[type=password] {

width: 100%;

padding: 15px;

margin: 5px 0 22px 0;

display: inline-block;

border: none;

background: #f1f1f1;

input[type=text]:focus, input[type=password]:focus {

background-color: #ddd;

outline: none;

hr {

31
border: 1px solid #f1f1f1;

margin-bottom: 25px;

/* Set a style for all buttons */

button {

background-color: #04AA6D;

color: white;

padding: 14px 20px;

margin: 8px 0;

border: none;

cursor: pointer;

width: 100%;

opacity: 0.9;

button:hover {

opacity:1;

/* Extra styles for the cancel button */

.cancelbtn {

padding: 14px 20px;

background-color: #f44336;

/* Float cancel and signup buttons and add an equal width */

.cancelbtn, .signupbtn {

32
float: left;

width: 50%;

/* Add padding to container elements */

.container {

padding: 16px;

/* Clear floats */

.clearfix::after {

content: "";

clear: both;

display: table;

/* Change styles for cancel button and signup button on extra small screens */

@media screen and (max-width: 300px) {

.cancelbtn, .signupbtn {

width: 100%;

</style>

<body>

<form action="/action_page.php" style="border:1px solid #ccc">

<div class="container">

<h1>Sign Up</h1>

33
<p>Please fill in this form to create an account.</p>

<hr>

<label for="email"><b>Email</b></label>

<input type="text" placeholder="Enter Email" name="email" required>

<label for="psw"><b>Password</b></label>

<input type="password" placeholder="Enter Password" name="psw" required>

<label for="psw-repeat"><b>Repeat Password</b></label>

<input type="password" placeholder="Repeat Password" name="psw-repeat" required>

<label>

<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px">


Remember me

</label>

<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms &
Privacy</a>.</p>

<div class="clearfix">

<button type="button" class="cancelbtn">Cancel</button>

<button type="submit" class="signupbtn">Sign Up</button>

</div>

</div>

</form>

</body>

</html>

34
4. Graded Lab Tasks

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

35
36

You might also like