Noida Institute of Engineering and Technology, Greater Noida

WEB TECHNOLOGY

Unit: 3

Web Technology
ACSE-0505
Rajat Kumar
Assistant Professor
B.Tech 5th Sem CSE Department

Rajat Kumar ACSE0505 (Web Tech) Unit 3

1
01/24/2025
 Faculty Profile

Course Board/University Year of Passing

Ph. D. Netaji Subhas University
(Pursuing) of Technology, Delhi
M. Tech AKTU, Lucknow 2020
B. Tech AKTU, Lucknow 2016

• Certificate of Recognition for role as Faculty in MOOCs Course Python/CSS from E & ICT Academy, IIT
Kanpur.
• Worked on Internet of things (IoT) technology under the topic Energy efficient technique for data aggregation
in M.Tech.
• Published paper in International journal of research in electronics and computer engineering (IJRECE) on
“Energy efficient technique for data aggregation in IoT” (April-June 2019).
• Area of Interest: FullStack Development, Information Retrieval and Machine Learning.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 2

 Table of Contents
1.Name of Subject with code, Course and Subject Teacher
2.Brief Introduction of Faculty member with Photograph
3.Evaluation Scheme
4.Subject Syllabus
5.Branch wise Applications
6.Course Objective (Point wise)
7.Course Outcomes (COs)
8.Program Outcomes only heading (POs)
9.COs and POs Mapping
10.Program Specific Outcomes (PSOs)

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 3 2

 Conti….
11.COs and PSOs Mapping
12.Program Educational Objectives (PEOs)
13.Result Analysis (Department Result, Subject Result and Individual
Faculty Result)
14.End Semester Question Paper Templates (Offline Pattern/Online
Pattern)
15.Perquisite/ Recap
16.Brief Introduction about the Subject with videos
17.Unit Content
18.Unit Objective
19.Topic Objective/Topic Outcome
20.Lecture related to topic
21.Daily Quiz
22.Weekly Assignment
01/24/2025 4
Rajat Kumar ACSE0505 (Web Tech) Unit 3
 Conti…
23Topic Links
24MCQ (End of Unit)
25Glossary Questions
26Old Question Papers (Sessional + University)
27Reference
28Recap of Unit

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 5

 Evaluation Scheme

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 6

 Syllabus Unit -1 8 Hours

Introduction: Introduction to Web Technology, History of Web and Internet,

Connecting to Internet, Introduction to Internet services and tools, Client-Server
Computing, Protocols Governing Web, Basic principles involved in developing
a web site, Planning process, Types of Websites, Web Standards and W3C
recommendations.

Web Hosting: Web Hosting Basics, Types of Hosting Packages, Registering

domains, Defining Name Servers, Using Control Panel, Creating Emails in
Cpanel, Using FTP Client, Maintaining a Website.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 7

 Syllabus Unit -2 8 Hours

HTML: What is HTML, DOM- Introduction to Document Object Model,

Basic structure of an HTML document, Mark up Tags, Heading-Paragraphs ,
Line Breaks, Understand the structure of HTML tables. Lists, Working with
Hyperlinks, Image Handling, Understanding Frames and their needs, HTML
forms for User inputs. New form Elements- date, number, range, email,
search and data list, Understanding audio, video and article tags.

XML: Introduction, Tree, Syntax, Elements, Attributes, Namespaces,

Display, HTTP request, Parser, DOM, XPath, XSLT, XQuerry, XLink,
Validator, DTD, Schema, Server

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 8

 Syllabus Unit -3 8 Hours

Concept of CSS 3: Creating Style Sheet, CSS Properties,CSS

Styling(Background, Text Format, Controlling Fonts) , Working with block
elements and objects , Working with Lists and Tables , CSS Id and Class, Box
Model(Introduction, Border properties, Padding Properties, Margin properties)
CSS Advanced(Grouping, Dimension, Display, Positioning, Floating, Align,
Pseudo class, Navigation Bar, Image Sprites, Attribute sector) , CSS Color,
Creating page Layout and Site.

Bootstrap: Introduction, Bootstrap grid system, Bootstrap Components.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 9

 Syllabus Unit -4 8 Hours

JavaScript Essentials: Introduction to Java Script , Java script Types , Var, Let
and Const Keywords, Operators in JS , Conditions Statements , Java Script
Loops, JS Popup Boxes , JS Events , JS Arrays, Working with Arrays, JS
Objects ,JS Functions , Using Java Script in Real time , Validation of Forms,
Arrow functions and default arguments, Template Strings, Strings methods,
Callback functions,
Object de-structuring, Spread and Rest Operator, Typescript fundamentals,
Typescript OOPs- Classes, Interfaces, Constructor etc. Decorator and Spread
Operator,
Difference == & ===, Asynchronous Programming in ES6, Promise
Constructor, Promise with Chain, Promise Race.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 10

 Syllabus Unit -5 8 Hours

Introduction to PHP, Basic Syntax, Variables & Constants, Data Type,

Operator & Expressions, Control flow and Decision making statements,
Functions, Strings, Arrays,

Working with files and directories: Understanding file& directory, Opening

and closing, a file, Coping, renaming and deleting a file, working with
directories, Creating and deleting folder, File Uploading & Downloading.

Session & Cookies: Introduction to Session Control, Session Functionality

What is a Cookie, Setting Cookies with PHP. Using Cookies with Sessions,
Deleting Cookies, Registering Session variables, Destroying the variables and
Session.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 11

 Text Books

Text books:

1. Steven M. Schafer, “HTML, XHTML, and CSS Bible, 5ed”, Wiley India

2. Ian Pouncey, Richard York, “Beginning CSS: Cascading Style Sheets for Web
Design”, Wiley India

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 12

 Branch Wise Applications

Sample Applications
 Desktop GUI Applications
 Mobile Applications
 Enterprise Applications
 Scientific Applications
 Web-based Applications
 Cloud-based Applications
 Web servers and Application servers
 Software Tools

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 13

 Course Objective

This course covers different aspect of web technology such as

