logo

የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 1 of 63
Developing complex cascading style sheets 1

Web Development and Database Administration

Level V
Based on March, 2022 Version-I

Module Title: Developing complex cascading style sheets

Module Code: EIS WDDBA M06 0322
Nominal Duration: 90 Hours

Prepared by: Ministry of Labor and Skill

September, 2024
Addis Ababa, Ethiopia

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 2 of 63
Developing complex cascading style sheets 1

Contents

Contents
Acknowledgment .......................................................................................................................................... 4
Acronym ....................................................................................................................................................... 5
Introduction to Module ................................................................................................................................. 6
Unit one: CSS requirements Determination ............................................................................................. 7
1.1. Legislative and Organizational Standards ..................................................................................... 8
1.2. Confirming User Style Requirements ......................................................................................... 11
1.3. Assessing and Selecting Suitable Markup Languages ................................................................ 15
Self-check 1.1 ............................................................................................................................................. 16
Unit Two: CSS and web pages Development.......................................................................................... 18
2.1. Creating CSS ............................................................................................................................... 19
2.2. lay out and position document elements of web page................................................................. 20
2.3. Styling Web Pages ...................................................................................................................... 30
Self-Check 2.1 ............................................................................................................................................ 36
Operation sheet 2.1 : Basic Structure of HTML .................................................................................... 38
Operation sheet 2.2 : Header Section - Navigation ................................................................................ 39
Operation sheet 2.3 : Hero Section (Main Introduction)....................................................................... 40
Operation sheet 2.4 : Product Section (Display Products) .................................................................... 41
Operation sheet 2.5 : Footer Section (Footer Content) .......................................................................... 42
Operation sheet 2.6 : Base Styles (General Page Setup) ........................................................................ 43
Operation sheet 2.7 : Header Section Styles ........................................................................................... 44
Operation sheet 2.8 : Hero Section Styling ............................................................................................. 45
Operation sheet 2.8 : Product Section Styling ........................................................................................ 46
Operation sheet 2.9 : Footer Section Styling .......................................................................................... 47
Operation sheet 2.10 : Responsive Design with Media Queries ............................................................ 48
LAP Test ..................................................................................................................................................... 49
Unit Three: Test and validate CSS and web pages ................................................................................ 50
Approval Name: Signature: Date:
PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 3 of 63
Developing complex cascading style sheets 1

3.1. Identifying and Resolving Web Page and CSS Issues ................................................................ 51
3.2. Testing website in various browsers and devices ....................................................................... 53
3.3. Rectify browser and device differences ...................................................................................... 55
3.4. Confirming Requirements and Obtaining Sign-Off .................................................................... 57
Self-Check 3.1 ............................................................................................................................................ 58
Reference ................................................................................................................................................... 61
Online References ............................................................................................................................. 61

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 4 of 63
Developing complex cascading style sheets 1

Acknowledgment

The Ministry of Labor and Skills (MoLS) would like to express its gratitude and appreciation to
the instructors and experts from regional TVT bureaus, TVT colleges, and industry practitioners
who contributed their expertise and experience in preparing the training module for Web
Development and Database.

Once again, our heartfelt thanks go out to the entire team for their unwavering commitment in
developing this training module for digital infrastructure services short term training. Your
dedication and expertise have laid the foundation for future vocational education and training
endeavors.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 5 of 63
Developing complex cascading style sheets 1

Acronym

 WCAG: Web Content Accessibility Guidelines

 GDPR: General Data Protection Regulation

 HTML: Hypertext Markup Language

 XML: Extensible Markup Language

 CSS: Cascading Style Sheets

 DOM: Document Object Model

 UI: User Interface

 UX: User Experience

 HTTP: Hypertext Transfer Protocol

 HTTPS: Hypertext Transfer Protocol Secure

 CSP: Content Security Policy

 SEO: Search Engine Optimization

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 6 of 63
Developing complex cascading style sheets 1

Introduction to Module
This document serves as a comprehensive guide to developing advanced Cascading Style Sheets
(CSS) for modern web design and development. It is structured into three units that cover
essential aspects of CSS creation and implementation. The first unit focuses on determining CSS
requirements, including compliance with legislative and organizational standards, assessing user
needs, and selecting appropriate markup languages. The second unit delves into designing and
styling web pages using advanced CSS techniques, responsive layouts, and frameworks. The
third unit emphasizes testing and validating CSS and web pages, ensuring cross-browser
compatibility, accessibility, and adherence to user requirements. This guide equips developers
with the knowledge and skills to create functional, aesthetically pleasing, and user-friendly
websites that meet industry standards.
This module covers the units:
 CSS requirements Determination
 CSS and web pages Development
 Test and validate CSS and web pages
Learning Objective of the Module
 Determine CSS requirements
 Develop CSS and web pages
Test and validate CSS and web pages
Module Instruction
For effective use this modules trainees are expected to follow the following module instruction:
1. Read the information written in each unit
2. Accomplish the Self-checks at the end of each unit
3. Perform Operation Sheets which were provided at the end of units
4. Do the “LAP test” giver at the end of each unit and

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 7 of 63
Developing complex cascading style sheets 1

Unit one: CSS requirements Determination

This unit is developed to provide you the necessary information regarding the following content
coverage and topics:
 Legislative and Organizational Standards
 Confirming User Style Requirements
 Assessing and Selecting Suitable Markup Languages

This unit will also assist you to attain the learning outcomes stated in the cover page. Specifically,
upon completion of this learning guide, you will be able to:

 Identifying and confirming applicable legislative and organizational standards and

procedures applicable to CSS development
 Identifying and reviewing user style requirements
 Evaluating and selecting applicable markup language according to technical
requirements

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 8 of 63
Developing complex cascading style sheets 1

1.1. Legislative and Organizational Standards

