Web Development and Database
Administration Level-III
Module Title: - Developing Cascading style sheets
Module code: EIS WDDBA3 M05 1123
Nominal duration: 90 Hour
OPERATION SHEET-2.1
Operation Title: Creating a Page Layout
Purpose: Creating a Page Layout Using CSS Flexbox
Tools and equipment: Browsers computer and text editor
Steps in doing the task
Step1- Create HTML Structure with a container div, and within it, create two div’s for the navigation
menu and main content.([Link])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[Link]">
<title>Flexbox Two-Column Layout</title>
</head>
<body>
<div class="container">
<nav class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main class="content">
<h1>Welcome to My Website</h1>
<p>This is the main content of the webpage.</p>
</main>
</div>
</body>
</html>
Step-2 create CSS file
Create a CSS file ([Link]) and Apply Flexbox properties to the container to achieve a two-column
layout .
/* [Link] */
body {
margin: 0;
font-family: Arial, sans-serif;
.container {
display: flex;
.navigation {
flex: 0 0 20%; /* Navigation column takes 20% width */
background-color: #edc2c2;
color: #fff;
padding: 20px;
.content {
flex: 1; /* Content column takes remaining space */
padding: 20px;
Step-3 Link External CSS File
<link rel="stylesheet" href="[Link]">
Step-4 test
Open the HTML file in a web browser and check if the two-column layout is achieved.
Adjust the content and styles as needed.
Quality Criteria: The output should be look like this
OPERATION SHEET 2.2
Operation Title: Positioning Document Elements with CSS
Purpose: position a specific element “image “at the center of the page.
Tools and equipment: browsers computer and text editor
Steps in doing the task
Step-1: Create HTML Structure with the element you want to center. For this example, let's center an
image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[Link]">
<title>Centering Element Example</title>
</head>
<body>
<div class="center-container">
<img src="[Link]" alt="Centered Image">
</div>
</body>
</html>
Step-2 Create a CSS file ([Link]) and link it to your HTML document.
Apply CSS properties to center the element.
/* [Link] */
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
.center-container {
text-align: center;
.center-container img {
width: 300px; /* Adjust the width as needed */
height: auto;}
Step-3 Test and Refine
Open the HTML file in a web browser and verify that the image is centered on the page.
Quality Criteria: The output should be look like this
OPERATION SHEET 2.3
Operation Title: Creating Responsive Web Pages
Purpose: Creating Responsive Web Pages
Tools and equipment: computer Browsers and Text editor
Steps in doing the task
Step-1 Create HTML Structure with a header, main content, and footer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[Link]">
<title>Responsive Webpage</title>
</head>
<body>
<header>
<h1>My Responsive Website</h1>
</header>
<main>
<!-- Main content goes here -->
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>
Step-2 Create a CSS file ([Link]) and link it to your HTML document.
Apply responsive design techniques using media queries.
/* [Link] */
body {font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;}
header, main, footer {
padding: 20px;
text-align: center;
header {
background-color: #3498db;
color: #fff;
main { background-color: #ecf0f1;
footer {
background-color: #3498db;
color: #fff;
/* Responsive Design for Different Screen Sizes */
@media only screen and (max-width: 768px) {
header, main, footer {
padding: 10px;
Step-3 Test and Refine
Open the HTML file in a web browser and resize the browser window to test responsiveness.
Ensure that the layout and styling adapt to different screen sizes.
Quality Criteria: The output should be look like this
In large screen
In small screen
OPERATION SHEET-2.4
Operation title: Styling Navigation Menu Links with CSS
Write the HTML and CSS code to achieve these styling requirements. Additionally, create a sample
navigation menu with at least three links for testing your styles.
Purpose: styling navigation menu links with CSS is to enhance user experience, improve navigation
usability
Tools and Materials: Computer, Text editors (VS /Notepad/Notepad ++/Sublime)
Steps in doing the task
1. Create the HTML Structure:
Open your preferred text editor (e.g., Visual Studio Code, Sublime Text, Notepad).
Create a new HTML file [Link] and add the basic HTML structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[Link]">
<title>CSS Hover Example</title>
</head>
<body>
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link">Contact</a>
</body>
</html>
1. Create an external CSS file ([Link]) and apply the following styles
• Set the default color of the links to black.
• When a user visits a link, change the color to green.
• When the user hovers over a link, change the color to yellow.
• When a user clicks on a link, change the color to purple.
• Text decoration: none
• Display: inline block
• Padding 8px 16px
• Set background color: rgb(243, 145, 17)
/* [Link] */
/* Set the default color of the links to black */
body{
background-color: rgb(243, 145, 17);
.nav-link {
color: black;
text-decoration: none; /* Remove the default underline */
padding: 8px 16px; /* Add padding for better visual appearance */
display: inline-block; /* Make links behave like blocks for padding to work */
/* Change color when a user visits the link */
.nav-link:visited {
color: green;
/* Change color on hover */
.nav-link:hover {
color: yellow;
}
/* Change color on click */
.nav-link:active {
color: purple;
2. Link External CSS File
In the <head> section of your HTML document, link the external CSS file.
3. Test in Browser
Save your HTML and CSS files. Open the HTML file in a web browser to see the individual links with the
applied styles.
Quality Criteria: The output should be look like this
OPERATION SHEET-2.5
Operation title: Explore the use of the CSS: hover pseudo-class in different scenarios
Purpose: Change Background Color for Button and Change Border Shape for button
Steps in doing the task
step1: create HTML file ([Link]) and Create an HTML button element with the class name "custom-
button".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[Link]">
<title>CSS Hover Example</title>
</head>
<body>
<!-- HTML button element with the class "custom-button" -->
<button class="custom-button">Hover Me</button>
</body>
</html>
Step2: create css file([Link])
/* Styling for the custom button */
.custom-button {
background-color: greenyellow;
padding: 10px;
font-size: large;
border: none;
cursor: pointer;
/* Hover effect for the custom button */
.custom-button:hover {
background-color: gold;
Step3 link HTML to CSS
In the <head> section of your HTML document, link the external CSS file.
Steps in doing the task
Step1: create HTML file [Link] and ( <div>) element with the class name "border-link".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[Link]">
<title>CSS Hover Example</title>
</head>
<body>
<!-- HTML div element with the class "border-link" -->
<div class="border-link">Hover Me</div>
</body>
</html>
Step2:create CSS file ([Link]) and Apply CSS to set its text color to #40a944, text-transform to
uppercase, border to 4px solid #40a944, border-radius to 10px, and display to inline-block. And hover
pseudo-class to change the text color to #494949, border-radius to 45px, and border color to #494949
when the mouse cursor hovers over the element
/* Styling for the div with the class "border-link" */
.border-link {
color: #40a944;
text-transform: uppercase;
border: 4px solid #40a944;
border-radius: 10px;
display: inline-block;
padding: 10px 20px; /* Add padding for better appearance */
cursor: pointer; /* Add cursor style to indicate clickability */
/* Hover effect for the div with the class "border-link" */
.border-link:hover {
color: #494949;
border-radius: 45px;
border-color: #494949;
Step3 link HTML to CSS
In the <head> section of your HTML document, link the external CSS file.
Quality Criteria: The output should be look like this
OPERATION SHEET 2.6
Operation title: creating webpage layout using HTML and CSS
Purpose: create webpage layout using HTML and CSS
Tool and Equipment: computer browser and text editor
Steps in doing the task
Step1: create Html file [Link] and apply the following
• Create an HTML element for the header with the class "header."
• Create an HTML element for the navigation bar with the class "topnav."
• Create HTML elements for three columns with the class "column."
• Create HTML elements for three columns with the class "column."
• Create HTML elements for left, middle, and right columns with the classes "column side,"
"column middle," and "column side" respectively.
• Create an HTML element for the footer with the class "footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Webpage Layout</title>
</head>
<body>
<!-- Header -->
<div class="header">
<h1>Website Header</h1>
<p>Your website tagline goes here.</p>
</div>
<!-- Navigation Bar -->
<div class="topnav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<!-- Content - 3 Column Layout -->
<div class="row">
<div class="column">
<h2>Column 1</h2>
<p>Some content goes here...</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p>Some content goes here...</p>
</div>
<div class="column">
<h2>Column 3</h2>
<p>Some content goes here...</p>
</div>
</div>
<!-- Unequal Columns -->
<div class="row">
<div class="column side">
<h2>Side Column</h2>
<p>Some content goes here...</p>
</div>
<div class="column middle">
<h2>Main Content</h2>
<p>Main content goes here...</p>
</div>
<div class="column side">
<h2>Side Column</h2>
<p>Some content goes here...</p>
</div>
</div>
<!-- Footer -->
<div class="footer">
<p>© 2023 Your Website Name. All Rights Reserved.</p>
</div>
</body>
</html>
Step2 create CSS file [Link] and apply the following
• Apply CSS styles to header give it a background color of #F1F1F1, center-align text, and add
padding of 20px.
• Apply CSS styles to the navbar container with overflow: hidden and a background color of #333.
• Apply CSS styles to navbar links with float, display, color, text-align, padding, and text-
decoration.
• Change the link color on hover (background-color: #ddd, color: black).
• Apply CSS styles to float the columns left and set the width to 33.33%.
• Create a CSS rule to clear floats after the columns.
• Implement responsive design for screens with a width of 600px or less (change column width to
100%).
• Modify the content section to include unequal column widths.
Apply CSS styles to set the widths as follows: left column (25%), middle column (50%), and right
column (25%).
Implement responsive design to stack the columns on top of each other for screens with a width
of 600px or less.
• Apply CSS styles to footer give it a background color of #F1F1F1, center-align text, and add
padding of 10px.
/* Header */
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
/* Navigation Bar */
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
.topnav a:hover {
background-color: #ddd;
color: black;
/* Content - 3 Column Layout */
.column {
float: left;
width: 33.33%;
.row:after {
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
/* Unequal Columns */
.[Link] {
width: 25%;
.[Link] {
width: 50%;
@media screen and (max-width: 600px) {
.[Link], .[Link] {
width: 100%;
/* Footer */
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
Step3 link html to css
In the <head> section of your HTML document, link the external CSS file.
Quality criteria: Output