HTML, CSS, and issues of web technology, client and server side
issue.
The general objectives of this course are to provide
fundamental concepts of Internet; Web Technology and Web
Programming.
Students will be able to build a proper responsive website.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 14

 Course Outcome
At the end of the semester, student will be able to:

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 15

 Program Outcome

• 1. Engineering knowledge:
• 2. Problem analysis:
• 3. Design/development of solutions:
• 4. Conduct investigations of complex problems:
• 5. Modern tool usage:
• 6. The engineer and society:
• 7. Environment and sustainability:
• 8. Ethics:
• 9. Individual and team work:
• 10. Communication:
• 11. Project management and finance:
• 12. Life-long learning
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 16
 CO-PO Mapping
Mapping of Course Outcomes and Program Outcomes:

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 17

 Result Analysis(2023-24)

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 18

 Program Specific Outcomes

• PSO1: Identify, analyze real world problems and design their ethical
solutions using artificial intelligence, robotics, virtual/augmented
reality, data analytics, block chain technology, and cloud computing.
 PSO2:Design and develop the hardware sensor devices and related
interfacing software systems for solving complex engineering
problems.
 PSO3:Understand inter-disciplinary computing techniques and to
apply them in the design of advanced computing.
 PSO4: Conduct investigation of complex problems with the help of
technical, managerial, leadership qualities, and modern engineering
tools provided by industry-sponsored laboratories.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 19

 COs and PSOs Mapping

Mapping of Program Specific Outcomes and Course Outcomes:

Course Outcomes Program Specific Outcomes

PSO1 PSO2 PSO3 PSO4

CO1 3 1 1 1

CO2 1 2 3 1

CO3 2 3 2 1

CO4 3 2 3 2

CO5 2 1 2 3

AVG 2.2 1.8 2.2 1.6

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 20

 Program Educational Objectives

• PEO1: To have an excellent scientific and engineering breadth

so as to comprehend, analyze, design and provide sustainable
solutions for real-life problems using state-of-the-art
technologies.
• PEO2:To have a successful career in industries, to pursue
higher studies or to support entrepreneurial endeavors and to
face global challenges.
• PEO3:To have an effective communication skill, professional
attitude, ethical values and a desire to learn specific knowledge
in emerging trends, technologies for research, innovation and
product development and contribution to society.
• PEO4: To have life-long learning for up-skilling and re-skilling
for a successful professional career as an engineer, scientist,
entrepreneur, or bureaucrat for the betterment of society.
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 21
 End Semester Question Paper Template

B TECH
(SEM-V) THEORY EXAMINATION 20__-20__
Time: 3 Hours Total
Marks: 100
Note: 1. Attempt all Sections. If require any missing data; then choose
suitably.
SECTION A
1. Attempt all questions in brief. 1 x 10 =
10
Q.No. Question Marks CO
1 1
2 1
. .
10 1

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 22

 End Semester Question Paper Templates

2. Attempt of the following: 5 x 2 = 20

Q.No. Question Marks CO
1 2
2 2
“””
‘”
5 2

SECTION B
3. Attempt any five part of the following: 5 x 6 = 30

Q.No. Question Marks CO

1 6
. 6
7 6
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 23
 End Semester Question Paper Templates

4. Attempt any one part of the following: 1 x 10 = 10

Q.No. Question Marks CO

1 10
2 10
5. Attempt any one part of the following: 1 x 10 = 10
Q.No. Question Marks CO
1 10
2 10
6. Attempt any one part of the following: 1 x 10 = 10
Q.No. Question Marks CO

1 10
2 10

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 24

 End Semester Question Paper Templates

7. Attempt any one part of the following: 1 x 10 = 10

Q.No. Question Marks CO

1 10
2 10

8. Attempt any one part of the following: 1 x 10 = 10

Q.No. Question Marks CO

1 10
2 10

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 25

 Prerequisite

Basic Knowledge of any programming language like

C/C++/Python/Java. .

Familiarity with basic concepts of Internet.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 26

 Brief Introduction About The Subject
Web technologies are the various tools and techniques that are
utilized in the process of communication between different types of
devices over the internet.
To understand this term in a better manner, let’s break it down into
two pieces: ‘web’ and ‘technology’.
The web, in this case, refers to the World Wide Web, more commonly
known as WWW.
It first came into being in 1989 when famous scientist and engineer,
Tim Berners-Lee, came up with an efficient mechanism to share
resources between scientists all over the world.
https://www.youtube.com/results?
search_query=Web+Technonogies

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 27

 Unit 3 Content

 Creating Style Sheet ,

 CSS Properties , CSS Styling(Background, Text Format, Controlling
Fonts),
 Working with block elements and objects ,
 Working with Lists and Tables , CSS Id and Class, Box Model
(Introduction,Borderproperties,PaddingProperties,Marginproperties) ,
 CSS Advanced(Grouping, Dimension, Display, Positioning, Floating,
Align, Pseudo class, Navigation Bar, Image Sprites, Attribute sector),
 CSS Color, Creating page Layout and Site,
Bootstrap:
 Introduction, Bootstrap grid system,
 Bootstrap Components..

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 28

 Unit 3 Objective

Objective of Unit 3:
• To learn about web development strategies with Creating style sheet,
Creating Properties
• To understand the basic concepts to develop the Working with block
elements and objects.
• To understand Bootstrapping and Bootstrapping Components.
• To understand to register a domain and maintain CSS Style Sheet.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 29

 Topic Objective/Outcome

Objective of the above topics:

•To get the knowledge about the CSS Style and Tools.

•To know how to CSS with Bootstrapping Process.

•To understand the components and their functionalities of CSS

Advanced Grouping, dimensions, display.
•To know the web standards to develop a website according to the CSS
Pseudo class and image.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 30

 Concept of CSS 3: Creating Style Sheet

• Cascading Style Sheets (CSS)

• Applies to (X)HTML as well as XML documents in general
• A styled HTML document. .

produced by the style sheet style1.css:

01/24/2025 Deepshikha
Rajat Kumar WT
ACSE0505 (Web Tech) unit-3
Unit 3 31
 Concept of CSS 3: Creating Style Sheet

 Java Script is used insert dynamic text into HTML (ex: user
name)

 It’s get information about a user's computer (ex: browser