When developing a website or web application, ensuring compliance with legislative and
organizational standards is essential to deliver a product that is secure, ethical, and professional.
Legislative standards are legal requirements that developers must follow to avoid fines, lawsuits,
and reputation damage. For example, accessibility guidelines such as the Web Content
Accessibility Guidelines (WCAG) ensure that websites are usable by people with disabilities,
including those relying on screen readers or alternative navigation tools. Meeting these standards
may involve adding descriptive alt text to images, ensuring sufficient color contrast, and making
navigation operable via keyboard.

Data protection laws, such as the General Data Protection Regulation (GDPR), govern how
websites handle personal information. Developers must design websites that provide transparent
privacy policies and mechanisms to obtain user consent for cookies or data collection.
Intellectual property compliance is another critical aspect, requiring developers to use
copyrighted materials, such as images or videos, with proper permissions or licenses.

Organizational standards, on the other hand, refer to the internal policies or branding
requirements set by the organization commissioning the website. This may include using specific
colors, logos, and typography that align with the organization's identity. For instance, an
organization might have a branding guideline that mandates the use of a blue and white color
scheme and a sans-serif font across all its digital platforms. Content standards ensure that
information is presented in a tone consistent with the organization’s voice, whether formal or
casual. Ensuring compliance with these legislative and organizational standards helps create a
website that is both professional and trustworthy.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 9 of 63
Developing complex cascading style sheets 1

Case Study: Determining CSS Requirements for XYZ Company

Scenario

XYZ Company, a local retail business, seeks to create a website that reflects its brand identity
and enhances customer engagement. The management has outlined key objectives for the
project:

 The website must incorporate the company’s blue and white branding.
 It should be user-friendly and mobile-responsive.
 It must comply with accessibility standards and data protection laws.

Steps in Determining CSS Requirements

1. Research Standards: The team reviews legal requirements such as accessibility

guidelines and data protection laws to ensure compliance. Additionally, they study the
company’s branding guide to understand specific requirements for colors, typography,
and logos.
2. Gather User Requirements: Through surveys and focus groups, the team identifies
customer preferences, such as the desire for a clean design, fast loading speeds, and
mobile compatibility. Competitor analysis helps identify successful design patterns in the
retail industry.
3. Select Markup Language: HTML5 is chosen for its ability to support responsive
designs and modern CSS features. XML is used for managing product metadata.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 10 of 63
Developing complex cascading style sheets 1

The team documents the CSS requirements, including a responsive layout, a blue and white color
scheme, and accessibility features such as high contrast for better readability. A prototype
wireframe is created, showcasing the homepage with a clear navigation bar, featured product
sections, and a footer containing contact information. These elements align with both the user
requirements and the company’s branding.

In the case of XYZ Company, the legislative standards include compliance with local data
protection laws and accessibility guidelines, while the organizational standards dictate the use of
a blue and white color scheme to reflect the company’s branding. The team also ensures that all
content aligns with the professional tone expected by the company’s stakeholders.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 11 of 63
Developing complex cascading style sheets 1

1.2. Confirming User Style Requirements

Identifying and reviewing user style requirements is a critical step in creating websites that are
visually appealing and functional. User requirements are typically informed by the target
audience's preferences and behavior. Developers must consider the demographics, cultural
background, and technical proficiency of the users. For instance, a website targeting a younger
audience might incorporate vibrant colors and dynamic layouts, while a corporate website might
favor clean, professional designs.
Understanding user requirements often involves collecting feedback through surveys, interviews,
or focus groups. Reviewing competitors’ websites can provide valuable insights into industry
trends and user expectations. This process can involve tools such as web analytics platforms to
assess traffic patterns, heat maps to analyze user interactions, and design galleries for inspiration.
Additionally, conducting comparative analysis on layout structures, color schemes, typography,
and navigation can reveal design patterns that resonate with target audiences. For instance, tools
like SimilarWeb or SEMrush can help examine competitors’ traffic sources and user
engagement, providing a data-driven foundation for crafting CSS requirements. For example, an
e-commerce site might observe that users prefer minimalistic product pages with high-quality
images and intuitive navigation.

Fig1.1. SimilarWebpage

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 12 of 63
Developing complex cascading style sheets 1

Balancing aesthetics and usability is crucial; while a visually striking design captures attention, it
should not compromise functionality. A poorly structured navigation menu, no matter how
beautiful, will frustrate users and lead to a high bounce rate.

The interplay between aesthetics and functionality is a delicate balance in web design. While a
visually appealing website can attract users, a poorly designed interface can quickly drive them
away. Let's explore some common conflicts and strategies to resolve them:

 Common Conflicts:
A. Excessive Visual Effects:
 Conflict: Overuse of animations, transitions, and complex layouts can slow down
page load times, frustrate users, and hinder accessibility.
 Solution: Prioritize performance and user experience. Use animations sparingly
and ensure they enhance, not distract from, the core functionality. Consider using
CSS animations for subtle effects and JavaScript for more complex interactions.
B. Complex Typography:
 Conflict: While unique fonts can add personality, they may not be accessible to
all users or render correctly across different devices.
 Solution: Choose fonts that are clear, legible, and widely supported. Use a limited
number of font families to maintain consistency. Ensure sufficient font size and
line height for readability.
C. Intricate Layouts:
 Conflict: Complicated layouts can be visually appealing but may confuse users
and hinder navigation.
 Solution: Prioritize a clean and intuitive layout. Use a grid system to organize
content effectively. Avoid excessive use of layers and overlapping elements.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 13 of 63
Developing complex cascading style sheets 1

D. Non-Standard Color Schemes:

 Conflict: While bold color choices can make a website stand out, they may not be
accessible to color-blind users or those with visual impairments.
 Solution: Adhere to color contrast guidelines to ensure readability. Use a limited
color palette and consider using a color contrast checker tool.

Strategies for Balancing Aesthetics and Functionality:

A. User-Centered Design:
 Empathize with Users: Conduct user research to understand their needs,
preferences, and pain points.
 Prioritize Core Functionality: Ensure that essential features are easy to find and
use.
 Test and Iterate: Regularly test designs with real users to identify usability
issues and make necessary adjustments.
B. Mobile-First Approach:
 Responsive Design: Create websites that adapt to different screen sizes and
