Noida Institute of Engineering and Technology, Greater Noida

Concept of CCS & Bootstrap

Unit: 3

Web Technology (ACSE0505) )

Deepshikha
Assistant Professor
Course Details CSE
(B Tech 5th Sem) NIET, Greater Noida

Deepshikha WT unit- 3
1
7/23/2023
 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)

7/23/2023 Deepshikha WT unit- 3 2 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
7/23/2023 3
Deepshikha WT unit- 3
 Conti…
23 Topic Links
24 MCQ (End of Unit)
25 Glossary Questions
26 Old Question Papers (Sessional + University)
27 Reference
28 Recap of Unit

7/23/2023 Deepshikha WT unit- 3 4

 Brief Introduction of Faculty

I am pleased to introduce myself as Deepshikha Dhillon, presently associated with

NIET, Greater Noida as Assistant Professor in CSE Department.
I completed my M.Tech. degree form Galgotias University, Lucknow in 2022. I have
been working in NIET Greater Noida for last 6 Month.

My area of interest is related to Software Engineering.

7/23/2023 Deepshikha WT unit- 3 5

 Evaluation Scheme

7/23/2023 Deepshikha WT unit- 23 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.

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT unit- 3 14

 Course Outcome
At the end of the semester, student will be able to:
Course CO Description Blooms’
Outcome Taxonomy
s (CO)
CO1 Recalling the basic facts and explaining the basic ideas
of Web technology and web hosting. K2

CO2 Applying and creating various HTML5 semantic

elements and application with working on HTML forms K6
for user input.
CO3 Understanding and applying the concepts of Creating
Style Sheet (CSS)3 and bootstrap. K3
CO4 Analysing and implementing concept of Java Script
and its applications. K5

CO5 Creating and evaluating dynamic web pages using the

concept of PHP K6

7/23/2023 Deepshikha WT 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
7/23/2023 Deepshikha WT unit- 3 16
 CO-PO Mapping
Mapping of Course Outcomes and Program Outcomes:
PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12

ACSE0505 3 2 2 1 1 1 1 1 3 3 2 3
1.1

ACSE0505 3 2 3 1 3 2 2 1 3 3 3 3
1.2
ACSE0505
1.3 3 2 3 2 3 2 2 2 3 3 2 3

ACSE0505
1.4 3 3 3 2 3 2 2 2 3 3 2 3

ACSE0505
1.5 3 3 3 2 3 2 2 2 3 3 2 3

Average 3 2.4 2.8 1.6 2.6 1.8 1.8 1.6 3 3 2.2 3

7/23/2023 Deepshikha WT unit- 3 17

 Result Analysis(2022-23)

7/23/2023 Deepshikha WT unit- 3 18

 Program Specific Outcomes

 PSO1: Work as a software developer, database administrator, tester

or networking engineer for providing solutions to the real world and
industrial problems.
 PSO2:Apply core subjects of information technology related to data
structure and algorithm, software engineering, web technology,
operating system, database and networking to solve complex IT
problems.
 PSO3:Practice multi-disciplinary and modern computing techniques
by lifelong learning to establish innovative career.
 PSO4: Work in a team or individual to manage projects with ethical
concern to be a successful employee or employer in IT industry.

7/23/2023 Deepshikha WT 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 3 2 3

CO2 3 3 3 2

CO3 3 3 2 2

CO4 3 2 3 2

CO5 3 2 2 2

AVG 3 2.6 2.4 2.2

7/23/2023 Deepshikha WT unit- 3 20

 Program Educational Objectives

• PEO1: able to apply sound knowledge in the field of

information technology to fulfill the needs of IT industry.

• PEO2:able to design innovative and interdisciplinary systems

through latest digital technologies.

• PEO3: able to inculcate professional and social ethics, team

work and leadership for serving the society.

• PEO4: able to inculcate lifelong learning in the field of

computing for successful career in organizations and R&D
sectors.

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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
7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT unit- 3 25

 Prerequisite

 Basic Knowledge of any programming language like

C/C++/Python/Java. .

 Familiarity with basic concepts of Internet.