type)

 It perform calculations on user's computer (ex: form

validation)

 Java script offers a vast standard library that has a wide

variety of functions and methods available to help in the
process of development, making the entire
process easier and hassle-free
01/24/2025 Rajat Deepshikha
Kumar WT(Web Tech) unit- 3 Unit 3
ACSE0505 32
 Concept of CSS 3: Creating Style Sheet

 Javascript is a lightweight, cross-platform, and interpreted language.

 It was developed with the main intention of DOM manipulation, bringing

forth the era of dynamic websites.

 Javascript functions are objects and can be passed in other functions as

parameters.

 Can handle date and time manipulation.

 Can perform Form Validation.

 A compiler is not needed.

01/24/2025 Deepshikha
Rajat Kumar ACSE0505 WT
(Web Tech) Unit- Unit
3 3 33
 Concept of CSS 3: Creating Style Sheet

+ =

01/24/2025 Deepshikha
Rajat Kumar WT
ACSE0505 unit- 3
(Web Tech) Unit 3 34
 Concept of CSS 3: Creating Style Sheet

• Function expressions can be made "self-invoking".

• A self-invoking expression is invoked (started) automatically,
without being called.
• Function expressions will execute automatically if the
expression is followed by ().
• You cannot self-invoke a function declaration.
• we have to add parentheses around the function to indicate that
it is a function expression:
Example
(function () {
let x = "Hello!!"; // I will invoke myself
})();

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 35

 Concept of CSS 3: Creating Style Shee

Variables:-

var name = expression; JS

var clientName = "Connie Client";

var age = 32;
var weight = 127.4; JS

 variables are declared with the var keyword (case sensitive)

 types are not specified, but JS does have types ("loosely typed")

 Note that alternate,user selectable style is not widely supported:firefox

3 and IE 8 do,but IE 6 IE 7 and chrome don’t.

01/24/2025 Deepshikha
Rajat Kumar WT
ACSE0505 (Web Tech)unit3 Unit 3 36
 Concept of CSS 3: Creating Style Sheet

A styled HTML document

var enrollment = 99;
Vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
var medianGrade = 2.8;
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
var credits = 5 + 4 + (2 * 3);
JS

 produced by the style sheet style2.css

 same operators: + - * / % ++ -- = += -= *= /= %=

Note that alternate, user selectable style is not widely supported:

firefox 3 and IE 8 do, but IE 6, IE 7 and Chrome don’t.

01/24/2025 Deepshikha ACSE0505 (Web Tech)

Rajat Kumar WT Unit 33 37
 Concept of CSS 3: Creating Style Sheet

Single document can be displayed on multiple media platforms by

tailoring style sheets:

 identical to Java's comment syntax

 recall: 4 comment syntaxes

This document will be printed differently than it is displayed

01/24/2025 Rajat KumarDeepshikha WT Tech)

ACSE0505 (Web 3 Unit 3 38
 Concept of CSS 3:CSS Properties

Parts of a style rule (or statement)

 methods: abs, ceil, cos, floor, log, max, min, pow, random, round, sin, sqrt,
tan

 properties: E, PI

01/24/2025 Rajat Kumar Deepshikha

ACSE0505
WT(Web Tech) 3 Unit 3 39
 Concept of CSS 3:CSS Properties

• Single element type:

• Multiple element types:

 5 < "7" is true

 All element types:

 Specific elements by id:

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 40

 Concept of CSS 3:CSS Properties

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 41

 Concept of CSS 3:CSS Properties

Elements belonging to a style class:

Referencing a style class in HTML:

class selector: begins with a period .

 Elements of a certain type and class:

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 42

 Concept of CSS 3:CSS Properties

lements belonging to a style class:

Elements of a certain type and class:

this span belongs to three style classes

01/24/2025 Rajat Kumar

Deepshikha ACSE0505
WT (Web Tech)
Unit-3 Unit 3 43
 Daily Quiz
Q1. Which of the following is NOT a method of creating a style sheet in web
technology?
(A) Inline styles
(b) Internal styles
© External styles
(d) Embedded styles
Q2.What is the purpose of using CSS classes in a style sheet?
(a) To define styles for HTML elements that share the same class attribute
(b) To define styles for the entire HTML document.
(C) To link external style sheets
(d) To create inline styles for specific elements.
Q3.How can you add comments in a CSS file ?
(A) /* This is a comment */
(b) <!-- This is a comment -->
© // This is a comment
(D) <!--- This is a comment --->

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 44

 Daily Quiz(cont..)
Q4.What is the purpose of the "cascading" in Cascading Style
Sheets (CSS)
(A)It refers to the process of combining multiple style sheets into one
(B)It ensures that styles are applied in a specific order based on their
priority.
(c) It enables the use of colors and gradients in CSS.
(D) It allows the creation of animated effects using CSS.
Q5.In the context of CSS specificity, which selector has the
highest priority
(A)Element selectors (e.g., p, h1, div)
(B). Class selectors (e.g., .my-class)
©.ID selectors (e.g., #my-id)
(D). Universal selectors (*)
Q6. Which CSS property is used to change the font size of an element's
text?
(A)font-size
(B)text-size
(C)font-style
(D)text-font

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 45

 Daily Quiz(cont..)
Q. 7 What is the correct way to define an inline style in HTML?
a) <style>body {color: blue;}</style>
b) <link rel="stylesheet" type="text/css" href="styles.css">
c) Testing, Updation, Testing
d) <head><style>body {background-color: yellow;}</style></head>
Q. 8 To create an external style sheet, you use a file with which
extension
a) .style
b) .style-sheet
c) .css
d).html
Q. 9 Which HTML tag is used to link an external style sheet to
an HTML document?
a) <stylesheet>
b)<style>
c) <link>
d) <css>

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 46

 Daily Quiz(cont..)