devices.
 Touch-Friendly Interactions: Design intuitive touch interactions for mobile
users.
 Optimized Performance: Ensure fast load times and smooth performance on
mobile devices.
C. Accessibility:
 WCAG Guidelines: Adhere to Web Content Accessibility Guidelines to make
your website accessible to people with disabilities.
 Alternative Text: Provide alternative text for images to assist screen readers.
 Keyboard Navigation: Ensure that all website elements can be accessed using a
keyboard.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 14 of 63
Developing complex cascading style sheets 1

D. Performance Optimization:
 Minimize HTTP Requests: Combine and minify CSS and JavaScript files.
 Optimize Images: Compress images without sacrificing quality.
 Leverage Browser Caching: Enable browser caching to reduce load times for
returning visitors.

By carefully considering these factors, you can create visually stunning websites that are also
highly functional and user-friendly.

In the XYZ Company case study, the team conducts a user survey to understand potential
customers’ preferences. Results show that users value fast-loading pages, simple navigation, and
a responsive design. Competitor analysis reveals that successful retail websites often utilize
white space, modern typography, and high-quality visuals to create a premium look. These
findings shape the design strategy for XYZ Company’s website, ensuring it meets user
expectations while maintaining functionality.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 15 of 63
Developing complex cascading style sheets 1

1.3. Assessing and Selecting Suitable Markup Languages

CSS operates in conjunction with markup languages like HTML and XML to define the structure
and presentation of web content. Selecting the right markup language is essential to ensure
compatibility with CSS and achieve the desired functionality. HTML5 is the most commonly
used markup language for web development due to its semantic elements, multimedia support,
and compatibility with modern CSS features. Elements like <header>, <article>, and <footer>
make HTML5 ideal for creating structured and accessible content.

XML is another markup language often used in situations where data needs to be stored and
transported in a structured format. For example, an e-commerce website might use XML to
manage inventory data, while HTML5 is used to present the content to the user. Selecting a
markup language depends on the technical requirements of the project and the compatibility of
the language with existing frameworks or systems.
In the XYZ Company scenario, the development team chooses HTML5 for its flexibility and
compatibility with modern design techniques. The semantic elements of HTML5 help improve
the website’s search engine optimization (SEO) and accessibility. XML is used to store metadata
about the products, such as pricing and descriptions, which is then dynamically loaded onto the
web pages.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 16 of 63
Developing complex cascading style sheets 1

Self-check 1.1
I. Read the statement carefully and if the statement is True say TRUE and If the
statement is false say FALSE.
1. Accessibility standards like WCAG are optional for website development.
2. Intellectual property compliance involves obtaining permissions for using copyrighted
materials on a website.
3. Using a limited color palette helps improve both aesthetics and accessibility.
4. HTML5 is not compatible with modern CSS features.
5. Alternative text for images is essential for assisting screen readers in accessing visual
content.
II. From the given alternatives choose the best answer for the statement
1. What is the purpose of data protection laws like GDPR in web development?
a. To enforce faster website loading speeds
b. To govern the handling of personal information
c. To promote the use of intellectual property without permissions
d. To standardize typography and color schemes
2. Which tool can be used to analyze user interaction on a webpage?
a. BrowserStack
b. Heat Maps
c. Photoshop
d. GitHub
3. What is a major benefit of using HTML5 in web development?
a. Ability to manage large data sets
b. Compatibility with semantic elements and modern CSS features
c. Enforcing strict color schemes
d. Replacing XML for storing metadata

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 17 of 63
Developing complex cascading style sheets 1

4. What does adhering to WCAG guidelines ensure?

a. Enhanced performance optimization
b. Compatibility with older web browsers
c. Website accessibility for users with disabilities
d. Improved intellectual property protection
5. How can a website achieve a professional tone and consistent branding?
a. By using animations and bold color schemes
b. By adhering to organizational content and design standards
c. By prioritizing user preferences only
d. By avoiding accessibility features like alt text
III. Explain the following
1. Explain the importance of balancing aesthetics and functionality in web design.
2. Discuss the significance of complying with accessibility and data protection standards in
website development.
3. How does competitor analysis and user research influence the design strategy for a
website?

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 18 of 63
Developing complex cascading style sheets 1

Unit Two: CSS and web pages Development

This unit is developed to provide you the necessary information regarding the following
content coverage and topics:
 Creating CSS
 lay out and position document elements of web page
 Styling Web Pages

This guide will also assist you to attain the learning outcomes stated in the cover page.
Specifically, upon completion of this learning guide, you will be able to:

 Create CSS according to technical requirements

 Design CSS layout and Responsive page
 Position document elements using advanced CSS
 Apply new release of CSS rules.
 Know CSS frameworks Bootstrap
 Apply style sheets to applicable web pages in a website

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 19 of 63
Developing complex cascading style sheets 1

2.1. Creating CSS

CSS is the backbone of web page styling and layout, defining how a website will appear on
users’ screens. After determining the technical requirements in Unit 1, such as color schemes,
typography, accessibility features, and layout, you will use CSS to meet these requirements.

The process starts with translating the technical specifications into CSS code. This includes
creating styles for page structure (e.g., headers, footers, navigation), typography (e.g., font
families, sizes, and spacing), and colors (e.g., background colors, text colors, and link colors).
For example, if the design brief specifies that a website should use a light blue background with
dark blue text; CSS can be written to apply these colors throughout the page.

When you make the above concept there are some key Concepts:

a. Selectors: CSS uses selectors to target specific HTML elements. These can be
element selectors (e.g., div, p), class selectors (e.g., .header, .menu), or ID
selectors (e.g., #main, #footer). Students must understand the importance of using
the correct selectors to apply styles accurately.
b. Properties and Values: CSS properties define the style of an element (e.g., color,
font-size, margin), and values specify the exact style (e.g., red, 16px, 20px). The
combination of properties and values creates the final design.
c. Inheritance and Cascading: CSS allows properties to be inherited from parent
elements to child elements, but some properties (like color, font-size) may need to
be overridden at the child level. Understanding how cascading works helps ensure
the correct styles are applied.
d. By creating CSS according to technical requirements, you can ensure that the web
designs meet specific expectations and guidelines, delivering functional, aesthetic,
and user-friendly websites.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 20 of 63
Developing complex cascading style sheets 1

2.2. lay out and position document elements of web page

Styling and positioning elements on a webpage is an essential skill for web developers. In this
section, we will cover advanced CSS techniques for structuring a web page. Students will learn
how to control element positioning, apply complex layouts, and use responsive design principles
to ensure that websites are functional across all device types.

2.1.1. Introduction to CSS Layout and Responsive Page Design

Responsive design refers to creating web pages that adjust smoothly to different screen sizes and
devices (e.g., desktops, tablets, smartphones). This is achieved by using flexible grids, media
queries, and viewport-relative units. The following are CSS Layout Techniques.

A. Box Model: All HTML elements can be viewed as boxes, and understanding the box
model (margins, borders, padding, and content) is crucial for layout control. Students will
learn how to modify the size and position of elements using the box model.
B. Flexbox: The Flexbox layout system allows for one-dimensional layout management
(either horizontally or vertically). It enables elements to grow, shrink, and align
efficiently within their container. This method is useful for creating layouts that adjust
based on the available space, such as responsive navigation menus, grids, and galleries.
C. CSS Grid: CSS Grid is a two-dimensional layout system that enables developers to
design complex layouts with ease. It allows for both rows and columns to be created,
offering more control over the positioning of elements than Flexbox. For example,
students can use Grid to create magazine-style layouts or multi-column designs.
D. Media Queries: Media queries are a key feature of responsive design. They allow
developers to apply different styles based on the characteristics of the device, such as
screen width, height, or orientation. For example, a website might display a multi-column
layout on desktop screens but switch to a single-column layout on mobile devices.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 21 of 63
Developing complex cascading style sheets 1

Here’s a simple layout that adjusts its design depending on the screen size.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout</title>
<style>
/* Default styles for larger screens (desktops) */
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
justify-content: space-between;
margin: 20px;
}
.box {
width: 30%;
background-color: #4CAF50;
padding: 20px;
color: white;
text-align: center;

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 22 of 63
Developing complex cascading style sheets 1

}
/* Media Query for tablets and mobile devices */
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
}
.box {
width: 80%;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 23 of 63
Developing complex cascading style sheets 1

The code Explanation is On larger screens, the boxes are displayed side by side using flexbox.
When the screen width is 768px or smaller (for tablets and mobile), the boxes stack vertically
and take up 80% of the width of the container.

2.1.2. Positioning Document Elements Using Advanced CSS

CSS provides multiple methods to position elements on a webpage. Mastering these positioning
techniques allows students to control the precise location of elements, which is essential for
complex web layouts. Here are Positioning Types in CSS:

A. Static Positioning: By default, elements are positioned statically, meaning they flow in
the normal document order. This is the default behavior, but it’s often not sufficient for
complex layouts.
B. Relative Positioning: The position: relative; property allows elements to be positioned
relative to their normal position. This is useful for slight adjustments of elements, such as
nudging a box slightly to the left or top without affecting the layout of other elements.
C. Absolute Positioning: The position: absolute; property removes the element from the
normal document flow and positions it relative to its closest positioned ancestor. This is
often used for dropdowns, modals, or fixed elements that need to float above the rest of
the content.
D. Fixed Positioning: The position: fixed; property allows elements to be fixed in place
relative to the browser window, even when the user scrolls. This is commonly used for
sticky navigation bars or elements that need to stay visible at all times, such as a floating
call-to-action button.
E. Sticky Positioning: The position: sticky; property is a hybrid of relative and fixed
positioning. It allows an element to behave like a relatively positioned element until the
user scrolls past it, at which point it becomes fixed to the viewport.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 24 of 63
Developing complex cascading style sheets 1

Example of Advanced Positioning with absolute and relative positioning:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Positioning</title>
<style>
/* Positioning of the parent container */
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightblue;
}
/* Absolute positioning of the child element inside the container */
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;}

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 25 of 63
Developing complex cascading style sheets 1

/* Another box with absolute positioning */