7/23/2023 Deepshikha WT 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

7/23/202 3 Deepshikha WT 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..

7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT 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:

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT unit- 3 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.

7/23/2023 Deepshikha WT Unit- 3 33

 Concept of CSS 3: Creating Style Sheet

+ =

7/23/2023 Deepshikha WT 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
})();

7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT unit3 36

 Concept of CSS 3: Creating Style Sheet

A styled HTML document

var enrollment = 99;
Vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
var medianGrade = 2.8;
var credits = 5 + 4 + (2 * 3);
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
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.

7/23/2023 Deepshikha WT 3 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

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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:

7/23/2023 Deepshikha WT unit- 3 40

 Concept of CSS 3:CSS Properties

Deepshikha WT unit- 3
7/23/2023 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:

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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 --->

7/23/2023 Deepshikha WT unit- 7 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

7/23/2023 Deepshikha WT 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>
7/23/2023 Deepshikha WT 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;
}

7/23/2023 Depshikha WT 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.
==+
+==
=+
+=

7/23/2023 Deepshikha WT 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.

12/13/2024 Deepshikha WT 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; }

12/13/2024 Deepshikha WT UNIT 3 50

 Concept of CSS 3:CSS Styling

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

7/23/2023 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

7/2/2023 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

7/23/2023 53
Depshikha WT Unit-3
 Concept of CSS 3:CSS Styling

7/23/2023 Deepshikha WT 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!

7/23/2023 Pratik Singh WT 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

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT unit- 3 57

 Concept of CSS 3:CSS Styling

Computed
value
of font-
size
property

7/237/2023 Deepshikha WT 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

Deepshikha WT unit- 3
6723/2023 59
 Concept of CSS 3: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

Deepshikha WT unit- 3
7/23/2023 60
 Concept of CSS 3:CSS Styling

Deepshikha WT unit- 3
7/23/2023 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):

Deepshikha WT unit- 3
7/23/2023 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

Deepshikha WT unit- 3
7/23/2023 63
 Concept of CSS 3:CSS Styling

• font shortcut property:

Deepshikha WT unit- 3
7/23/2023 64
 Concept of CSS 3:CSS Styling

• font shortcut property:

specifying line-height (here, twice cell height)

any order

Deepshikha WT unit- 3
7/23/2023 65
 Concept of CSS 3:CSS Styling

Deepshikha WT unit- 3
7/23/2023 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#ColorKeywo
rds
–red/green/blue (RGB) values

Deepshikha WT unit- 3
7/23/2023 67
 Concept of CSS 3:CSS Styling

Deepshikha WT unit- 3
7/23/2023 68
 Concept of CSS 3:CSS Styling

Deepshikha WT unit- 3
7/23/2023 69
 Concept of CSS 3:CSS Box Model

• Every rendered element occupies a box:

Deepshikha WT unit- 3
7/23/2023 70
 Concept of CSS 3:CSS Box Model

Deepshikha WT unit- 3
7/23/2023 71
 Concept of CSS 3:CSS Box Model

Deepshikha WT unit- 3
7/23/2023 72
 Concept of CSS 3:CSS Box Model

Deepshikha WT unit- 3
7/23/2023 73
 Concept of CSS 3:CSS Box Model

Deepshikha WT unit- 3
7/23/2023 74
 Concept of CSS 3:CSS Box Model

Deepshikha WT unit- 3
7/23/2023 75
 Concept of CSS 3:CSS Box Model

Deepshikha WT unit- 3
7/23/2023 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

Deepshikha WT unit- 3
7/23/2023 77
 Using the <style> element within the HTML file
Using the <style> element within the HTML file
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.

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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
d) id(header)

7/23/2023 Deepshikha WT unit- 3 80

 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.
c) adjust the spacing between an element's border and content.
d) align an element horizontally within its parent container.

7/23/2023 Deepshikha WT unit- 3 81

 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.
d) adding space between an element and its neighboring elements.
7/23/2023 Deepshikha WT 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;
}
}

7/23/2023 Deepshikha WT 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; }