Q 10 Which of the following options correctly implements the required CSS rule in
"styles.css"?
a) /* styles.css */
.highlight {
color: green;
}
b) /* styles.css */
div p {
color: green;
}
c) /* styles.css */
p{
color: green;
}
d) /* styles.css */
#highlight {
color: green;
}

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 47

 Daily Quiz(cont..)
Q 12 The expression scroe = scroe +10 can be written as
 scrore += 10;
 scroe ++= 10;
 score =+ 10;
 score + 10 = 10;
Q 13 The correct reslut of score = 2 + 4 + "3" is:
 9
 27
 63
 6
Q 14. Assignment Operators is following type of operator ______________.
 None of these
 Unarry
 Binary
 Ternary
Q 15 "Add and Assignment" operator is shown by this symbol.
==+
+==
=+
+=

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 48

 Daily Quiz(Cont..)

Q 16. Which CSS property is used to control the space between lines of text
in an element?
A. letter-spacing B. word-spacing
C. word-spacing D. text-spacing
Q 17. How can you make text inside an element italic in CSS?
A. text-style: italic; B. font-style: italic;
C. text-decoration: italic; D. font-italic: true;
Q 18. Which CSS property is used to create rounded corners on an
element's border?
A. border-radius B. border-style
C. border-width D. border-corner-radius
Q 19. The CSS property "text-align" is used to:
A. Set the color of the text inside an element.
B. Control the alignment of an element's border
C. Align the content of an element to the left, right, center, or justify
D. Define the font size of an element's text.
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 49
 Daily Quiz (Cont..)

Q 20. How can you apply a 1-pixel solid red border to an element with the
class "box" in CSS??

A. .box { border: solid red 1px; }

B. .box { border: 1px red solid; }
C. .box { border: red 1px solid; }
D. .box { border: 1px solid red; }

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 50

 Concept of CSS 3:CSS Styling

 A font is a mapping from code points to glyphs.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 51

Deepshikha WT Unit-3
 Concept of CSS 3:CSS Styling

 A font family is a collection of related fonts (typically differ in

size, weight, etc.)

font-family property can accept a list of families, including

generic font families

first choice font

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 52

Deepshikha WT Unit-3
 Concept of CSS 3:CSS Styling

 A font family is a collection of related fonts (typically differ in

size, weight, etc.)
• font-family property can accept a list of families, including
generic font families

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 53

Depshikha WT Unit-3
 Concept of CSS 3:CSS Styling

01/24/2025 Rajat Kumar

Deepshikha ACSE0505
WT (Web Tech)
Unit-3 Unit 3 54
 Common HTML Events
• Note that most generic font can be easily set on Firefox and Chrome, but such option
doesn’t seem to be available on IE 7 and 8. IE will still default to something
although maybe not what you had hoped for!

01/24/2025 Rajat Kumar

Pratik Singh ACSE0505
WT (Web Tech)
Unit-3 Unit 3 55
 Concept of CSS 3:CSS Styling

 Things that should be done every time a page loads

 Things that should be done when the page is closed

 Action that should be performed when a user clicks a button

 Content that should be verified when a user inputs data

 HTML event attributes can execute JavaScript code directly

 HTML event attributes can call JavaScript functions

 You can assign your own event handler functions to HTML elements

 You can prevent events from being sent or being handled

01/24/2025 RajatDeepshikha
Kumar ACSE0505
WT (Web Tech)
Unit-3 Unit 3 56
 Concept of CSS 3:CSS Styling

Many properties, such as font-size, have a value that is a CSS length

All CSS length values except 0 need units

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 57

 Concept of CSS 3:CSS Styling

Computed
value
of font-
size
property

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 58

 Concept of CSS 3:CSS Styling

Reference font defines em and ex units

Normally, reference font is the font of the element being styled
Exception: Using em/ex to specify value for font-size

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 59

 CSS Styling

• Other ways to specify value for

font-size:
• Percentage (of parent font-size)
Absolute size keyword: xx-small, x-small, small, medium (initial value), large,
x-large, xx-large

• User agent specific; should differ by ~ 20%

• Relative size keyword: smaller, larger
• Relative to parent element’s font

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 60

 Concept of CSS 3:CSS Styling

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 61

 Concept of CSS 3:CSS Styling

• Text is rendered using line boxes

• Height of line box given by line-height

• Initial value: normal (i.e., cell height; relationship with em height is font-specific)
• Other values (following are equivalent):

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 62

 Concept of CSS 3:CSS Styling

• When line-height is greater than cell height:

• Inheritance of line-height:
• Specified value if normal or unit-less number
• Computed value otherwise

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 63

 Concept of CSS 3:CSS Styling

• font shortcut property:

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 64

 Concept of CSS 3:CSS Styling

• font shortcut property:

specifying line-height (here, twice cell height)

any order
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 65
 Concept of CSS 3:CSS Styling

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 66

 Concept of CSS 3:CSS Styling

• Font color specified by color property

• Two primary ways of specifying colors:
•Color name: black, gray, silver, white, red, lime, blue, yellow, aqua, fuchsia, maroon, green, navy,
olive, teal, purple, full list at
http://www.w3.org/TR/SVG11/types.html#ColorKeywords
•red/green/blue (RGB) values

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 67

 Concept of CSS 3:CSS Styling

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 68

 Concept of CSS 3:CSS Styling

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 69

 Concept of CSS 3:CSS Box Model

• Every rendered element occupies a box:

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 70

 Concept of CSS 3:CSS Box Model

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 71

 Concept of CSS 3:CSS Box Model

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 72

 Concept of CSS 3:CSS Box Model

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 73

 Concept of CSS 3:CSS Box Model

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 74

 Concept of CSS 3:CSS Box Model

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 75

 Concept of CSS 3:CSS Box Model

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 76

 Concept of CSS 3:CSS Box Model

• If multiple declarations apply to a property, the last

declaration overrides earlier specifications

Left border is 30px wide,

inset style, and red

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 77

 Daily Quiz
Q 1 Which of the following options correctly describes the usage of CSS styles in web technology?