.box2 {
position: absolute;
bottom: 20px;
right: 20px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box2"></div>
</div>
</body>
</html>
Explanation:
 The .container is set to position: relative to create a reference for the absolutely
positioned .box and .box2 elements.
 The .box is positioned 50px from the top and 50px from the left of its containing
.container element.
 The .box2 is positioned 20px from the bottom and 20px from the right of the container.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 26 of 63
Developing complex cascading style sheets 1

2.1.3. Applying New Release of CSS Rules

CSS is constantly evolving, with new features and updates being released in newer versions. For
example, CSS3 introduced a wide range of new features, such as rounded corners, gradients, and
transitions. More recently, the introduction of features like CSS Variables, Grid Layout, and
the clamp() function have enhanced CSS's flexibility and power.

You must stay up-to-date with the latest CSS specifications to take full advantage of these
features and improve the functionality of their web designs. Some important modern CSS
features include:

A. CSS Variables: Variables (also called custom properties) allow for reusable values in
CSS. By defining a variable like --primary-color, students can use it throughout their CSS
file and change its value in one place, making large projects easier to manage.
B. CSS Grid and Flexbox Enhancements: New capabilities in Grid and Flexbox allow for
even more advanced and flexible layouts, such as auto-placement in Grid and alignment
in Flexbox.
C. CSS Transitions and Animations: These allow developers to animate changes in
property values, creating smoother and more engaging user interactions.

By understanding and applying new CSS rules, students will be able to leverage the full power of
modern web design and stay competitive in the ever-changing landscape of front-end
development.

Example of Using CSS Grid and clamp() Function:

<!DOCTYPE html>
<html lang="en">
<head>

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 27 of 63
Developing complex cascading style sheets 1

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid and clamp()</title>
<style>
/* Using CSS Grid to create a simple layout */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.box {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
/* Using clamp() to adjust font-size */
h1 {
font-size: clamp(1rem, 5vw, 2rem);
}
</style>
</head>
<body>

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 28 of 63
Developing complex cascading style sheets 1

<div class="container">
<div class="box">
<h1>Box 1</h1>
</div>
<div class="box">
<h1>Box 2</h1>
</div>
<div class="box">
<h1>Box 3</h1>
</div>
</div>
</body>
</html>

2.1.4. Introducing CSS Frameworks (Bootstrap or Other)

CSS frameworks are pre-built collections of CSS code that allow developers to quickly design
and style websites without starting from scratch. Frameworks like Bootstrap, Tailwind CSS, or
Foundation provide a set of predefined styles for common web elements such as buttons, forms,
navigation bars, and grids. These frameworks also promote best practices, making it easier to
create responsive, mobile-first websites.

Bootstrap is one of the most widely used CSS frameworks, offering a robust set of components
and utilities. It includes predefined styles for buttons, typography, navigation, and form
elements, as well as a responsive grid system that automatically adjusts to various screen sizes.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 29 of 63
Developing complex cascading style sheets 1

By using a framework like Bootstrap, you can accelerate the development process, focus on
custom styling, and ensure that their websites are compatible with modern browsers and devices.
However, they should also understand the importance of customizing the framework’s default
styles to fit their project’s specific needs and branding guidelines.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 30 of 63
Developing complex cascading style sheets 1

2.3. Styling Web Pages

In this section, you will learn how to apply the styles defined in CSS to various web pages in a
website. This process involves linking external CSS files to HTML documents, organizing the
stylesheets efficiently, and ensuring that the CSS is applied consistently across all pages.

A. Linking CSS to HTML: To apply CSS to HTML, students will link an external CSS file
to their HTML files using the <link> tag in the <head> section. This practice allows
developers to separate content from design, making the website easier to maintain.
Students will also learn about inline styles and internal styles, although these methods are
less commonly used for large projects.
 External CSS

External CSS is the most common method of applying styles to a web page. This involves
creating a separate .css file that contains all of the CSS code and linking it to an HTML file using
the <link> tag. Here’s an example of how an external stylesheet is linked to an HTML file:

<head>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

 rel="stylesheet": This specifies that the linked file is a stylesheet.

 type="text/css": This defines the type of the linked file as CSS (this is now optional as
browsers assume CSS by default).
 href="styles.css": This points to the location of the external CSS file.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 31 of 63
Developing complex cascading style sheets 1

 Internal CSS

Internal CSS is written directly within the HTML file inside the <style> tag within the <head>
section of the document. This method is commonly used for smaller projects or when quick
styling is required.

Example:

<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>

 Inline CSS
Inline CSS involves applying styles directly to an HTML element via the style attribute. It is
typically used for quick styling of individual elements.

Example:
<p style="color: blue; font-size: 18px;">This is a styled paragraph.</p>

B. Organizing Stylesheets for Multiple Pages

When creating a website with several pages, it's crucial to manage your CSS files and organize
them efficiently. This is especially important for larger websites, where the same CSS might be
applied across many pages. There are a few best practices for managing CSS files in such cases:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 32 of 63
Developing complex cascading style sheets 1

 Global Styles
Global styles apply to the entire website and are usually placed in a central external CSS file.
This file defines the basic structure and common elements (such as the header, footer,
typography, and layout), ensuring a consistent look across all pages.

For example, a global stylesheet (styles.css) may contain the following:

/* Global Styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
h1, h2, h3 {
color: #333;
}
This stylesheet will be linked to all pages on the website, providing consistent styling for the
body, headings, and common elements.

 Page-Specific Styles

In addition to the global styles, you may need to apply page-specific styles for individual pages.
These styles are often placed in separate CSS files that are only linked to the specific HTML
page that requires them.

For example, a page called about.html might have a corresponding stylesheet about.css that
contains unique styles for the About Us page:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 33 of 63
Developing complex cascading style sheets 1

/* about.css */

#team-photo {

border-radius: 50%;

width: 150px;

In HTML

<head>

<link rel="stylesheet" type="text/css" href="about.css">

</head>

 Modular CSS

For larger projects, it’s a good practice to break the CSS into smaller, modular files. This
technique allows you to maintain better organization and makes the styles easier to update and
debug. Common modular stylesheets include:

Base Styles: This file might include general reset styles, typography settings, or default margins
and padding for all elements.

Layout Styles: Defines how the layout elements like headers, footers, and sidebars behave. This
file could contain Flexbox or Grid layouts.

Component Styles: For reusable components like buttons, navigation bars, and form controls.

Theme Styles: This file could contain color schemes, background images, and font styling for a
specific theme.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 34 of 63
Developing complex cascading style sheets 1

Using a modular CSS approach, the structure might look like this:

/css

/base.css

/layout.css

/components.css

/theme.css

/about.css

Each file is then linked in the HTML document, ensuring that only the necessary files are loaded
on each page.

C. Ensuring Consistency Across Pages

To ensure that the same styles are applied across all web pages, it’s important to maintain
consistency in the following areas:

 Linking the Correct CSS File: Make sure that each HTML page is linking to the correct
CSS file(s). If different pages require different styles, each page should link to its specific
stylesheet, as well as any common global styles.

 Maintaining Consistent Naming Conventions: Consistency in naming classes, IDs, and

variables ensures that the design is uniform across the entire website. For example, if you
have a class called .btn-primary for buttons in the global stylesheet, use that same class
across all pages when defining primary buttons.

 CSS Reset or Normalize: Using a CSS reset (like Normalize.css) ensures that the default
styling of HTML elements is consistent across different browsers. This prevents

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 35 of 63
Developing complex cascading style sheets 1

unwanted variation in element styling (like margin or padding) caused by browser

defaults.

D. Best Practices for Applying CSS in Large Websites

 Avoid Inline Styles: Unless absolutely necessary, avoid using inline styles. Rely on
external or internal stylesheets for maintainability and scalability.
 Minify CSS for Production: Before deploying a website to production, minify the
CSS files to reduce their size and improve load times. Tools like CSSMinifier or
build tools like Webpack can automate this process.
 Use Version Control: For large projects, it’s essential to use version control (e.g.,
Git). This allows you to track changes, collaborate with others, and easily manage
multiple versions of the website and its CSS.
 Optimize for Performance: Apply styles in a way that minimizes browser reflows
and repaints, which can negatively impact page performance. For example, avoid
using complex CSS selectors and excessive nesting.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 36 of 63
Developing complex cascading style sheets 1

Self-Check 2.1
I. Read the statement carefully and if the statement is True say TRUE and If the
statement is false say FALSE.
1. CSS properties and values are used together to define the appearance of elements on a
webpage.
2. Inline CSS is the most efficient method for styling large websites.
3. Media queries allow developers to apply different styles based on device characteristics
like screen size.
4. The position: sticky; property allows elements to remain fixed relative to the
browser window even when scrolling.
5. Using modular CSS is a good practice for managing stylesheets in large projects.
II. From the given alternatives choose the best answer for the statement
1. Which of the following is NOT a CSS positioning method?
a. Static
b. Fixed
c. Relative
d. Dynamic
2. What is the primary advantage of using external CSS files?
a. Easier debugging for individual elements
b. Allowing styles to be applied to multiple pages consistently
c. Faster page load times
d. Avoiding the use of class and ID selectors
3. What is the purpose of the CSS box model?
a. To create dynamic animations on a webpage
b. To organize elements into a grid layout
c. To define the padding, margin, border, and content of elements
d. To style navigation menus

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 37 of 63
Developing complex cascading style sheets 1

4. What does the following media query achieve?

css
Copy code
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
}
}
a. Adjusts layout for larger screens
b. Creates a grid layout
c. Modifies the layout for screens smaller than 768px
d. Disables CSS properties on mobile devices
5. Which modern CSS feature allows developers to reuse values throughout a CSS file?
a. CSS Transitions
b. CSS Variables
c. CSS Grid
d. Media Queries