7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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;
}

7/23/2023 Deepshikha WT unit- 3 87

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

• 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
})();

• The function above is actually an anonymous self-invoking function (function

without name)

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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?
a) font-size b) text-size c) font-style d) size

7/23/2023 Deepshikha WT unit- 3 90

 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.
c) When an element is hovered over with the mouse pointer.
d) When an element is the first child of its parent.
7/23/2023 Deepshikha WT unit- 3 91
 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
d) #first-child
7/23/2023 Deepshikha WT unit- 3 92
 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 .

Q 19 The CSS property "float" is
commonly used for:
d) Adding shadows to an element.
b) Creating rounded corners on an element.
c) Positioning an element to the left or right and allowing other content to wrap around it.
d) Applying a gradient background to an element.
Q 20 Which value of the "display" property is used to hide an element from the page layout but still reserves its space?
e) hidden
b) invisible
c) none
d) collapse
6/7/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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.
Q 5 The class "col-md-6" in Bootstrap represents:
a) A column with a width of 6 pixels.
b) A column that spans 6 columns out of 12 in medium-sized screens.
c) A column that spans 6 columns out of 12 in all screen sizes.
d) A column that spans 6 columns in extra-large screens.
7/23/2023 Deepshikha WT 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.
Q 9 Which class is used to create a responsive image in Bootstrap that scales with the size of its parent
container?
a) .img-responsive b) .img-fluid c) .img-scale d) .img-fit
Q 10 The Bootstrap "modal" component is used for:
a) Creating responsive grid layouts.
b) Displaying alerts and notifications.
c) Creating pop-up windows for dialogues or messages.
d) Styling buttons and links.
7/23/2023 Deepshikha WT 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.
7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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?
a) Datepicker.js b) Calendar.js c) Datetimepicker.js d) DatePicker.plugin
Q 5 How do you enable the Bootstrap Collapse plugin for an element?
a) data-collapse="true" b) data-toggle="collapse" c) data-plugin="collapse" d) data-collapseable="true“
Q 6 Which Bootstrap plugin is used for creating a carousel or image slider?
a) Slideshow.js b) Carousel.js c) Slider.js d) Glide.js
Q 7 What is the purpose of the Bootstrap Popover plugin?
a) To display image galleries
b) To create dynamic pop-up ads
c) To provide additional information on hover
d) To create fixed-position notifications
7/23/2023 Deepshikha WT 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“
Q 12 Which Bootstrap plugin is used to add a Google Maps display to a webpage?
c) GoogleMaps.js
b) MapEmbed.js
c) GMaps.js
d) MapsAPI.js

7/23/2023 Deepshikha WT 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
Q Which Bootstrap plugin is used to add video players to a webpage?
c) VideoPlayer.js
b) Media.js
c) Video.js
d) MediaPlayer.js

7/23/2023 Deepshikha WT 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
Q 20 Which Bootstrap plugin is used to create a responsive, multi-level menu?
c) MultiMenu.js
b) MegaMenu.js
c) DropdownMenu.js
d) SubMenu.js
7/23/2023 Deepshikha WT 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]

7/23/2023 Deepshikha WT 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
7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT 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
Which Bootstrap plugin provides a popover that appears when the user
Q 12.

hovers over an element?

a) Tooltip
b) Popover
c) Collapse
d) Scrollspy
7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT unit- 3 114

 Sessional Papers

7/23/2023 Deepshikha WT unit- 3 115

 Sessional Papers

7/23/2023 Deepshikha WT unit- 3 116

 Sessional Papers

7/23/2023 Deepshikha WT unit- 3 117

 Sessional Papers

7/23/2023 Deepshikha WT unit- 3 118

 Old Question Paper

7/23/2023 Deepshikha WT unit- 3 119

 Old Question Paper(cont..)

7/23/2023 Deepshikha WT unit- 3 120

 Old Question Paper(cont..)

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT 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.

7/23/2023 Deepshikha WT 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

7/23/2023 Deepshikha WT unit- 3 124

 Thank You

Deepshikha WT unit- 3
7/23/2023 125