a) CSS is used to structure the content of a web page, such as defining headings, paragraphs, and lists .
b) CSS is used to add interactivity and dynamic behavior to a web page, such as handling user interactions and
form validations
c) CSS is used to define the layout and presentation of a web page, such as setting colors, fonts, and spacing
d) CSS is used to define the server-side logic and database connections for a web application
Q 2 Which CSS property is used to change the text color of an element?
e) text-color
f) color
g) font-color
h) text style
Q 3 How can you apply external CSS styles to an HTML document?
i) Using the ‘<style>’ element within the HTML file.
j) Using the ‘style’ attribute in HTML tags.
k) Using the’link’ element with the ‘rel’ attribute set to ‘stylesheet’.
l) Using the ‘css’ in the head section of the HTML file.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 78

 Daily Quiz(cont..)
Q 4. What does CSS stand for
a)Creative Style Sheets
b) Computer Style Sheets
c) Cascading Style Sheets
d) Colorful Style Sheets
Q 5 Which HTML tag is used to link an external CSS file to an HTML document?
a)<script>
b) <css>
c) <link>
d) <style>
Q 6 The CSS property used to add spacing between lines of text is:
a) line-height b) letter-spacing c) text-spacing d) line-spacing
Q 7 How can you set the background color of an element in CSS
b) background-color
b) bg-color
c) color-background
d) background-style
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 79
 Daily Quiz(cont..)
Q 8 What is the Box Model in CSS?
a)A design technique for creating 3D boxes in web pages.
b) A layout model that arranges elements in a grid pattern.
c) A concept that describes how elements are rendered as rectangular boxes.
d) A method for creating responsive web designs.
Q 9 Which CSS property is used to create rounded corners on elements
a)border-radius
b) corner-radius
c) rounded-style
d) border-style
Q 10 How can you center an element horizontally in CSS?
a)align: center;
b) horizontal-align: center;
c) margin: auto;
d) center: true;
Q 11 What is the correct way to select an element with the ID "header" in CSS ?
a) #header
b) .header
c) header
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 80
d) id(header)
 Daily Quiz(cont..)

Q 12 Which of the following properties is NOT part of the Box Model?

a)border b) margin c) padding d) float
Q 13 In the Box Model, the total width of an element is calculated as:
a)width + margin + padding + border
b) width + margin + padding
c) width + padding + border
d) width + margin + border
Q 14 Which CSS property is used to set the space between an element's content and its border?
a. border-width b) margin c) padding d) border-spacing
Q 15 The CSS property "box-sizing" is used to control how the total width and height of an element are calculated.
What are the possible values for "box-sizing"?
a)content-box and padding-box
b) border-box and content-box
c) margin-box and padding-box
d) border-box and padding-box
Q 16 The CSS property "border-radius" is used to:
a)set the width of an element's border.
b) create rounded corners on an element.

01/24/2025
c) adjust the spacing between an element's ACSE0505
Rajat Kumar
border and content.
(Web Tech) Unit 3 81
d) align an element horizontally within its parent container.
 Daily Quiz(cont..)
Q 17 What will be the total width of an element with a width of 200px, a padding of 20px on the left and right sides, and a
border of 2px on the left and right sides?
a)224px
b) 242px
c) 204px
d) 220px
Q 18 If an element has a width of 300px, padding of 10px, and a border of 5px, what will be the total width of the element
when "box-sizing" is set to "border-box"?
a) 300px
b) 320px
c) 330px
d) 340px
Q 19 The "padding-bottom" property in CSS is used to set:
b) the space between an element's border and its content on the bottom side.
b) the space between an element's border and its content on all sides.
c) the space between an element's border and its parent container on the bottom side.

d) the space between an element's border and its parent container on all sides .
Q 20 The "margin" property in CSS is used for:
c) adding space between an element's content and its border.
b) setting the width of an element's border.
c) positioning an element within its parent container.
01/24/2025 Rajat Kumar
d) adding space between an element ACSE0505elements.
and its neighboring (Web Tech) Unit 3 82
 Concept of CSS 3:CSS Advanced(Grouping styles)
You can give the same properties to a number of selectors without having to repeat them by separating
the selectors by commas. It is a useful thing for reducing file size.
 Example
h2
{
color: red;
}
.thisOtherClass
{
color: red;
}
.yetAnotherClass
{ color: red; }
h1, h2, h3, h4, h5, h6
h2, .thisOtherClass, .yetAnotherClass {
{ color: blue;
color: red; }
}

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 83

 Concept of CSS 3:CSS Advanced(Nested Styles)

If the CSS is structured well, there shouldn't be a need to use many class or ID selectors.
This is because you can specify properties to selectors within other selectors.

#top { background-color: #ccc; padding: 1em }

#top h1 { color: #ff0; }
#top p { color: red; font-weight: bold; }

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 84

 Concept of CSS 3:CSS Advanced(Conditional CSS)

a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center
right;
}
This would attach a pdf icon to the right of any hyperlink who's
URL ended in '.pdf' like this. This was pretty exciting and heady
stuff. It meant I could show the file type visually with that
application's icon just by including a few lines in my master css file.
I didn't have to worry about it at all in my html, css would add the
icon for me automatically.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 85

 Concept of CSS 3:CSS Advanced

span[id ^='google'] {
background-color: green;
}
• Any span which has an id which starts with 'google' will be assigned a green
background.
• More Examples

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 86

 Concept of CSS 3:CSS Advanced
.ie .example {
background-color: yellow
}
.gecko .example {
background-color: gray
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
.example {
width: 100px;
height: 100px;
background-color: brown;
}

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 87

 Concept of CSS 3:CSS Advanced(Cont..)

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 88

 Concept of CSS 3:CSS Advanced(Validation)
(Cont..)

• Validate your HTML

validator.w3.org
• Validate your CSS
jigsaw.w3.org/css-validator/
• Check for web accessibility
bobby.watchfire.com

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 89

 Daily Quiz
Q 1 In CSS, what does the "+" selector do?
Selects the first child element of the parent.
b) Selects all elements that are immediately preceded by a sibling element.
c) Selects all child elements of the parent.
d) Selects all elements with a specific attribute
Q 2 The CSS property "box-shadow" is used for:
a)Adding a shadow behind an element's border-box.
b) Adding a shadow inside an element's content-box.
c) Changing the shape of an element's box.
d) Creating a border around an element.
Q 3 The "z-index" property in CSS is used to control:
a) The positioning of an element along the z-axis (depth).
b) The size of an element's width and height.
c) The positioning of an element within its parent container.
d) The spacing between an element's border and content.
Q 4 How can you make an element "float" in CSS?
a)float: left; b) position: float; c) display: float; d) align: float;
Q 5 Which CSS property is used to change the size of an element's font?
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 90
a) font-size b) text-size c) font-style d) size
 Daily Quiz(Cont..)