III. Explain the following

1. Explain the role of the CSS box model in webpage layout and how it impacts the design of
elements.
2. Discuss the importance of using external and modular CSS for managing large web
development projects.
3. Describe how responsive design techniques like media queries and CSS Grid enhance user
experience on different devices.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 38 of 63
Developing complex cascading style sheets 1

Operation sheet 2.1 : Basic Structure of HTML

Operation Title: Performing a basic HTML

Purpose: To Setting up the foundation for advanced CSS

Steps in doing the task

1. Create <!DOCTYPE html> declaration

2. Create <html>, <head>, and <body> tags.
3. Including a stylesheet link using <link rel="stylesheet" href="style.css">

Quality criteria:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 39 of 63
Developing complex cascading style sheets 1

Operation sheet 2.2 : Header Section - Navigation

Operation Title: Creating Header Section - Navigation

Purpose: To create the header with logo and navigation.

Steps in doing the task

1. Create a break down header element.

2. Create a navigation menu with <nav> and <ul>.
3. Add a logo image with <img> tag and explain alt text.
4. Created a link using <a> tags.

Quality criteria:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 40 of 63
Developing complex cascading style sheets 1

Operation sheet 2.3 : Hero Section (Main Introduction)

Operation Title: Creating hero Section (Main Introduction)

Purpose: To create hero section with a heading, paragraph, and CTA button.

Steps in doing the task

1. Develop hero section to attract attention.

2. Include headings (<h1>) and paragraphs (<p>).
3. Add a call-to-action (CTA) button using the <a> tag.

Quality criteria:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 41 of 63
Developing complex cascading style sheets 1

Operation sheet 2.4 : Product Section (Display Products)

Operation Title: Displaying a Product

Purpose: To show how to display a list of products using individual product items

Steps in doing the task

1. Create a product section with the <section> tag.

2. Add individual products inside <div class="product-item">.
3. Include images and adding links to product details.

Quality criteria:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 42 of 63
Developing complex cascading style sheets 1

Operation sheet 2.5 : Footer Section (Footer Content)

Operation Title: Creating a footer

Purpose: To add footer with basic copyright information.

Steps in doing the task

1. Use the <footer> tag to place footer content.

2. Include <p> tag for text and copyright notation.

Quality criteria:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 43 of 63
Developing complex cascading style sheets 1

Operation sheet 2.6 : Base Styles (General Page Setup)

Operation Title: Creating a base style

Purpose: To set up basic styles for the page (margin reset, font setup).

Steps in doing the task

2.1.5. Use the universal selector * to reset styles across all elements.
2.1.6. Use the box-sizing: border-box rule for more predictable layout behavior.
2.1.7. Style the body with a base font, line height, background color, and text color.

Quality criteria:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 44 of 63
Developing complex cascading style sheets 1

Operation sheet 2.7 : Header Section Styles

Operation Title: Creating a header section

Purpose: To Style the header, navigation, and logo.

Steps in doing the task

1. Style the header background color and padding.

2. Use flexbox to align navigation items horizontally.
3. Add hover effects to navigation links.

Quality criteria:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 45 of 63
Developing complex cascading style sheets 1

Operation sheet 2.8 : Hero Section Styling

Operation Title: Creating Hero Section Styling

Purpose: To Style the hero section with heading, text, and CTA button.

Steps in doing the task

1. Style the CTA button with colors and padding.

2. Add hover effects for the CTA button.

Quality criteria:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 46 of 63
Developing complex cascading style sheets 1

Operation sheet 2.8 : Product Section Styling

Operation Title: Creating Product Section Styling

Purpose: To Style the products using CSS Grid and card layout.

Steps in doing the task

1. Use grid-template-columns to create a grid for the product section.

2. Style the product items with padding, box-shadow, and text alignment.

3. Add hover effects to the product items for interactivity.

Quality criteria:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 47 of 63
Developing complex cascading style sheets 1

