Noida Institute of Engineering and Technology, Greater Noida

Concept of CSS & Bootstrap

Unit: 3

Web Technology
Ashish Sharma
Assistant Professor
Course Details CS
(B Tech, CS 5th Semester)

06/15/2022 Neha Katiyar WT Unit 1

1
 Evaluation Scheme

06/15/2022 Neha Katiyar WT Unit 1 2

 Subject Syllabus

Unit -1 Basics of Web Technology & Web Hosting 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,WebStandardsandW3C recommendations,
Web Hosting: Web Hosting Basics, Types of Hosting Packages, Registering domains,
Defining Name Servers, Using Control Panel, Creating Emails in C panel, Using FTP
Client, Maintaining a Website.
Unit-2 Introduction to HTML & XML 8 Hours
HTML: What is HTML, DOM- Introduction to Document Object Model, Basic structure
of an HTML documents, Markup 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 datalist, 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

06/15/2022 Neha Katiyar WT Unit 1 3

 Subject Syllabus

Unit-3 Concepts of CSS3& Bootstrap 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,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.

Unit-4 JavaScript and ES6 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 ,
JSArrays,WorkingwithArrays,JSObjects,JSFunctions,UsingJavaScriptinRealtime,Validation
ofForms,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.
06/15/2022 Neha Katiyar WT Unit 1 4
 Subject Syllabus

Unit-5 Introduction to PHP 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.

06/15/2022 Neha Katiyar WT Unit 1 5

 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

06/15/2022 Neha Katiyar WT Unit 1 6

 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.

06/15/2022 Neha Katiyar WT Unit 1 7

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

CO2 Applying and creating various HTML5 semantic elements and

application with working on HTML forms for user input.
K3, K6

CO3 Understanding and applying the concepts of Creating Style

Sheet (CSS)3 and bootstrap. K2, K3

CO4 Analysing and implementing concept of Java Script and its

applications. K4, K6

CO5 Creating and evaluating dynamic web pages using the concept
of PHP
K5, K6

06/15/2022 Neha Katiyar WT Unit 1 8

 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
06/15/2022 Neha Katiyar WT Unit 1 9
 CO-PO Mapping
Mapping of Course Outcomes and Program Outcomes:
Subject
Code is
Not PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12
Assigned

3 2 2 1 1 1 1 1 3 3 2 3

3 2 3 1 3 2 2 1 3 3 3 3

3 2 3 2 3 2 2 2 3 3 2 3

3 3 3 2 3 2 2 2 3 3 2 3

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

06/15/2022 Neha Katiyar WT Unit 1 10

 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.

06/15/2022 Neha Katiyar WT Unit 1 11

 COs and PSOs Mapping

Mapping of Program Specific Outcomes and Course Outcomes:

Course Outcomes Program Specific Outcomes

PSO1 PSO2 PSO3 PSO4

3 3 2 3

3 3 3 2

3 3 2 2

3 2 3 2

3 2 2 2

AVG 3 2.6 2.4 2.2

*3= High *2= Medium *1 = Low

06/15/2022 Neha Katiyar WT Unit 1 12
 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.

06/15/2022 Neha Katiyar WT Unit 1 13

 Result Analysis

• Web Technology Result of 2020-21: 96.97%

• Average Marks: 53.33

06/15/2022 Neha Katiyar WT Unit 1 14

 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
[Link]. Question Marks CO
1 1
2 1
. .
10 1

06/15/2022 Neha Katiyar WT Unit 1 15

 End Semester Question Paper Templates

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

[Link]. Question Marks CO
1 2
2 2
. .
5 2

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

[Link]. Question Marks CO

1 6
. 6
7 6
06/15/2022 Neha Katiyar WT Unit 1 16
 End Semester Question Paper Templates

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

[Link]. Question Marks CO

1 10
2 10
5. Attempt any one part of the following: 1 x 10 = 10
[Link]. Question Marks CO
1 10
2 10

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

[Link]. Question Marks CO

1 10
2 10

06/15/2022 Neha Katiyar WT Unit 1 17

 End Semester Question Paper Templates

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

[Link]. Question Marks CO

1 10
2 10
8. Attempt any one part of the following: 1 x 10 = 10
[Link]. Question Marks CO
1 10
2 10

06/15/2022 Neha Katiyar WT Unit 1 18

 Prerequisite

 Basic Knowledge of any programming language like C/C+

+/Python/Java.

 Familiarity with basic concepts of Internet.

06/15/2022 Neha Katiyar WT Unit 1 19

 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.
• [Link]
search_query=Web+Technonogies
06/15/2022 Neha Katiyar WT Unit 1 20
 Unit 3 Content

 Introduction:
 Creating Style Sheet
 CSS Properties
 CSS Styling(Background, Text Format, Controlling Fonts) , Working
with block elements and objects , Working with Lists and Tables
CSSId and Class
BoxModel(Introduction,Borderproperties,PaddingProperties,Margi
nproperties)
 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.

06/15/2022 Neha Katiyar WT Unit 1 21

 Unit 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.

06/15/2022 Neha Katiyar WT Unit 1 22

 Topic Objective

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.

06/15/2022 Neha Katiyar WT Unit 1 23

 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 [Link]:

06/15/2022 Neha Katiyar WT Unit 1 24

Concept of CSS 3: Creating Style Sheet

06/15/2022 Neha Katiyar WT Unit 1 25

Concept of CSS 3: Creating Style Sheet

06/15/2022 Neha Katiyar WT Unit 1 26

Concept of CSS 3: Creating Style Sheet

href attribute provides style sheet URL

06/15/2022 Neha Katiyar WT Unit 1 27

Concept of CSS 3: Creating Style Sheet

06/15/2022 Neha Katiyar WT Unit 1 28

 Concept of CSS 3: Creating Style Sheet

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.

06/15/2022 Neha Katiyar WT Unit 1 29

 Concept of CSS 3: Creating Style Sheet

• A styled HTML document

produced by the style sheet [Link]

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.

06/15/2022 Neha Katiyar WT Unit 1 30

 Concept of CSS 3: Creating Style Sheet

• Single document can be displayed on multiple media platforms by tailoring style

sheets:

This document will be printed differently than it is displayed

06/15/2022 Neha Katiyar WT Unit 1 31

 Concept of CSS 3:CSS Properties

• Parts of a style rule (or statement)

06/15/2022 Neha Katiyar WT Unit 1 32

 Concept of CSS 3:CSS Properties

• Single element type:

• Multiple element types:

• All element types:

• Specific elements by id:

06/15/2022 Neha Katiyar WT Unit 1 33

Concept of CSS 3:CSS Properties

06/15/2022 Neha Katiyar WT Unit 1 34

 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:

06/15/2022 Neha Katiyar WT Unit 1 35

 Concept of CSS 3:CSS Properties

• Elements belonging to a style class:

– Referencing a style class in HTML:

Elements of a certain type and class:

this span belongs to three style classes

06/15/2022 Neha Katiyar WT Unit 1 36

 Concept of CSS 3:CSS Styling

• A font is a mapping from code points to glyphs

Glyph (visual representation)

character cell
(content area)
06/15/2022 Neha Katiyar WT Unit 1 37
 Concept of CSS 3:CSS Styling

• A font is a mapping from code points to glyphs

glyphs do not necessary stay inside cells!

06/15/2022 Neha Katiyar WT Unit 1 38

 Concept of CSS 3:CSS Styling

• A font is a mapping from code points to glyphs

Glyph (visual representation)

character cell
(content area)
06/15/2022 Neha Katiyar WT Unit 1 39
 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

06/15/2022 Neha Katiyar WT Unit 1 40

 Concept of CSS 3:CSS Styling

• A font is a mapping from code points to glyphs

Glyph (visual representation)

character cell
(content area)
06/15/2022 Neha Katiyar WT Unit 1 41
 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

second choice font

06/15/2022 Neha Katiyar WT Unit 1 42

 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

generic

06/15/2022 Neha Katiyar WT Unit 1 43

 Concept of CSS 3:CSS Styling

generic
fonts are
system-
specific

06/15/2022 Neha Katiyar WT Unit 1 44

• 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!

06/15/2022 Neha Katiyar WT Unit 1 45

 Concept of CSS 3:CSS Styling

generic
fonts are
system-
specific

06/15/2022 Neha Katiyar WT Unit 1 46

 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

06/15/2022 Neha Katiyar WT Unit 1 47

 Concept of CSS 3:CSS Styling

Computed value
of font-size
property

06/15/2022 Neha Katiyar WT Unit 1 48

 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

parent element’s font is

reference font
06/15/2022 Neha Katiyar WT Unit 1 49
 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

06/15/2022 Neha Katiyar WT Unit 1 50

Concept of CSS 3:CSS Styling

06/15/2022 Neha Katiyar WT Unit 1 51

 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):

06/15/2022 Neha Katiyar WT Unit 1 52

 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

06/15/2022 Neha Katiyar WT Unit 1 53

 Concept of CSS 3:CSS Styling

• font shortcut property:

06/15/2022 Neha Katiyar WT Unit 1 54

 Concept of CSS 3:CSS Styling

• font shortcut property:

Initial values used if no value specified in font

property list (that is, potentially reset)