Q 6 What is the purpose of CSS image sprites?

a)Combining multiple images into a single image to reduce HTTP requests.
b) Adding decorative elements to the background of a webpage.
c) Applying different styles to elements based on their attribute values.
d) Animating images on a webpage.
Q 7 How can you center an element both horizontally and vertically in CSS?
a)center: horizontal vertical;
b) position: center center;
c) display: center;
d) margin: auto;
Q 8 Which CSS property is used to set the space between lines of text within an element?
a) line-spacing b) line-height c) text-spacing d) font-line
Q 9 What is the purpose of a navigation bar in web development?
a) It is used to store and organize data related to a website's users.
b) It is used to display images and videos on a webpage.
c) It is used to create interactive menus for website navigation.
d) It is used to define the structure and layout of a webpage.
Q 10 The CSS pseudo-class ":hover" is used to apply styles:
b) When an element is clicked.
b) When an element is focused.
01/24/2025 c) When an element is hovered over
Rajat with the mouse
Kumar pointer.
ACSE0505 (Web Tech) Unit 3 91
d) When an element is the first child of its parent.
 Daily Quiz(Cont..)
Q 12 The CSS property "display: flex;" is used for:
a) Creating animations on a webpage.
b) Styling form elements like buttons and inputs.
c) Creating a responsive layout with flexible boxes.
d) Applying a gradient background to an element.
Q 13 How can you select all elements with the attribute "target" set to "_blank" in CSS?
a) target="_blank“
b) [target="_blank"]
c) :target="_blank"
d) :target[_blank]
Q 14 The CSS property "position: fixed;" is used to:
b) Position an element relative to its parent container.
b) Position an element relative to the viewport, even when scrolling.
c) Make an element float above other elements in the stacking order.

d) Create a fixed-width container for the element .

Q 15 How can you select the first child element of a parent using CSS?
a) :first-child
b) first-child
c) .first-child
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 92
d) #first-child
 Daily Quiz(Cont..)
Q 16 The CSS pseudo-element "::before" is used to:
a) Insert content before the content of an element.
b) Select an element that comes before another specific element.
c) Style the first line of an element's text.
d) Create a new block-level container within an element.
Q 17 The CSS property "clear" is used to:
b) Clear all styles applied to an element.
b) Prevent an element from floating next to a floated element.
c) Remove the background color of an element.
d) Change the color of the text inside an element.
Q 18 What is the purpose of the CSS attribute selector?
c) It allows you to select elements based on their position within the HTML document.
b) It allows you to select elements based on their class names or IDs.
c) It allows you to select elements based on their attributes and attribute values.
d) It allows you to group elements together and apply styles collectively.
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 93
 Concept of CSS 3:Bootstrap

• Bootstrap is the most popular HTML, CSS, and JavaScript framework for
developing responsive, mobile-first web sites.

• Advantages of Boot Strapping-

• Easy to use: Anybody with just basic Knowledge of HTML and CSS can start
using Bootstrap.

• Responsive features: Bootstrap’s responsive CSS adjusts to phones, tablets, and

desktops.

• Mobile –First approach: In Bootstrap 3, mobile first styles are part of the core
framework.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 94

 Concept of CSS 3:Bootstrap

• This is the strongest part of bootstrap framework. Bootstrap offers a 12 column grid
system. The grid system is responsive, that it adjust itself depending upon the
device resolution of the client. These grids have further classes that have been
defined in sync with the device resolution that they are represent.
• These grids have classes xs, sm, md and lg each representing a device resolution.
All the developer needs to do is include these classes while defining the visibility
of element in the mark-up and hence come up with a responsive website. The
responsive grid makes developing responsive websites really easy using bootstrap.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 95

 Concept of CSS 3:Bootstrap

 Bootstrap Components
Bootstrap.css
 This is the basic Bootstrap package that you will need to download. CSS is a style
sheet language for static information.
Bootstrap.js
 A JavaScript/JQuery library that powers up certain components of Bootstrap such
as animation, scrolling, and interactivity.
Glyphicons
 Glyphs are elemental symbols with typography, such as the English Pound symbol
(£). Bootstrap has a huge list of embedded glyph icons that are available for free.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 96

 Concept of CSS 3:Bootstrap

 Bootstrap source code elements

 Bootstrap Screen Sizes The Bootstrap source code download includes the
precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript,
and documentation.
 less/ - a preprocessor style sheet for CSS that eliminate repetitive coding tasks
 sass/ - a newer version of the preprocessor that is more popular
 js/ - simply refers to the source code JavaScript, which allows Bootstrap
components to work
 fonts/ - these are icon fonts that come with the download
 dist/ - a folder that contains precompiled files for drop-in use in website
development

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 97

 Daily Quiz
Q 1 What is Bootstrap?
a) A JavaScript library for building interactive web applications.
b) A framework for creating responsive and mobile-first websites.
c) A programming language for server-side web development.
d) An image editing software for web designers.
Q 2 Which CSS preprocessor is used in Bootstrap?
a) Sass
b) Less
c) Stylus
d) CSS is not used in Bootstrap.
Q 3 The Bootstrap grid system is based on how many columns?
a) 10 b) 12 c) 16 d) 24

Q 4 . In Bootstrap, the "container" class is used to:

a)Create a fixed-width container for the content.
b) Create a full-width container that spans the entire viewport.
c) Define the position of an element within its parent container.
d) Style the font of the text inside the container.
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 98
 Daily Quiz(Cont..)