Operation sheet 2.9 : Footer Section Styling

Operation Title: Creating Footer Section Styling

Purpose: To Style the footer with a background color and text alignment.

Steps in doing the task

1. Style the footer with a background color, padding, and text alignment.

Quality criteria:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 48 of 63
Developing complex cascading style sheets 1

Operation sheet 2.10 : Responsive Design with Media Queries

Operation Title: Creating Responsive Design with Media Queries

Purpose: To Make the layout responsive to different screen sizes..

Steps in doing the task

1. Use @media query to adjust styles based on the screen width.

2. Adjust the navigation menu and product grid for smaller screens.

Quality criteria:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 49 of 63
Developing complex cascading style sheets 1

LAP Test
Name: ___________________ Date: ________________

Time started: ______________ Time finished: __________

Instruction:

You will design and implement an e-commerce web page that is responsive and visually appealing. The
project focuses on applying advanced CSS techniques for layout, styling, and responsiveness to create a
user-friendly shopping experience across various devices.

Task 1: Create the Base HTML Structure

Task 2: Design the Layout Using CSS

Task 3: Create a Responsive Navigation Menu

Task 4: Style the Product Section

Task 5: Implement Responsive Design

Task 6: Final Touches and Testing

At the end you are expected to deliver:

1. A functional HTML file linked to an external CSS file.

2. A visually appealing and responsive web page showcasing:

o A styled navigation menu

o A grid-based product section

o A footer section

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 50 of 63
Developing complex cascading style sheets 1

Unit Three: Test and validate CSS and web pages

This unit is developed to provide you the necessary information regarding the following
content coverage and topics:

 Identifying and Resolving Web Page and CSS Issues

 Testing website in various browsers and devices
 Rectify browser and device differences
 User Requirement verification and sign-off
This guide will also assist you to attain the learning outcomes stated in the cover page.
Specifically, upon completion of this learning guide, you will be able to:
 Identifying and Resolving Web Page and CSS Issues
 Testing website in various browsers and devices
 Rectify browser and device differences and confirm accessibility of website
 Confirm user requirements are met and obtain sign-off from required personnel

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 51 of 63
Developing complex cascading style sheets 1

3.1. Identifying and Resolving Web Page and CSS Issues

Debugging is the systematic process of identifying, isolating, and fixing issues within web pages
and stylesheets. It involves:

 Error Identification: Recognizing anomalies such as misaligned layouts, broken links, or

visual discrepancies.
 Root Cause Analysis: Tracing the origin of the error, which could stem from incorrect
CSS syntax, unsupported properties in certain browsers, or missing files.
 Resolution: Modifying code to correct the issue and testing the solution.

Modern debugging relies heavily on browser developer tools, which provide capabilities like
DOM inspection, CSS modification, and performance profiling.

Debugging Example

Imagine the navigation menu on the XYZ Company website appears misaligned on mobile
devices. Using debugging tools, we can:

1. Open the page in Google Chrome.

2. Right-click on the navigation menu and select Inspect.
3. Use the Elements tab to inspect the HTML and associated CSS.
4. Adjust the CSS directly in the developer tools to identify the solution.

@media (max-width: 768px) {

header .nav ul {
Approval Name: Signature: Date:
PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 52 of 63
Developing complex cascading style sheets 1

flex-direction: column;
text-align: center;
}
}

The above code modifies the navigation menu’s layout for smaller screens.

Cyber security in Web Development

Security measures in web development aim to protect both the website and its users. Theoretical
components include:

1. Encryption: Ensuring data transmission security using HTTPS.

2. Input Validation: Preventing vulnerabilities like SQL injection and cross-site scripting
(XSS) by sanitizing user inputs.
3. Content Security Policies (CSPs): Restricting the sources from which the browser can
load content to prevent malicious scripts.

Example: Implementing a CSP in HTML:

<meta http-equiv="Content-Security-Policy" content="default-src 'self';">

This CSP ensures that only resources from the same domain are allowed to load.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 53 of 63
Developing complex cascading style sheets 1

3.2. Testing website in various browsers and devices

Cross-Browser Testing Concepts

Different browsers interpret code differently due to variations in rendering engines (e.g., Blink
for Chrome, WebKit for Safari). Testing ensures consistent functionality and design across these
platforms. The process includes:

 Baseline Testing: Verifying that essential features work across all target browsers.
 Regression Testing: Ensuring that new updates do not break existing functionality.
 Performance Testing: Evaluating load times and responsiveness.

Device Compatibility Testing

With the proliferation of devices, responsive design is pivotal. Testing on various screen sizes
and resolutions ensures that:

 Layouts adjust seamlessly (using CSS media queries).

 Interactive elements remain usable across touch and non-touch interfaces.
Example of Testing

For the XYZ Company homepage:

Simulate Devices:

 Use browser developer tools to emulate devices like iPhone and iPad.
 Verify that the hero image and CTA button remain centered.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 54 of 63
Developing complex cascading style sheets 1

Manually Test:

 Access the website on a physical smartphone.

 Ensure the navigation collapses into a hamburger menu.
Tools:
Use BrowserStack to test on different browsers and operating systems.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 55 of 63
Developing complex cascading style sheets 1

3.3. Rectify browser and device differences

A. Addressing Browser and Device Differences

CSS Standardization: Browsers implement CSS standards differently. Using resets or

normalize stylesheets ensures uniformity.