06/15/2022 Neha Katiyar WT Unit 1 55

 Concept of CSS 3:CSS Styling

• font shortcut property:

specifying line-height (here, twice cell height)

size and family required,

any order order-dependent
06/15/2022 Neha Katiyar WT Unit 1 56
Concept of CSS 3:CSS Styling

06/15/2022 Neha Katiyar WT Unit 1 57

 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
[Link]
– red/green/blue (RGB) values

06/15/2022 Neha Katiyar WT Unit 1 58

Concept of CSS 3:CSS Styling

06/15/2022 Neha Katiyar WT Unit 1 59

Concept of CSS 3:CSS Styling

06/15/2022 Neha Katiyar WT Unit 1 60

 Concept of CSS 3:CSS Box Model

• Every rendered element occupies a box:

(or outer edge)

(or inner edge)

06/15/2022 Neha Katiyar WT Unit 1 61
Concept of CSS 3:CSS Box Model

06/15/2022 Neha Katiyar WT Unit 1 62

Concept of CSS 3:CSS Box Model

06/15/2022 Neha Katiyar WT Unit 1 63

Concept of CSS 3:CSS Box Model

06/15/2022 Neha Katiyar WT Unit 1 64

Concept of CSS 3:CSS Box Model

06/15/2022 Neha Katiyar WT Unit 1 65

Concept of CSS 3:CSS Box Model

06/15/2022 Neha Katiyar WT Unit 1 66

Concept of CSS 3:CSS Box Model

06/15/2022 Neha Katiyar WT Unit 1 67

Concept of CSS 3:CSS Box Model

06/15/2022 Neha Katiyar WT Unit 1 68

Concept of CSS 3:CSS Box Model

06/15/2022 Neha Katiyar WT Unit 1 69

 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

06/15/2022 Neha Katiyar WT Unit 1 70

 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 h2, .thisOtherClass, .yetAnotherClass
{ {
color: red; color: red;
} }
.thisOtherClass Grouped CSS h1, h2, h3, h4, h5, h6
{ {
color: red; Normal CSS
color: blue;
} }
.yetAnotherClass
{ color: red; }
06/15/2022 Neha Katiyar WT Unit 1 71
 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; }

06/15/2022 Neha Katiyar WT Unit 1 72

 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.

06/15/2022 Neha Katiyar WT Unit 1 73

 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

06/15/2022 Neha Katiyar WT Unit 1 74

 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;
}

06/15/2022 Neha Katiyar WT Unit 1 75

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

06/15/2022 Neha Katiyar WT Unit 1 76

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

• Validate your HTML

[Link]
• Validate your CSS
[Link]/css-validator/
• Check for web accessibility
[Link]

06/15/2022 Neha Katiyar WT Unit 1 77

 Concept of CSS 3:Bootstrap

• Bootstrap is a free front-end framework for faster and easier web

development.

• Bootstrap includes HTML and CSS based design templates for

typography, forms, buttons, tables, navigation, modals, image carousels
and many other, as well as optional JavaScript plug-in

• Bootstrap also gives you the ability to easily create responsive designs.

• Responsive web design is about creating web sites which automatically

adjust themselves to look good on all devices, from small phones to
large desktops.

06/15/2022 Neha Katiyar WT Unit 1 78

 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.

06/15/2022 Neha Katiyar WT Unit 1 79

 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.

06/15/2022 Neha Katiyar WT Unit 1 80

 Concept of CSS 3:Bootstrap
Topic

• Bootstrap Components
[Link]
• This is the basic Bootstrap package that you will need to
download. CSS is a style sheet language for static
information.
[Link]
• 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.
06/15/2022 Neha Katiyar WT Unit 1 81
 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
06/15/2022 Neha Katiyar WT Unit 1 82
 Faculty Video Links, Youtube & NPTEL Video Links and Online
Courses Details

Youtube/other Video Links

• [Link]
• [Link]
Sheet-websitesetup.org_.pdf
• [Link]
• [Link]

06/15/2022 Neha Katiyar WT Unit 1 83

 Daily Quiz

Ques1. What is the full form of CSS?

a) Cascading scripting sheet
b) Cascading Style sheet
c) Cascading script sheet
Ques2. Which of the following is the correct syntax to add the external
stylesheet in CSS?
a)<style src = [Link]>
b)<style src = "[Link]">
c)<stylesheet> [Link] </stylesheet>
d)<link rel="stylesheet" type="quiz/css" href="[Link]">
Ques.3 Which of the below CSS properties is used to change the background
color of CSS ?
a)bg color
b)color-background
c)background-color
d)color   06/15/2022 Neha Katiyar WT Unit 1 84
 Daily Quiz

Qns 4 The property in CSS used to change the background color of an element is –

a. Bgcolor
b. Color
c. background-color
d. All of the above

Qns 5 The CSS property used to control the element's font-size is -

e. text-style
f. text-size
g. font-size
h. None of the above

06/15/2022 Neha Katiyar WT Unit 1 85

 Daily Quiz

Ques6. Which of the below is the correct syntax to put a line over text in CSS?
a)text-decoration: line
b)text-decoration: none
c)text-decoration: over line
d)text-decoration: underline
Ques7. Which below property of CSS is used to set the indentation of the
first line in a block of text ?
a)text-indent property
b)text-underlne-property
c)text-decoration none
d)text-overflow property

06/15/2022 Neha Katiyar WT Unit 1 86

 Weekly Assignment

1) Discuss the advantages of using CSS

2) What are the limitations of CSS?

3) How to include CSS in the webpage?

4) What are the different types of Selectors in CSS?

5) Discuss the various property used for changing the font face.

6) Explain inline, inline-block, and block CSS.

06/15/2022 Neha Katiyar WT Unit 1 87

 MCQ s

1) The CSS property used to control the element's font-size is -

a. text-style
b. text-size
c. font-size
d. None of the above

2) The HTML attribute used to define the internal stylesheet is –

e. <style>
f. Style
g. <link>
h. <script>

3) Which of the following CSS property is used to set the background image
of an element?
i. background-attachment
j. background-image
k. background-color
l. None of the above

06/15/2022 Neha Katiyar WT Unit 1 88

 MCQ s(Cont..)
• Web is a huge collection of ………..of information linked to each other
around the globe.
a. Pages
b. Website
c. HTML
• Father of WWW
a. J.T. Thomson
b. Dennis Ritchie
c. Tim Berners-Lee
• Who is responsible for creating the look and feel of a site?
a. Creative Lead
b. Programmer
c. Analyst
d. Designer

06/15/2022 Neha Katiyar WT Unit 1 89

 MCQ s(Cont..)

Which of the following are information retrieval services on the internet?

i) World Wide Web  ii) File Transfer Protocol  iii) Telnet  iv) Email
A) i, ii and iv only
B) ii, iii and iv only
C) i, ii and iii only
D) All i, ii, iii and iv

. ………….. allows remote accessing to the files which contain programs,

technical handouts, reports etc. 
A) Remote Desktop
B) FTP 
C) Telnet
D) Chat

06/15/2022 Neha Katiyar WT Unit 1 90

 Glossary Questions

………….. allows remote accessing to the files which contain programs, technical
handouts, reports etc. 
A) Remote Desktop
B) FTP 
C) Telnet
D) Chat
……………. is a global hypertext system that was initially developed in 1989 by
Tim Berners Lee. 
A) FTP
B) Telnet
C) www
D) email 
The ……………. application is built with a protocol interpreter, a data transfer,
process and user interface.
A) TCP
B) FTP
C) Telnet
D) Chat

06/15/2022 Neha Katiyar WT Unit 1 91

 Glossary Questions
---------------The following type of HTML tag is used to define an internal style sheet?
a) <script>
b) <link>
c) <class>
d) <style>

---------------- CSS property is used to make the text bold?

a) text-decoration: bold
b) font-weight: bold
c) font-style: bold
d) text-align: bold

CSS ------------------defines the different properties of all four sides of an element’s

border in a single declaration?

a) border-collapse
b) border-width
c) padding
d) border
06/15/2022 Neha Katiyar WT Unit 1 92
 Sessional Papers

06/15/2022 Neha Katiyar WT Unit 1 93

 Sessional Papers

06/15/2022 Neha Katiyar WT Unit 1 94

 Sessional Papers

06/15/2022 Neha Katiyar WT Unit 1 95

 Sessional Papers

06/15/2022 Neha Katiyar WT Unit 1 96

 Old Question Paper

06/15/2022 Neha Katiyar WT Unit 1 97

Old Question Paper(cont..)

06/15/2022 Neha Katiyar WT Unit 1 98

Old Question Paper(cont..)

06/15/2022 Neha Katiyar WT Unit 1 99

 Expected Questions for University Exam

• What is Cascading Style Sheet? Also discuss about the view

options of CSS?
• Discuss about the multiple media platform about style sheet?
• Discuss about CSS properties?
• What is CSS Style sheet?
• What is Bootstrapping and also discuss about its components?
• Explain in details bootstrapping grid system?

06/15/2022 Neha Katiyar WT Unit 1 100

 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

06/15/2022 Neha Katiyar WT Unit 1 101

 Recap of Unit 1

• 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

06/15/2022 Neha Katiyar WT Unit 1 102

 References

Thank You

06/15/2022 Neha Katiyar WT Unit 1 103