Q 6 What is the purpose of the Bootstrap "navbar" component?
a) To display images and videos on a webpage.
b) b) To create a responsive layout with flexible boxes.
c) c) To add rounded corners to elements.
d) d) To create a navigation bar for website navigation.
Q 7 Which Bootstrap class is used to create a responsive, fixed-width container that centers the
content?
e) .container-fixed
f) b) .container-fluid
g) c) .container-responsive
h) d) .container-center
Q 8 The Bootstrap "btn" class is used for styling:
i) Navigation bars.
b) Buttons.
c) Tables.
d) Forms.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 99

 Daily Quiz(Cont..)
Q 11 Which Bootstrap class is used to create a flexible, responsive card container that can hold various types of
content?
a) .card-container b) .box c) .panel d) .card
Q 12 What is the purpose of Bootstrap "glyphicons"?
a) To style text and headings on a webpage.
b) To create animated effects on elements.
c) To display icons and symbols on a webpage.
d) To add rounded corners to images.
Q 13 Which class is used to create a progress bar in Bootstrap?
a) .progress-bar b) .loading-bar c) .progress-indicator d) .bar-fill
Q 14 What is the purpose of the Bootstrap Modal component?
a) To display images in a gallery
b) To create pop-up advertisements
c) To show additional content on a page
d) To display a dialog box on top of the current page
Q 15 What is the purpose of the "data-toggle" attribute in Bootstrap?
b) It enables data binding with a back-end server.
b) It activates Bootstrap components using JavaScript.
c) It defines the structure of the HTML document.
d) It sets the default styling for all Bootstrap elements.
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 100
 Daily Quiz(Cont..)
Q 16. Which Bootstrap class is used to create a collapsible accordion?
a) .collapse b) .collapsible c) .accordion d) .expandable
Q 17 How can you add dropdown menus to a navigation bar in Bootstrap?
a) By using the .dropdown class inside a .nav-item
b) b) By using the .nav-dropdown class inside a .navbar
c) By using the .dropdown-menu class inside a .nav-link
d) By using the .navbar-dropdown class inside a .navbar-item
Q 18 Which class is used to create responsive, equal-width columns in Bootstrap?
a) .col-fixed b) .col-fluid c) .col-equal d) .col
Q 19 How do you integrate Bootstrap into your web project?
a) By copying and pasting Bootstrap files directly into your project directory
b) By using a CDN link to include Bootstrap's CSS and JS files in your HTML
c) By converting your project to a Bootstrap-specific file format
d) By installing Bootstrap as a Python package
Q 20 Which version of HTML does Bootstrap primarily support?
a) HTML4 b) HTML5 c) XHTML d) XML

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 101

 BootStrap Plugins
Bootstrap provides custom events for most plugin's unique actions. Generally, these
events come in two forms − Infinitive form − This is triggered at the start of an event.
E.g. show. Infinitive events provide preventDefault functionality.
Form Plugins:
Table Plugins
Menu & Navigation Plugins
Notification Plugins
Modal Plugins
Button Plugins
Other Plugins
0

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 102

 Daily Quiz
Q 1 What are Bootstrap plugins?
a) External JavaScript libraries that extend Bootstrap functionality
b) CSS stylesheets to customize Bootstrap components
c) Custom Bootstrap templates for different industries
d) Bootstrap's built-in design tools
Q 2 Which attribute is used to enable the Bootstrap Tooltip plugin?
a) data-toggle="tooltip"
b) data-tooltip="true"
c) data-tooltip="enable"
d) data-tooltip="bootstrap”
Q 3 What is the purpose of the Bootstrap Modal plugin?
a)To create image galleries
b) To display additional information on a target element
c) To validate form fields
d) To display a pop-up dialog box on top of the current page
Q 4 Which Bootstrap plugin is used to add a date picker to form fields?
01/24/2025 Rajat Kumar c) Datetimepicker.js
a) Datepicker.js b) Calendar.js ACSE0505 (Web Tech) d) DatePicker.plugin
Unit 3 103
 Daily Quiz(Cont..)

Q 8 Which class is used to enable the Bootstrap Scrollspy plugin?

a) .scrollspy b) .spy c) .scroll d) .scroll-plugin
Q 9 Which Bootstrap plugin is used to enhance the appearance of HTML tables?
a) DataTables b) TableStyles c) EnhancedTables d) BootstrapTables
Q 10 What is the function of the Bootstrap Affix plugin?
a) To fix the navigation bar at the bottom of the page
b) To toggle the visibility of elements on scroll
c) To create sticky elements that stick to the top of the page
d) To animate scrolling within the page
Q 11 Which attribute is used to activate the Bootstrap Dropdown plugin?
b) data-plugin="dropdown“
b) data-toggle="dropdown"
c) data-dropdown="true"
d) data-target="dropdown“

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 104

 Daily Quiz(Cont..)

Q 13 What is the purpose of the Bootstrap Typeahead plugin?

a) To create animated text effects
b) To autocomplete user input in text fields
c) To format text in a specific font
d) To create scrolling text elements
Q 14 Which class is used to enable the Bootstrap Tab plugin?
b) .tab
b) .tabs
c) .tabbable
d) .tab-toggle
Q 15 What is the purpose of the Bootstrap Affix plugin?
a) To fix the navigation bar at the bottom of the page
b) To toggle the visibility of elements on scroll
c) To create sticky elements that stick to the top of the page
d) To animate scrolling within the page

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 105

 Daily Quiz(Cont..)
Q 17 How do you enable the Bootstrap Popover plugin for an element?
a) data-popover="true"
b) data-toggle="popover"
c) data-tooltip="enable"
d) data-popup="enable“
Q 18Which Bootstrap plugin is used for form validation?
b) Validate.js
b) FormValidator.js
c) BootstrapValidator.js
d) ValidForm.js
Q 19 What is the purpose of the Bootstrap Tooltip plugin?
a) To display alert messages
b) To create animated banners
c) To provide additional information on hover
d) To validate form fields

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 106

 Weekly Assignment
1. Explain Background Properties and Typography Properties?
[CO3]
2. Explain Text Formatting and Controlling Fonts in CSS. [CO3]
3. Define Advanced Background Patterns in CSS. [CO3]
4. Explain Image Gallery with CSS Grid . [CO3]
5. Define Building a Product Gallery.[CO3]
6. What is Flexbox and Grid Layout Properties. [CO3]
7. How to Creating a Two-Column Layout ? [CO3]
8. What are the different levels of headings in HTML ? [CO3]
9. How to Creating a Navigation Bar and Styling a Contact
Form. [CO3]
10. How to create a Data Table,Styling Table Header and
Responsive Table. [CO3]

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 107

 MCQ s
Q 1 Which CSS property is used to group multiple selectors together and
apply the same styles to all of them?
a) grouping
b) merge
c) combine
d) comma

Q 2 Image sprites are used in CSS to:

a) Display images in a slideshow format.
b) Combine multiple images into a single image file to reduce HTTP requests.
c) Create rounded corners on images.
d) Change the color of an image.
Q 3 Which CSS pseudo-class is used to select and style the first letter of a
block-level element?
a) :first-line
b) :first-letter
c) :first-child
d) :first-of-type
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 108
 MCQs(Cont..)
Q 4. The CSS property "display: inline-block" is used for elements to:
a) Make them appear on the same line as inline elements.
b) Display them as block-level elements.
c) Hide them from the page.
d) Create an animation effect.
Q 5.The CSS property "max-width" is used to:
a) Set the maximum width of an element.
b) Define the minimum width of an element.
c) Set the width of an element relative to its parent container.
d) Make an element invisible if it exceeds a certain width.
Q 6.What is the purpose of the Bootstrap Scrollspy plugin?
a) To add smooth scrolling animations to the website.
b) To display a list of related links in a dropdown menu.
c) To keep the navigation bar fixed at the top of the page.
d) To highlight the active section in the navigation based on the user's scroll
position.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 109

 MCQs(Cont..)
Q 7 .The CSS "text-align" property is used to:
a) Set the alignment of an element within its container.
b) Define the shape of an element.
c) Set the spacing between characters in text.
d) Control the display of text when it overflows its container.
Q 8 .The CSS property "list-style-type" is used to:
a) Set the color of the text within a list item.
b) Change the font family of the list items.
c) Define the style of the bullet points or numbering in a list.
d) Adjust the spacing between list items.
Q 9 . The "display: inline" CSS property is used for block
elements to:
a) Make them appear on the same line as inline elements.
b) Hide them from the page.
c) Give them a fixed width and height.
d) Apply a background image to them.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 110

 MCQs(Cont..)
Q 10. The CSS property "font-size" is used to:
a) Set the color of the font.
b) Define the width and height of an element.
c) Control the size of the font.
d) Set the font style (italic, bold, etc.)
.Q 11 In CSS, which of the following properties is used
to specify the font family for an element?
a) font-family
b) font-style
c) font-weight
d) font-size
Q 12.Which Bootstrap plugin provides a popover that appears when the user
hovers over an element?
a) Tooltip
b) Popover
c) Collapse
d) Scrollspy
01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 111
 MCQ s(Cont..)
Q 13. How does the Bootstrap grid system handle responsive design?
a) It uses media queries to adapt the layout for different screen sizes.
b) It automatically scales images based on the device's screen resolution.
c) It hides elements on smaller screens to improve performance.
d) It uses JavaScript to detect the device's screen size.
Q 14 IWhich of the following Bootstrap plugins is used to create responsive and
interactive navigation bars?
a) Typeahead
b) Scrollspy
c) Navbar
d) Tooltip
Q 15 Which Bootstrap plugin allows you to create modal dialogs with custom
content?
a) Modal
b) Popover
c) Dropdown
d) Collapse

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 112

 MCQ s(Cont..)
Q 16 In the Bootstrap grid system, how many columns does the grid layout consist
of?

a) 6
b) 9
c) 12
d) 15
Q 17 Which CSS classes are used to create a row in the Bootstrap grid system?
a) .row
b) .container
c) .col
d) .grid
Q 18 What class is used to make an element visible only on small devices
in Bootstrap?
a) .hidden-md
b) .visible-sm
c) .hidden-xs
d) .visible-md

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 113

 MCQ s(Cont..)
Q 19 What is the main purpose of the Bootstrap grid
system?
a) To create animations and transitions.
b) To handle server-side processing.
c) To manage the layout and responsiveness of web pages.
d) To handle backend data storage.
Q 20 What is Bootstrap?
a) A server-side scripting language.
b) A front-end framework for web development.
c) A database management system.
d) A protocol for secure data transfer.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 114

 Sessional Papers

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 115

 Sessional Papers

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 116

 Sessional Papers

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 117

 Sessional Papers

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 118

 Old Question Paper

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 119

 Old Question Paper(cont..)

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 120

 Old Question Paper(cont..)

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 121

 References

 Burdman, Jessica, “Collaborative Web Development” Addison

Wesley

 Xavier, C, “ Web Technology and Design” , New Age International

• Ivan Bayross,” HTML, DHTML, Java Script, Perl & CGI”, BPB Publication

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 122

 Recap of Unit 3

• Discussed about the concepts of CSS and its advantages

• Discussed about various types CSS with its uses and properties

Discussed the various types of Bootstrapping techniques in web

technology.

• Discussed about various fonts and color using CSS properties to

make our page interactive.

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 123

 NPTEL video / Other study links
Unit 1
https://youtu.be/96xF9phMsWA

https://youtu.be/Zopo5C79m2k

https://youtu.be/ZliIs7jHi1s

https://youtu.be/htbY9-yggB0

Unit 2
https://youtu.be/vHmUVQKXlVo

https://youtu.be/qz0aGYrrlhU

Unit 3
https://youtu.be/1Rs2ND1ryYc

Unit 4
https://youtu.be/-qfEOE4vtxE

https://youtu.be/PkZNo7MFNFg

Unit 5
https://youtu.be/_GMEqhUyyFM

01/24/2025 Rajat Kumar ACSE0505 (Web Tech) Unit 3 124