*{

margin: 0;

padding: 0;

box-sizing: border-box;

B. Vendor Prefixes: Adding prefixes ensures compatibility with older browsers.

.button {

display: -webkit-flex; /* Safari */

display: flex;}

C. Fallbacks for Unsupported Features: Provide alternatives when browsers don’t

support certain styles.

background: #0044cc; /* Fallback for older browsers */

background: linear-gradient(to right, #0044cc, #003399);

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 56 of 63
Developing complex cascading style sheets 1

D. Accessibility Fundamentals

Web accessibility focuses on creating inclusive digital experiences. Key principles include:

 Perceivability: Making content perceivable to users with visual or auditory impairments.

 Operability: Ensuring all functions can be operated via keyboard or assistive devices.
 Robustness: Developing content that adapts to evolving technologies and user agents.

Example of Accessibility Implementation:

1. Alt Text for Images:

<img src="logo.png" alt="XYZ Company Logo">

2. Semantic HTML: Use meaningful elements like <header>, <main>, <footer> for
structure.
3. Keyboard Navigation: Test whether users can navigate using Tab and Enter keys.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 57 of 63
Developing complex cascading style sheets 1

3.4. Confirming Requirements and Obtaining Sign-Off

Validating user requirements involves mapping the implemented solution against the initial
objectives. This includes:

 Verification: Ensuring all technical specifications have been met.

 Validation: Confirming the solution aligns with user expectations and practical needs.

Example Checklist for XYZ Company Website:

1. Navigation bar is functional and responsive.
2. Hero section includes a welcoming message and a working CTA button.
3. Products are displayed clearly with descriptions and links.
4. Footer contains copyright information.

Stakeholder Communication

Obtaining sign-off is both a technical and interpersonal process. Theoretical elements include:

1. Presentation Skills: Demonstrating how the website meets requirements.

2. Documentation: Providing a summary of completed tasks and outstanding items.
3. Feedback Mechanisms: Encouraging iterative feedback to refine the final product.

Example: After testing and debugging the XYZ Company website, present it to
stakeholders in a meeting. Showcase:

 The responsiveness of the layout.

 Accessibility features.
 Security measures in place.

Once approved, secure formal sign-off in writing or via email.

Approval Name: Signature: Date:
PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 58 of 63
Developing complex cascading style sheets 1

Self-Check 3.1
I. Read the statement carefully and if the statement is True say TRUE and If the
statement is false say FALSE.

1. Debugging involves identifying, isolating, and fixing issues within web pages and
stylesheets.
2. Content Security Policies (CSPs) prevent all types of website vulnerabilities without
additional measures.
3. Cross-browser testing ensures consistent design and functionality across different browsers
and platforms.
4. Using semantic HTML elements like <header> and <footer> is not a requirement for web
accessibility.
5. Vendor prefixes are used to enhance compatibility with older browsers.

II. From the given alternatives choose the best answer for the statement
1. Which of the following is a step in debugging?
a. Error Identification
b. Code Optimization
c. Device Performance Check
d. User Experience Design
2. Which CSS property ensures uniform styling across different browsers?
a. Box-sizing
b. Fallbacks
c. Vendor Prefixes
d. Resets
3. What does the following code achieve?
css
Copy code
@media (max-width: 768px) {
header .nav ul {
flex-direction: column;
text-align: center;
}

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 59 of 63
Developing complex cascading style sheets 1

a. Makes the navigation menu horizontal for smaller screens

b. Aligns the navigation menu center on larger screens
c. Adjust the navigation menu layout for smaller screens
d. None of the above

4. Which tool can simulate various devices for testing purposes?

a. BrowserStack
b. Visual Studio Code
c. GitHub
d. Xcode
5. What does the following HTML tag achieve?
html
Copy code
<meta http-equiv="Content-Security-Policy" content="default-src
'self';">
a. Implements a browser cache
b. Restricts resource loading to the same domain
c. Enables cross-origin data sharing
d. Disables browser security features

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 60 of 63
Developing complex cascading style sheets 1

III. Explain the following briefly

1. Explain the importance of cross-browser testing in web development.
2. Describe how accessibility features like alt text and keyboard navigation improve user
experience.
3. Discuss the significance of validating user requirements before obtaining sign-off for a
project.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 61 of 63
Developing complex cascading style sheets 1

Reference

1. W3C (World Wide Web Consortium). (2021). CSS: Cascading Style Sheets Overview.
2. W3C. (2018). Web Content Accessibility Guidelines (WCAG) 2.1.
3. Bos, B., Çelik, T., Hickson, I., & Lie, H. W. (2021). Cascading Style Sheets (CSS) Snapshot
2020.
4. Marcotte, E. (2014). Responsive Web Design. 2nd Edition. Publisher: A Book Apart.
5. Keith, J., & Andrew, R. (2017). HTML5 for Web Designers. 2nd Edition.
Publisher: A Book Apart.

Online References

1. W3C (World Wide Web Consortium). (2021). CSS: Cascading Style Sheets Overview.
Retrieved from https://www.w3.org/Style/CSS/Overview.en.html
2. W3C. (2018). Web Content Accessibility Guidelines (WCAG) 2.1. Retrieved from
https://www.w3.org/WAI/standards-guidelines/wcag/
3. Bootstrap. (2024). Bootstrap Documentation. Retrieved from https://getbootstrap.com/
4. Mozilla Developer Network (MDN). (2024). CSS Documentation. Retrieved from
https://developer.mozilla.org/en-US/docs/Web/CSS
5. Bos, B., Çelik, T., Hickson, I., & Lie, H. W. (2021). Cascading Style Sheets (CSS) Snapshot
2020. W3C. Retrieved from https://www.w3.org/TR/CSS/
o Official CSS specifications, including advanced layout techniques like Grid and Flexbox.
6. Keith, J., & Andrew, R. (2017). HTML5 for Web Designers. 2nd Edition. A Book Apart.
o Focuses on integrating semantic HTML5 with CSS for modern web development.
7. Marcotte, E. (2014). Responsive Web Design. 2nd Edition. A Book Apart.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 62 of 63
Developing complex cascading style sheets 1

Developer Profile

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 63 of 63
Developing complex cascading style sheets 1

Qualification and Field of

Organization/
No Name Study/educational Existing Professions Mobile number E-mail
Institution
background

1) Tewodiros Girma MSC Trainer Sheno PTC +251912 068479 girmatewodiros@gmail.com

2) Endalew Kassa MSC Trainer Debrmarkose PTC +251913 305454 endalewk54@gmail.com

3) Gari Lencha MSC Trainer Gimbi TVET college +251911 118134 garilencha12@gmail.com

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE