UNIT-3 Web Tech

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

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

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

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.

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

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

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.

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

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.

Result Analysis
• Web Technology Result of 2020-21: 96.97%
• Average Marks: 53.33

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

End Semester Question Paper Templates
2. Attempt of the following: 5 x 2 = 20

1 2
2 2
. .
5 2
SECTION B
3. Attempt any five part of the following: 5 x 6 = 30
1 6
. 6
7 6
4. Attempt any one part of the following: 1 x 10 = 10

1 10
2 10
1 10
2 10

1 10
2 10


1 10
2 10
1 10
2 10

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

+/Python/Java.
 Familiarity with basic concepts of Internet.

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

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.

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.

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:



href attribute provides style sheet URL


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.

• A styled HTML document
produced by the style sheet style2.css
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.

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

sheets:
This document will be printed differently than it is displayed

Concept of CSS 3:CSS Properties
• Parts of a style rule (or statement)

• Single element type:
• Multiple element types:
• All element types:
• Specific elements by id:


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

• 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

Concept of CSS 3:CSS Styling
• A font is a mapping from code points to glyphs
Glyph (visual representation)
character cell
(content area)
glyphs do not necessary stay inside cells!

character cell
(content area)
• 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


character cell
(content area)
• 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

• 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

generic
fonts are
system-
specific

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

generic
fonts are
system-
specific

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

• All CSS length values except 0 need units

Computed value
of font-size
property

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


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

• When line-height is greater than cell height:
• Inheritance of line-height:
– Specified value if normal or unit-less number
– Computed value otherwise

• font shortcut property:

Initial values used if no value specified in font

property list (that is, potentially reset)

specifying line-height (here, twice cell height)
size and family required,

any order order-dependent

• 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



Concept of CSS 3:CSS Box Model
• Every rendered element occupies a box:
(or outer edge)
(or inner edge)









• If multiple declarations apply to a property, the last declaration

overrides earlier specifications
Left border is 30px wide,

inset style, and red

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

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.

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

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

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

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

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.

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.

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

Topic
• 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.
• 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
Faculty Video Links, Youtube & NPTEL Video Links and Online
Courses Details
Youtube/other Video Links

• https://getbootstrap.com/docs/3.3/components/
• https://websitesetup.org/wp-content/uploads/2020/03/Bootstrap-Cheat-
Sheet-websitesetup.org_.pdf
• https://wiki.lib.sun.ac.za/images/0/07/Bootstrap-tutorial.pdf
• https://youtu.be/1Rs2ND1ryYc

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 = quiz.css>
b)<style src = "quiz.css">
c)<stylesheet> quiz.css </stylesheet>
d)<link rel="stylesheet" type="quiz/css" href="quiz.css">
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

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

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.

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

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

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

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

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
Sessional Papers

Sessional Papers

Sessional Papers

Sessional Papers

Old Question Paper

Old Question Paper(cont..)

Old Question Paper(cont..)

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?

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

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

References
Thank You

UNIT-3 Web Tech

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UNIT-3 Web Tech

Uploaded by

Copyright:

Available Formats

Noida Institute of Engineering and Technology, Greater Noida

Concept of CSS & Bootstrap

06/15/2022 Neha Katiyar WT Unit 1

06/15/2022 Neha Katiyar WT Unit 1 2

Unit -1 Basics of Web Technology & Web Hosting 8 Hours

06/15/2022 Neha Katiyar WT Unit 1 3

Unit-3 Concepts of CSS3& Bootstrap 8 Hours

Unit-4 JavaScript and ES6 8 Hours

Unit-5 Introduction to PHP 8 Hours

06/15/2022 Neha Katiyar WT Unit 1 5

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

2. Ian Pouncey, Richard York, “Beginning CSS: Cascading Style Sheets

06/15/2022 Neha Katiyar WT Unit 1 6

06/15/2022 Neha Katiyar WT Unit 1 7

CO2 Applying and creating various HTML5 semantic elements and

CO3 Understanding and applying the concepts of Creating Style

CO4 Analysing and implementing concept of Java Script and its

06/15/2022 Neha Katiyar WT Unit 1 8

06/15/2022 Neha Katiyar WT Unit 1 10

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

06/15/2022 Neha Katiyar WT Unit 1 11

Mapping of Program Specific Outcomes and Course Outcomes:

Course Outcomes Program Specific Outcomes

PSO1 PSO2 PSO3 PSO4

AVG 3 2.6 2.4 2.2

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

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

• PEO2:able to design innovative and interdisciplinary

• PEO3: able to inculcate professional and social ethics,

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

06/15/2022 Neha Katiyar WT Unit 1 13

• Web Technology Result of 2020-21: 96.97%

• Average Marks: 53.33

06/15/2022 Neha Katiyar WT Unit 1 14

06/15/2022 Neha Katiyar WT Unit 1 15

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

Q.No. Question Marks CO

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

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

06/15/2022 Neha Katiyar WT Unit 1 17

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

06/15/2022 Neha Katiyar WT Unit 1 18

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

 Familiarity with basic concepts of Internet.

06/15/2022 Neha Katiyar WT Unit 1 19

• To understand this term in a better manner, let’s break it down

06/15/2022 Neha Katiyar WT Unit 1 21

06/15/2022 Neha Katiyar WT Unit 1 22

Objective of the above topics:

•To know how to CSS with Bootstrapping Process.

•To understand the components and their functionalities of CSS

06/15/2022 Neha Katiyar WT Unit 1 23

• Cascading Style Sheets (CSS)

– produced by the style sheet style1.css:

06/15/2022 Neha Katiyar WT Unit 1 24

06/15/2022 Neha Katiyar WT Unit 1 25

06/15/2022 Neha Katiyar WT Unit 1 26

href attribute provides style sheet URL

06/15/2022 Neha Katiyar WT Unit 1 27

06/15/2022 Neha Katiyar WT Unit 1 28

06/15/2022 Neha Katiyar WT Unit 1 29

• A styled HTML document

produced by the style sheet style2.css

06/15/2022 Neha Katiyar WT Unit 1 30

3= High 2= Medium *1 = Low