Index

Chapter 1: Introduction to Web ............................................................................................................... 2

Chapter 2: Introduction ........................................................................................................................... 5
Chapter 3: Basics Of Html ...................................................................................................................... 10
Chapter 4: New elements in html5 ........................................................................................................ 46
CHAPTER 5: Lists .................................................................................................................................... 55
Chapter 6: Forms ................................................................................................................................... 62
Chapter 7: Table ................................................................................................................................... 75
Chapter 8: Canvas And SVG .................................................................................................................. 87
Chapter 9: Multimedia in html ............................................................................................................... 96
Chapter 10: Geolocation ...................................................................................................................... 109
Chapter 11: Introduction to CSS........................................................................................................... 116
Chapter 12: Selectors, Background and borders .................................................................................. 125
Chapter 13: Text Effect and Fonts ....................................................................................................... 149
Chapter 14: Layouts ............................................................................................................................ 166
Chapter 15: Box Model ....................................................................................................................... 176
Chapter 16: CSS Pagination.................................................................................................................. 182
Chapter 17: Buttons ............................................................................................................................ 186
 Chapter 1: Introduction to Web

What is Web?

• The Web also known as World Wide Web

• Web consists of many web pages that can be accessed by a Web browser
• Browsers such as Internet Explorer, Google Chrome or Mozilla Firefox are used to access
Web documents, or Web pages, which are connected via links
• The Web is just one of the ways that information is shared over the Internet
• A Web page is an individual document within the overall site

What do you mean by Website?

• A Website is a collection of web pages that can be accessed and interacted with by
Internet users
• The collections of files that make up a website are stored on a host machine, or server
• In order to access a site your computer needs to connect to the host machine using the
Internet
• In order to view a website, a special program call Browser, is required. Examples of
browsing software are Internet Explorer, Firefox, Google Chrome, and Safari.
W3C and W3C Members

• W3C stands for World Wide Web Consortium

• W3C was created in 1994
• It was mainly created to provide standardization and coordination to the development of
the World Wide Web
• More than 500 companies and institutions are W3C Members
• Tim Berners-Lee inventor of the WWW including HTML, HTTP, and URIs, is the
Director of the W3C since 1994
• Main components of W3C are HTML, XML, CSS, RDF.

Multiple Choice Questions

1) What is web know as?
a) World wide web
b) World web wide
c) World webinar web
d) World web

2) Web consists of ______.

a) Documents
b) Pages
c) Servers
d) Html tags

3) W3C stands for?

a) World wide web technology
b) World web web technology
c) World wide web
d) World wide web Consortium
 4) When was W3C Created?
a) 1994
b) 2000
c) 1992
d) 1993

5) Who invented WWW?

a) Tim Berners-Lee
b) Guido Van Rossum
c) Robert
d) Gosling

Exercises
1) Gather more details of WWW on Wikipedia.
2) What is a website?
3) What is a browser?
4) What do you call a set of interconnected computers?

Keyword
document, web page, browser, html, Consortium, standardization, website

Multiple Choice Questions

Answers
1) a

2) b

3) c
4) a

5) a

Chapter 2: Introduction

About HTML 5

• HTML is a markup language

• Which is interpreted by web browsers to render pages.
• Each HTML elements are defined by tags within angle brackets
(< and >) to determine the content and layout of a web page
• The latest update of HTML is HTML5, which has a lot of new features and standards for
web designing
• HTML5 has been developed by two separate groups: the World Wide Web Consortium
(W3C) and the Web Hypertext Application Technology Working Group (WHATWG)

History of HTML

• 1991–1999: HTML is created by web legend Tim Berners-Lee in 1991, and HTML
versions 1–4 are developed throughout the 1990s by W3C. In these early days of
widespread internet use, HTML efficiently displays the vast majority of web content,
since at this time it largely consists of static, non-interactive sites.
 • 2000: W3C recommends XHTML 1.0 – an XML-based markup language that
mirrors/extends HTML. Previous versions of HTML are now showing their age,
struggling to handle the latest generation of multimedia, interactive sites.
• 2004: Development of HTML is closed by W3C, who instead decide to focus on
XHTML. WHATWG is formed to develop HTML further, with the aim of reflecting the
modern dynamic web, while keeping backwards compatibility with existing HTML code.
• 2004–2006: WHATWG gains support from major web browser developers. In 2006,
W3C also announces its support for the project.
• 2008: The first public draft of HTML5 is released by WHATWG.
• 2012: W3C and WHATWG decide to separate development of HTML5. W3C would
work on a definitive standard of HTML5, while WHATWG would pursue development
of a ‘living standard’ – a continual evolution with ongoing improvements.
• 2014: The official HTML5 release date, according to W3C recommendations.

New Features in HTML5

• Addition of Audio and Video Tags. Which allows developers to embed a video or audio
on their website
• Header and Footer tags
• HTML5 allows to use a <figure> element to mark up a photo in a document, and a <fig
caption> element to define a caption for the photo.
• <nav> tags which will provides lots of navigation links
• Progress tags which are used to check the progress of a tasks

Backward Compatibility
  Backwards compatibility is nothing but when the obvious one of a version of a
specification with previous versions of the same, and another one of new technologies
with earlier ones can be used
 Nobody forgets about the former, because there is nothing the developers of a new
version know so well as the previous version they are trying to replace.

 But the latter is less obvious. It is, in a sense, the complement of extensibility and
modularity. Whereas those two stresses the importance of developing technology in such
a way that it will work together with future new technologies, backwards compatibility
stresses the importance of working well with what is already there. No new technology is
designed in a void.

 Not only does a new technology normally have to be compatible with earlier ones in
technical matters, but also in the mental models that users have of the old technology.
Introducing new paradigms always has a cost, that has to be set off against future
benefits.

 Take the example of CSS: people using HTML, and indeed most word-processors, are
used to attaching stylistic information to concrete elements.

 To make style sheets acceptable at all, CSS has to allow people to continue working in
the same way, while expanding their options.

 Sometimes a new technology replaces a previous one, although it is rare that it replaces
the old one completely. PNG in principle is able to replace GIF completely, and XHTML
can completely replace HTML. But even in such cases, some form of backward-
compatibility is needed in the form of facilities for mechanical conversion of resources to
the new format.

 The Web itself is designed to be backwards compatible.

 The URLs that give the location of resources allow for access via FTP and other
protocols rather than just HTTP, and HTTP in turn allows for arbitrary types of files, not
just HTML.
 And, as a final example, HTML allows any kind of file to be hyperlinked (via the A
element) or included (by means of the IMG or OBJECT elements), not just HTML and
PNG

Multiple Choice Questions

 1) Full form HTML?
a) Hypertext markup language
b) Hypertext marked language
c) Hyper texting markup language
d) Hyper texts markup language

2) How many groups were included to create html 5?

a) 4
b) 2
c) 3
d) 5

3) What is the new version of html?

a) HTML2
b) HTML1
c) HTML5
d) HTML3

4) Html elements are made up of

a) Tags
b) Bars
c) Documents
d) Header

5) Html is a …. language
a) Programming language
b) Scripting language
c) Markup language
d) Not a language

Exercise
1)Difference between markup and programming language
2)What are the new features of html5
3)What do you mean by a markup language
4)What do you mean by backward compatibility
5)Write a summary on history of Html
Keyword
Scripting, markup, bars, programming, interactive, hyperlinked, facilities,
programming, language, evolution, widespread

Multiple Choice Questions

Answers
1) a

2) b

3) c

4) a

5) c
 Chapter 3: Basics Of Html

HTML Documents

• An HTML document is made up of various tags

• And this html documents are saved as .html file
• Html documents starts with <html> tag and ends with a <html/> tag
• All HTML documents must start with tag <!DOCTYPE html> called document type
declaration

What are Tags?

• A tag is an element inserted into HTML that defines how a particular area of the
document should be formatted.
• Mainly we have two tags opening and closing tags
• An opening tag defines the beginning of a specific behavior, while a closing tag signals
the end of this particular behavior
• For instance, the very first tag in an HTML document would be <html>.
• Likewise, the very last tag in the same document will be</html>
• Opening tags starts with < followed by tag name followed by >
• Closing tags starts with < followed by tag name followed by />
 • Ex: - <html> …</html>

Basic Rules

• All HTML documents must start with a document type declaration: <!DOCTYPE html>.
• The HTML document begins with <html> and ends with </html>
• For instance, the very first tag in an HTML document would be <html>. This tells a Web
browser that it is about to read and translate a Web page.
• Likewise, the very last tag in the same document will be </html>.
• The ‘/’ character is the closing marker; and this specific tag tells a browser it is finished
reading a Web page
• Main visible part of html documents starts from <body> tag

Elements in Html

• Elements are nothing but the Combination of start tag, content and the end tag
• Html elements can be used inside other
elements called nested Html Elements
• Some html elements have no content
and no end tag (ex: - <br>)
• The root element is <html> tag
• Example: -

<tag1>
<tag2>
</tag2>
</tag1>
Multiple Choice Questions

1) Html documents starts with.

a) <body>
b) <html>
c) </html>
d) </body>

2) Tag is an …
a) Element
b) Main tag
c) Not an element
d) Attribute

3) <Document> tag can be inserted in the <body> tag

a) False
b) True

4) All elements have opening and closing Tags

a) True
b) False
c)
5) Which character is the closing marker?
a) /
b) \
c) |
d) //
Keyword
Tags, elements, attribute, instance, characters, tags, combination, formatted,
variuos

Important Tags

HTML TAG
Body Tag

Body Tag

Paragraph Tag
 Heading Tag

Heading Tag
• HTML headings are defined with the <h1> to <h6> tags.
• All these tags should be inside the body tags otherwise it will not be visible
• <h1> defines the most important heading.
• <h6> defines the least important heading
• Example: -

Code: -
 Output: -

Paragraph Tag
 • Paragraph tag starts with <p> and ends with </p> tag
• Paragraph tag is used to write a block of text

Code: -

Output: -

Other Important Tags used with paragraph

tags

• <br> tag is used for break the statement and it has no end tag

Code: -
Output: -

• <hr> tag is used for a horizontal line and it has no end tag

Code: -
Output: -

• <pre> tag is used for a preformatted text statement

• <pre> tag has both start and end tag</p>
• <pre> tag preserves both space and new line

Code: -
Output: -

Multiple Choice Questions

1) How many different heading tags are there?

a) 2
b) 6
c) 3
d) 4

2) Which tag is used for showing content on the web browser?

a) <body>. </body>
b) <html>…</html>
c) <h1>. </h1>
d) <p>…</p>

3) Which heading tags defines the least important tag

a) <h1>. </h1>
b) <h6>. </h6>
c) <h5>. </h5>
d) <h2>. </h2>

4) To create a paragraph which tag is used

a) <p>…</p>
 b) <pre>…</pre>
c) <br>
d) <hr>

5) Which tag is used to break a text?

a) <br>
b) <hr>
c) <p>. </p>
d) <h1>. </h1>

Keyword
Break, preformatted, paragraph, horizontal line, vertical line

Formatting Text

• <b> …</b> is used for creating a bold text

Code: -
Output: -

• <strong>. </strong> is used for important text

Code: -

Output: -
• <I>. </I> is used for italic text
Code: -

Output: -

• <em> … </em> is used for emphasized text

Code: -
 Output: -

• <mark> … </mark> is used for marked text

Code: -

Output: -

• <small>… </small> is used for small text

 Code: -

Output: -

• <del> … <del> is used to show the user that the word is

deleted
Code: -

Output: -

• <ins> …. <ins> is used to show the user that the word is

inserted
Code: -
 Output: -

• _…. to create a subscript text

Code: -

Output: -
 • ^…. to create a superscript text
Code: -

Output: -

Code: -
Output: -
Multiple Choice Questions

1) Which tag is used to create an italic text?

a) <I>. </I>
b) <p>. </p>
c) <em>. </em>
d) <li>. </li>

2) Which of the following element is responsible for making the text bold in
HTML?
a) <br>
b) <b>. </b>
c) <I>. </I>
d) <hr>
 3) Is <sup> and format tag
a) True
b) False

4) Which of the following element is responsible for showing the text is

deleted in HTML?
a) <del>. </del>
b) <b>. <b>
c) <small>. </small>
d) _.

5) Which of the following element is responsible for showing the text is

inserted HTML?
a) <del>. </del>
b) <b>. <b>
c) <small>. </small>
d) <ins>. </ins>

Keyword
Text, italic text, superscript, subscript, emphasized, mark, small, big, bold

Comments
 • Comments are created by <! comments here --> here <! is the start tag and --> is the end
tag
• Comments are not visible in the web browser
• They are mainly used for documentation in html
• Comments can be also used for hiding content
• everything between the <! -- and the --> will be hidden from the display.

Code: -

Output: -

Attributes in html
• Attributes are mainly used for giving additional information for html elements
• Properties od Attributes
1. All Html elements can have attributes
2. All attributes should be used in the start tag of the element
3. Most of the attributes will be in a name=value pair
Links

• href attribute is used to specify a URL on the web page

• <a> tag defines a hyperlink and href is the attribute used in the <a> tag
• Inside <a> tag we use href attribute to define the URL to which we have to redirect it
• <a> tag has ending tag as </a>
<a href= “website address">text</a>

Code: -

Output: -

Images
 • Image tag <img> is used to insert images on web pages
• In <img> tag we have an attribute called src which is used to give the location of the
image to be displayed
<img src= “destination of the image">
• <img> doesn’t have end tag

Code: -

Output: -

Basic attributes used in image tag

 • src used for specifying the location of the image to be displayed
• There are two ways to specify the URL
They are

1) Absolute URL
2) Relative URL

1) Absolute URL: - When we provide the links to an image which is present in

another website then that specific URL is called Absolute URL

2) Relative URL: -When we provide a links to an image where the image is already
present in the same web server then that URL is called relative URL

• width attribute is used for specifying the width of the image to be displayed in the web
page
• height attribute is used for specifying the height of the image to be displayed in the web
page
Code: -

Output: -
 • alt attribute is used to specifies an alternate text for an image, if the image for some
reason is not displayed. Then the text will be displayed

Code: -

Output: -

Multiple Choice Questions

 1) Attributes are tags?
a) False
b) True

2) Which tag is used to create a link in html page?

a) <a>. </a>
b) <img>. </img>
c) <pr>. </pr>
d) <br>

3) Which tag is used to insert an image in html page?

a. <a>. </a>
b. <img>. </img>
c. <pr>. </pr>
d. <br>

Keyword
Page, attributes, Absolute URL, Relative URL, hyperlink, src

MCQ Answers
1) b

2) a

3) b
 Styles

Style Attribute
• Style is an important attribute in html which is used for giving style for the html elements
(colors, font, font size, etc.)
• To use style attribute, we have to follow the below given syntax
<tag name style="property: value;">

1) Background Color
background-color property sets the background color for the HTML elements.

Code: -
Output: -

We can also add background color for different elements also

Code: -

Output: -

2) Color for Text

We can also add text color by using color property in style attribute for html elements
like paragraph, headers etc.

Code: -
 Output: -

3) Fonts in html
We can add different fonts for html elements like paragraph, header tags

font-family property is used in the style attribute

Code: -
 Output:-

4) Font Size
We can add different fonts for html elements like paragraph, header… tags

font-size property is used in the style attribute

Code: -

Output:-
Multiple Choice Questions
1) Style is an ….
a) Attribute
b) Tag
c) Element
d) None above

2) Attribute are used inside the

a) End tag
b) Start Tag
c) As a Tag
d) As an element

3) Syntax for Style Attribute

a) <tagname style="property: value">
b) <tagname style="property: value:">
c) <tagname style="property: value;">
d) <tagname style="property: values;">

4) What property used for setting font size

 a) font-size
b) font-sizes
c) font- set
d) font-sets

5) Color is a value in style attribute

a) True
b) False

Keyword
Tagname, property, values, size style, tagname, font-type,

Multiple Choice Questions

Answers
1) a

2) b

3) c

4) a

5) a

Quotation

 The Quotation elements in HTML are used to insert quoted texts into a web page, which
is, different texts different from the normal texts in the web page.
 The citation elements are used to provide reference to the text to specify the author,
bibliographies.

 There are different tags which we can use to insert quotation in the html page
 1) <blockquote> …. </blockquote> is used to quote a text used from other source
cite attribute can be used to provide the link from where the text source is used
Code: -

Output: -

2) The HTML <q> tag is used to provide a short quotation.

Code: -

Output: -
 3) The HTML <barb> tag is mainly used to define an abbreviation or an acronym, like
"HTML", "CSS", "Mr.", "Mrs.", etc.

Code: -

Output: -
Exercise

1) What do you mean by an element in html?

2)Explain about body tag and its use.

3)What do you mean by text formatting?

4)Explain link tag.
5)How to insert comments in a html page?
6)How to use comment tags in HTML
7)What is the correct way to write address in a HTML document

8)How to create a hyperlink in a HTML document

9)How to write bold text using HTML tags
10)How to create a hyperlink to take you to another part of the same HTML document?
11)How to define a single line break?
12)What is the correct way to write address in an HTML document?

13)How to define the title of an HTML document?

14)How to define an HTML heading?
15)Define quotation?
 Chapter 4: New elements in html5

1)<article>

o The article element is one of the new elements that have been introduced with
HTML5.
o This element has been some confusion of how to use this element.
o But there seems to be an agreement that you use the <article> element when you
markup content, that makes sense on its own.

o But you are not supposed to use the <article> element around every single
paragraph – the point is, whatever you put in the <article> element it is supposed
to make sense on its own.

o <article> is a new semantic HTML5 element

o <article> should be used when the content would make sense on its own (e.g., in a
Rs-reader)
o <article> is a very specific element – more specific than e.g., the <div> element

Code
Output

2)<aside>

 The <aside> is one of the HTML5 elements added to define a section with additional
information related to the content around the aside element.
 It is generally used to enhance an article with additional information or highlighting parts
that can be interesting to the user.
 Content in aside is a stand-alone, non-essential part of the web page, and if you delete it,
the main content will not be affected.
 Endnotes, comments, lists of terms, reference information, a collection of links, pull-
quotes, etc. are examples of information that can be within the <aside> element.
  The HTML5 <aside> tag shows contents separately next to the main content, such as a
paragraph, at either the right side or the left side.
 The contents inside the <aside> tag, usually has contents that are related to the main
content.
 You can actually add a few extra lines to explain briefly, what’s inside the main content.

Code

Output
3)<detail>

 The <details> HTML element creates a widget in which information is visible only when
the widget is Clicked
 details elements have both opening and closing tag
 inside these tags we have to write the content

Code

Output
4)<dialog>

 In HTML, we can use the <dialog> tag to create a small dialog box inside the any
browser window to show some information easily.

 The <dialog> tag can be used to create modal window or pop windows on a webpage to
show some message or some component of the webpage in it.

 It has both opening and closing tag

Code

Output

5) <HEADER>
 The <header> tag defines the header of a page or a section.
  It usually contains a logo, search, navigational links, etc.
 It is mainly used for the main content definition
 It contains both opening and closing tag
 A <header> element typically contains:
 heading elements (<h1> - <h6>)
 logo or icon
 Main information

Code

Output
6) <Footer>
 The <footer> tag defines a footer section for a page or another element.
 It usually contains summary information or end content.

Code

Output

MULTIPLE CHOICE QUESTIONS

1)footer tag defines ______
a) footer section
b) header section
c) main section
d) sub section

2)which tag is used to create a small dialog box

a) <img>
b) <p>
c) <h>
d)<dialog>

3) which html element creates a widget in which information is visible only when the widget is
Clicked
a) <p>
b) <h>
c)<dialog>
d)<detail>

4)Which is a new semantic html 5 element

a) <dialog>
b) <detail>
c) <article>
d)<header>

5)Which tag is used for inserting the header

a) <p>
b) <header>
c)<dialog>
d)<detail>
Exercise
1)Explain the difference between footer and header tags.
2)What is use of <dialog> tag
3) When to use header and footer tag in html pages
4)Explain <details> tag.
5)Explain <article> tag.

Keywords
Semantic, navigational, logo, agreement

MULTIPLE CHOICE QUESTIONS

Answers
1) a

2) d

3) d

4) c

5) b
 Chapter 5: Lists

 Lists are mainly used to merge related pieces of information so that they are
clearly associated with each other
 Lists make the content easy to read
 They help create a well-structured, more accessible, easy-to-maintain document

 Lists can be divided into three types

1. Ordered list
2. Unordered list
3. Description list
4. Nested lists

Ordered list
 Whenever we want to create a list which will display the list of items in a specific
order, we use ordered lists
 An ordered list starts with the <ol> and ends with </ol> tag
 And each list items starts with <li> tag inside the <ol> </ol> tags

Code
Output

Unordered list

 Whenever we want to create a list which will display the list of items in that don’t
have a particular ordered then we can use unordered lists
 An ordered list starts with the <ul> and ends with </ul> tag
 And each list items starts with <li> tag inside the <ul> </ul> tags

Code
Output

Description list
 Description lists associate specific names and values within a list
 Previously called definition lists, but renamed in HTML5
 Description lists use one set of <dl></dl> tags wrapped around one or more groups of
<dt></dt> (name) and <dd></dd> (value) tags. You must pair at least one <dt></dt>
with at least one <dd></dd>, and the <dt></dt> should always come first in the
source order.

Code
Output

Nested List

 We can also create a nested list in html pages

Code

Output

Advantages Of Lists

 Flexibility: If you have to change the order of the list items in an ordered list, you
simply move around the list item elements; when the browser renders the list, it will
be properly ordered.
 Styling: Using an HTML list allows you to style the list properly using CSS. The list
item tags <li> are different from the other tags in your document, so you can
specifically target CSS rules to them.
  Semantics: HTML lists give the content the proper semantic structure. This has
important benefits, such as allowing screen readers to tell users with visual
impairments that they are reading a list, rather than just reading out a confusing
jumble of text and numbers.

Multiple Choice Questions

1) How many types of lists are there?

a) 1
b) 2
c) 3
d) 4

2) What tag is used to create an ordered list

a) <ol> …</ol>
b) <ul>. </ul>
c) <dt>. </dt>
d) <dd>. </dd>

3) Can we create a nested list in html?

a) True
b) False

4) Which lists name have been changed in html5

a) Ordered list
b) Unordered lists
c) Description lists
d) None of the above
Exercise
1) What do you mean by a list in html?
2) How many types of lists are available in html?
3) Write the difference between ordered and unordered list
4) Explain Description list with an example
5) What is the use of nested list?
6) How to define an unordered list?
7) Create and ordered list
8) Create a nested list
9) Explain the advantage of lists
10) Difference between description list and ordered list

Keywords
Ordered, Unordered, Description, Nested, structured, wrapped

MULTIPLE CHOICE QUESTIONS

ANSWERS
1)a
2)a

3)a
4)c
 Chapter 6: Forms
 Forms are used to collect the data from the user’s inputs
 To use the forms, we use <form> tag
 Form has both starting tag <form> and ending tag </form>
 We can also say form as a container for different elements for getting the user inputs

Creating Forms
 All forms start with the <form> tag and end with </form>. All other form objects go
between these two tags
 The syntax for form is
<form>
…..
…..
…..
</form>
 Form has two important properties called METHOD AND ACTION
 METHOD refers to post or get.
 The post attribute will send the information from the form as a text document.
 The get attribute is used mostly with search engines, and will not be discussed.
 We will generally set METHOD="post".
 ACTION usually specifies the location of the CGI script that will process the form data
So, the final syntax will look like below
<FORM METHOD="post" ACTION="mailto:[email protected]"></FORM>

Different Elements used in Form

1) INPUT element <input>

 It is the most important element for getting user input

 Inside the input tag we will use below elements
 TYPE="text" sets the object to a single-line text field.
 Size="100" sets the field to show 100 characters.
  MAXLENGTH="20" means that only a total of 20 characters can be typed in this
field.
 NAME="name" sets the text field's name to be name (this information is part of
the form data sent on for further processing). The name is required to identify the
value data which will be associated with it.
 VALUE=... Another attribute, VALUE, can be used to place an initial text in the
field. As might be expected,

Code

Output
 2) label element <label>

 label element is used to give the label for the form elements
 It is used to tell the users what the form elements is all about
 In the above example we don’t know what that text input is all about So we use label to
define it
 label element starts with <label> tag and it also has closing tag also </label>
 In label tag we use an important attribute called for attribute where the the for-attribute
value should be equal to the id attribute in the <input> tag
This for attribute will bind the <input> tag with the <label > tag

Code

Output
Input Types
Different Type in <input> Tags used
1) text
2) Checkbox
3) Radio
4) Password
5) Button
6) Submit
7) Reset
8) Color

1) Text
 Syntax:
<input type=”text”>
 It is used to create a single line input text field

Code

Output
 2) Checkbox
 Syntax
<input type=”checkbox”>
 It is used to create a checkbox field

Code

Output

3) Radio
  Syntax: -
<input type=” radio”>
 To create a radio button
Code

Output

4) password
 Syntax: -
<input type=” password”>
 To create a password text field where the content will not be shown

Code
Output

5) button
 Syntax: -
<input type=” button”>
 To create a button
 onclick attribute is used to give the button a function to do when it is clicked
 Alert is used to alert a message in the browser in the onclick attribute
Code
Output

6) Submit
 Syntax: -
<input type=” submit”>
 To create a submit button
 Here submits button is not handled because we require a form handler
to handle the data, we submit
 The form handler is specified in form tag in action attribute

Code
 OUTPUT

7) Reset
 Syntax: -
<input type=” reset”>
 To create a reset button

Code
Output

8) Color:
 Color type is used for input field that will contain a color
 It will allow the user to pick a random color
Code

Output
 9) Date
 It is an important type used for date field
 It allows us to pick a data

Code

Output
Multiple Choice Questions
1) Choose the correct option.

A. HTML form elements are used for taking user input.

B. HTML form elements are defined inside <for> tag.
C. HTML form elements can be of different types.
D. All of these.

2. Which one of the following is a form element?

A. text box.
B. radio button.
C. submit button.
D. All of these.

3. Which one of the following is incorrect?

A. <label> tag in HTML is used for creating a tag for form elements.
B. <label> can be used to increase the clickable area of buttons
C. id attribute is used with <label> to increase the clickable area of form elements
D. None of the above

4. Choose the incorrect option.

A. radio button allows to choose only one option from the given options.
B. default option can be chosen using attribute "selected" in radio button
C. default option can be chosen using attribute "checked" in radio button
D. checkbox allows to choose one or more than one options from the given options.

5. Which one of the following does not hold true regarding GET method in HTML?

A. Use of GET method in HTML is more secured.

B. Use of GET method enables us to bookmark the page.
C. GET has size limitation.
D. None of the above

Exercise
1)What do you mean by forms in html
2) Create a Sign-In Form.
3) Create a registration form
4) Explain about radio button
5) What do you mean by properties and values
6)Why forms are used in webpages?
7)Explain all the attributes of Form tag
8)Differentiate between Get & Post methods of Form tag
9)How text field and text area controls are different from each other?
10)Explain the use of Radio buttons in HTML forms with the help of an suitable
example.
11)Mention all the attributes of Check box. Justify how it is different from Radio
12)State the purpose of Submit and Reset button.
13)Which attributes are necessary to insert drop down list in a HTML page?
14)Sometimes it is better to use the text area element instead of an input
element of type text. Write a short note to explain when and why?

Keyword
Form, attributes, get, post, container method, generally, processing

MULTIPLE CHOICE QUESTIONS

ANSWERS
1)d
2)d
3)c
4)b

5)d
 Chapter 7: Table
 A table is a Collection of organized columns and rows,
 An example table is shown below.

1 2 3

4 5 6

7 8 9

 This table consists of 9 cells organized into rows and columns.

 Tables were used as a method to organize and display data in columns and rows

 To create a table, we need to use <table> tag

 And each table consists of two import tags used inside the <table> …</table> tag
 They are <tr></tr> and <td>></td>
 <tr> …. </tr> they are used to insert single table row
 <td>>…. </td> is used to fill the data in the rows created by <tr> tag

Code
Output

 Above is a complete example of creating a table

 To add border, we need to add style in which we use an important attribute called border
 Here we need to add the style for <table>, <tr>, and <td> tag so we will create a style
attribute and assign this border to all at once
 And use style after <html> tag not in <body> tag

Code
Output
  Now there one more tag we can use called <th></th> tag in the <table> tag
 <th> tag is mainly used to give the column header (main names)

Code
Output
Spanning columns or rows

 Table cells can span multiple columns or rows using the Col span and row span
attributes. These attributes can be applied to and elements.

Code
Output
  We should not design a table where both rows and columns overlap as this is invalid
HTML and the result is handled differently by different web browsers.
 row span = A non-negative integer that specifies the number of rows spanned by a cell.
The default value of this
 attribute is one (1). A value of zero (0) means that the cell will extend from the current
row until the last row of the table (<thread>, <tbody>, or <tfoot>).
 colspan = A non-negative integer that specifies the number of columns spanned by the
current cell.
 The default value of this attribute is one (1). A value of zero (0) means that the cell will
extend from the current to the last
 column of the column group <colgroup> in which the cell is defined.

Table with thread, tbody, tfoot, and caption

 HTML also provides the tables with the <thread>, <tbody>, <tfoot>, and <caption>
elements. These additional
 elements are useful for adding semantic value to your tables and for providing a place for
separate CSS styling.
 When printing out a table that doesn't fit onto one (paper) page, most browsers repeat the
contents of <thread> on
 every page.
 There's a specific order that must be adhered to, and we should be aware that not every
element falls into place as
 one would expect. The following example demonstrates how our 4 elements should be
placed.
Code

Output
Multiple Choice Questions
1) In HTML tables table row is defined by

a) <th> tag
b) <tr> tag
c) <td> tag
d) <row> tag

2) In HTML tables gap between two cells of same

tables are known as

a) Cell parsing
b) Cell difference
c) Cell padding
d) All of above

3) In HTML tables table header is defined by

a) <th> tag
b) <tr> tag
c) <td> tag
d) <t head> tag

4)Which of following element is used for creating a?

separate table footer?

a) footer>
b) <sepfooter>
c) <tfoot>
d) None of them

5)if you want to merge two or more rows in a table

which attribute you can use?
 a) Row merge
b) Row span
c) Colmerge
d) Colspan

Exercise
1) Create a table which contains 4 rows and 3 columns
2) Which tag is used to create a row and explain the tag
3) How to merge two columns
4) How to create a table footer
5) What do you mean by a table
6)What attribute will be used on the CAPTION tag to put the table description at the bottom of
the
Table?
7)Name the tag that define show to divide the window into frames.
8)Differentiate between <TH> and <Caption> tags.
9)How <TD> and <TR> are different from each other?

Keywords
Row span, row merge, table rows, columns, cell parsing
Padding

MULTIPLE CHOICE QUESTIONS

ANSWERS
1)b
2)a
3)a
4)c
5)b
 Chapter 8: Canvas And SVG

Canvas
 If we want to draw graphics on a web page, we can use <canvas>…</canvas> tag
 <canvas>…</canvas> only defines a canvas where we can draw but to actually draw, we
need to use java script
 Syntax used for <canvas>…</canvas> tag is
<canvas id="my Canvas" width="200" height="100"></canvas>
 We can also specify height and weight attribute to specify the canvas height and weight
 In the below example just used style to add border to the canvas

Code

Output
To draw in the above canvas, we have to
use JavaScript

1) Draw a line on the canvas

Code

Output
 2) Add a text in the canvas

Code

Output

SVG Graphics
  SVG stands for Scalable vector graphics
 It is used to define graphics (vector -based) directly without using java script
 SVG graphics can be created by <sag>…</svg> tag

1) Circle
 To create a circle using svg tag

Code

Output

2) Rectangle
 To create a circle using svg tag
Code

Output

Advantages of SVG

1. Easy to create and edit

  SVG files are based on XML (extensible markup language), a set of codes that
describes the text in a digital document.
 This means that you can create and modify SVG files directly in a text editor,
just as you would an ordinary text or HTML file.

2. Scalable

 Raster formats like PNG and JPG become pixilated when resized.
 Since SVG images are vector images, they do not suffer from loss of quality when
resized or zoomed in the browser.
 This makes them suitable in case where an image has to be scaled to fit different screen
sizes.

3. Flexible

 SVG is a W3C standard file format. Because of this, it works well with other open
standard technologies, including CSS, JavaScript, and HTML.

4. Can be animated

 SVG graphics can be animated using JavaScript and CSS, making it a powerful image
format building interactive animations on the web.

5. Lightweight
Compared to other formats, SVG images are very small in size

Disadvantages of SVG
1. Not detailed

 The SVG image format is great for 2D graphics like logos and icons but is not
ideal for detailed pictures.
 SVG-based graphics can’t display as many details as standard image formats
since they are rendered using points and paths instead of pixels

2. Not fully cross-platform

 Even though SVG has been around since 1999 and is supported by most modern
browsers (both on desktop and mobile), it does not work on legacy browsers like IE8 and
below.

Multiple Choice Questions

1) SVG stands for

 a) Screen Vector Graphics
b) Selectable Vector Graphics
c) Scale Valuable Graphics
d) Scalable Vector Graphics
2) which of the following tag SVG is used to draw a circle?
a) circle
b) ellipse
c) Both of the above.
d) None of the above.

3) canvas draws 2D graphics, on fly whereas SVG

draws 2D graphics on
a) which of the following tag SVG is used to draw a circle?
b) ML
c) XHTML
d) Screen
e) None

4) SVG is used to
a) Define graphic based
b) Define normal graphics
c) Define direct graphics
d) Not used for graphics based

5)Which of the following is used to create a rectangle?

a) Rect
b) Circle
c) Square
d) rectangle
Exercise
1)What do you mean by canvas
2) Explain the advantages of Svg
3) When to use svg
4)why svg is called scalable
5)Draw a line on the canvas

Keyword
SVG, graphics, vector, script, canvas, JavaScript, Circle, Square, screen, platform, scalable

MULTIPLE CHOICE QUESTIONS

ANSWERS
1)d
2)a
3)a
4)a

5)a
 Chapter 9: Multimedia in html
 Multimedia can be sound, image, video etc.
 It can be in many forms
 And all these things can be inserted in the web page

1) Video
 To insert a video inside an html page we can use <video> …. </video>
 Source element is used to give the location of the video
 <source> tag is used to set the location of the video

 We can use some important elements inside the <video> tag

 Control attribute is used to add video controls like play, pause, rewind etc.
 Height attribute is used to set a height of the video
 width attribute is used to set a width of the video

Code
 2) Audio
 To insert an audio in a html page we can use <audio>. </audio> tag
 It also has controls attribute and <source> tag
 <source> tag is used to specify the location of the audio
 Controls attribute is used to specify the controls for audio

Code
Output

Multiple Choice Questions

1) Which of the following attribute adds audio controls, like play, pause, and volume?
a) Audio
b) Controls
c) Source
d) Src
2) Which of the following HTML Video “Media Type is not supported in IE?
a) Webm
b) Mp4
c) Ogg
d) Mp3

3) What is the tag used for inserting video?

a) <video>. </video>
b) <audio>. </audio>
c)<img>…</img>
d)<link>. </link>

4) Which tag is used to specify the location of the audio, video?

a) <source>
b) <sources>
c) <src>
d) <video>
 5) Can we insert a gif using multimedia tags?
a) True
b) False

iframes

 iframes are used to display another web page within a web page
 Here I in iframes denotes inline (inline frame)
 To use an iframes we have to use <iframe> …</iframe>

Syntax used
<iframe src="URL" title="description"></iframe>
 src is used to specify the URL of the web page to be inserted
 title is used to specify the description of the frame inserted

Code

Output
Frames
 HTML frames are used to divide your web page window into multiple areas where each
area can load a separate HTML document.
 A collection of frames in the web page window is known as a frameset.
 The window is divided into frames similar to table and rows
 We can create frames by using <frame>…. </frame> tags
 The <frame>…. </frame> tag defines how to divide the window into frames.
 The rows attribute of tag defines horizontal frames and cols attribute defines vertical
frames.
 Each frame is indicated by tag and it defines which HTML document shall open into the
frame.

Code
Output

Attributes used inside <frame>. </frame>

 Col’s attribute: - specifies how many columns are contained in the frameset and the size
of each column. You can specify the width of each column in one of four ways:
Absolute values in pixels. For example, to create three vertical frames, use
cols="100, 500,100". A percentage of the browser window.
 For example, to create three vertical frames, use cols="10%, 80%,10%".
  Using a wildcard symbol. For example, to create three vertical frames, use cols="10%,
*,10%".
 In this case wildcard takes remainder of the window.
 As relative widths of the browser window.
 For example, to create three vertical frames, use cols="3*,2*,1*". This is an alternative to
percentages. Here the window is divided into sixths: the first column takes up half of the
window, the second takes one third, and the third takes one sixth.
 Rows attribute: - This attribute works just like the cols attribute and takes the same
values, but it is used to specify the rows in the frameset
 . For example, to create two horizontal frames, use rows="10%, 90%". You can specify
the height of each row in the same way as explained above for columns.

 Border: -This attribute specifies the width of the border of each frame in pixels.
 For example, border="5". A value of zero means no border
 src: -This attribute is used to give the file name that should be loaded in the frame. Its
value can be any URL. For example, src="/html/top_frame.htm" will load an HTML file
available in html directory
 frameborder: -This attribute specifies whether or not the borders of that frame are shown;
it overrides the value given in the frameborder attribute on the tag if one is given, and this
can take values either 1 yes or 0 no

Problems with Frames: -

 There are few drawbacks with using frames, so it's never recommended to use frames in
your webpages:
 Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.
 Sometimes your page will be displayed differently on different computers due to different
screen resolution.
 The browser's back button might not work as the user hopes. There are still few browsers
that do not support frame technology.
 Frames are not supported in Html5

Code
 horizontal forms

Output
Code
vertical forms
Output

Multiple Choice Questions

1)Which inline functions embeds an independent html document into current

document
a) <div>
b) <span>
c) <iframe>
d) <form>
2)Which from following is not a type of screen frame sin HTML
a) iframe
b) not frame
 c) frameset
d) uframe

3) what is the use of iframe in html

a) to display a web page within a web page
b) to display a web page with animation effect
c) all of the above

4)Can we create a horizontal and vertical frame in html

a) True
b) False

5) Html 5 supports frame

a) True
b) false

MULTIPLE CHOICE QUESTIONS

ANSWERS
1)c
2)d

3)a
4)a
5)b
Image Maps

 An image maps is an image with clickable areas that usually act as hyperlinks
 The image is defined by the<img>tag, and the map is defined by a <map>tag with <area>
tags to denote each clickable area.
 We Use the use map and name attributes to bind the image and the map

Code

Output
Exercise
1) What do you mean by multimedia
2) What do you mean by iframes
3) How to create a horizontal frame
4) How to insert a video in an html page
5)What do you mean by image maps
6)How to embed audio in a HTML document
7)How to use image tag in html
8)How to author an abbreviation or an acronym
9)How to define a section that is quoted from another source in HTML
10)How to embed multiple videos in html

Keyword
Multimedia, music, images, controls, audio, source , Iframe, horizontal, vertical, frames, div,
 Chapter 10: Geolocation
 Geolocation is the art of figuring out where we are in the world and optionally sharing
that information with people we trust. There are many ways to figure out where we are -
our IP address, our wireless network connection, which cell tower our phone is talking to,
or dedicated GPS hardware that receives latitude and longitude information from
satellites in the sky.
 Geolocation is one of the HTML5 API which is provided to identify the user’s
geographic location for the web application.

 This new feature of HTML5 allows you to navigate the latitude and longitude coordinates
of the current website’s visitor(user). These coordinates can be captured by JavaScript
and send to the server-side which can show the user current location on the website.

GPS
The most accurate of the three, and it reads microwave signals from multiple satellites to
determine the current location.

Cell Tower Triangulation

It determines the current location by doing a calculation based on the locations of the cell
towers in the phones rang.
Cell tower triangulation can be fairly accurate in cities with a high cell tower density but
becomes less accurate in areas where there is a greater distance between towers. is a g

Wi-Fi Positioning Service (WPS)

WPS uses the IP address from iPhone's Wi-Fi connection to make a guess at our location
by referencing a large database of known service providers and the areas they service. It
is imprecise and can be off by many miles.
 The geolocation API lets us share our location with trusted web sites.
 The latitude and longitude are available to JavaScript on the page, which in turn can send
it back to the remote web server and do fancy location-aware things like finding local
businesses or showing our location on a map.
Syntax:

geo=navigator. geolocation;

Geolocation Methods:

 Geolocation API uses three methods of Geolocation interface.

 getCurrentPosition () – The visitor’s current location and returns a position object with
data.

 watchPosition () – Return a value whenever the device location changes.

 clearWatch () – It cancels the previous watchPosition () call

Code
Input
Handling Errors and Rejections:

 The parameter of the getCurrentPosition () method is used to handle errors. It provides a

function to run if it fails to get the user’s location.
 Unknown random error Occurred
 If the user has denied for sharing location
 Location information is not available
 Request for location is timed-out.

Code

Input
Multiple Choice Question

1. Which navigator object property returns a geolocation object?

a) appVersion
b) geolocation
c) language
d) appCodeName

2. What returns the engine name of the browser?

a) product
b) user Agent
c) platform
d) onLine

3. Action box does not contain _______

a) tabs
b) geolocation buttons
c) search box
d) radio buttons

4. Which button let us move the map to the current position of the device?
a) currentPositionBtn
b) enableHighAccuracy
c) timeout
d) maximumAge

5. Search box does not contain __________

a) currentPositionBtn
b) search button
c) dropdown list
d) input field

Exercise
1)what do you mean by geolocation
2)What do you mean by api
3)How to handle error when we set geolocations
4) what is watchPosition () method
5) Explain clearWatch ()

Keywords
Geolocation, navigator, random, error, location, latitude, longitude
MULTIPLE CHOICE QUESTIONS
ANSWERS
1)a
2)a
3)d
4)a
5)a
 Chapter 11: Introduction to CSS

 CSS stands for cascading style sheet

 Cascading means: - The cascade part of CSS means that more than one style sheet can be
attached to a document, and all of them can influence the presentation.
 For example, a designer can have a global style sheet for the whole site, but a local one
for say, controlling the link color and background of a specific page.
 Style: -It is nothing but Appling colors, margins, fonts etc. to your html page
 Sheet: -It refers to template or set of rules to set how the html page loots
 Cascading Style Sheets (CSS) is a simple mechanism used to format the layout of Web
Pages and adding style (e.g., fonts, colors, spacing...) to web documents that previously
could only be defined in a page's HTML.
 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media. It can control the layout of multiple web pages all at once

 Content (what to display) is in HTML files

 Formatting information (how to display it) is in separate style sheets (.CSS

files). Use an element attribute named class to link (e.g.,

<span

class="test">) Result: define style information once, use in many places

 Consider can you make all the text in the app slightly
bigger? Or purple is our new company color.

The advantages of CSS are: -

 CSS saves time - You can write CSS once and then reuse
the same sheet in multiple HTML pages.

 Pages load faster – Increases Download Speed

  Easy maintenance - To make a global change, all the
elements in all the web pages will be updated
automatically.

 Superior styles to HTML – It are better look to your

HTML page in comparison to HTML attributes.

 Multiple Device Compatibility - Style sheets allow content

to be optimized for more than one type of device.

 Global web standards - Now HTML attributes are being

deprecated and it is being recommended to use CSS

Syntax for CSS

A CSS style rule is having three parts:
1. Selector: A selector is an HTML tag at which a style will be applied. This could be any tag
like

etc.

Property:
 A property is a type of attribute of HTML tag.
 Put simply, all the HTML attributes are converted into CSS properties.
 They could be color, border, bicolor etc. 3. Value: Values are assigned to properties.
 For example, color property can have the value either red or #F1F1F1 etc.
Format of CSS:
Selector {property: values)

 Here h1 is a selector, color and font-size are properties and the given value red, and 15px
are the value of that property.
 The selector is normally the HTML element you want to style.
 Each declaration consists of a property and a value.
 The property is the style attribute you want to change. Each property has a value.

Rules for CSS

 Every statement must have a selector and a declaration. The declaration comes
immediately after the selector and is contained in a pair of curly braces.
 The declaration is one or more properties separated by semicolons.
 Each property has a property name followed by a colon and then the value for that
property. There are many different types of values, but any given property can only take
certain values as set down in the specification.
 Sometimes a property can take a number of values, as in the font-family. The values in
the list should be separated by a comma and a space.
 Sometimes a value will have a unit as well as the actual value, as in the 1.3em.
  You must not put a space between the value and its unit. 6. As with HTML, white space
can be used to make your style sheet easier to read and write
 A style sheet consists of one or more rules that describe how document elements should
be displayed. A rule in CSS has two parts: the selector and the declaration.
 The declaration also has two parts, the property and the value.
 Let's take a look at a rule for a heading 1 style:
 h1 {font-family: verdan, "sans serif"; font-size: 1.3em}
 This expression is a rule that says every h1 tag will be verdan or other sans-serif font and
the font size will be 1.3em.
 Let's take a look at the different parts of this rule.
 Selector {property1: some value; property2: some value;}
 The declaration contains the property and value for the selector.
 The property is the attribute you wish to change and each property can take a value.
 The property and value are separated by a colon and surrounded by curly braces: body
{background-color: black} I
 if the value of a property is more than one word, put quotes around that value: body
{font-family: "sans serif";}
 If you wish to specify more than one property, you must use a semi-colon to separate
each property.
 This rule defines a paragraph that will have blue text that is centered. p {text-align:
center; color: blue} You can group selectors.
 Separate each selector with a comma. The example below groups headers 1, 2, and 3 and
makes them all yellow. h1, h2, h3 {color: yellow}

What is Responsive Web Design?

 responsive web design is a TECHNIQUE that ensures all the pages of the website look,
 work and feel perfectly on any device.
 Whether it is a tiny old cell phone with a screen width of 320px, a modern phablet with 7
inches screen, a big iPad, or a TV with a massive diagonal line, all the main aspects such
as content, design, and especially functionality should perform consistently to provide
users with an excellent user experience.
 The concept of a responsive website appeared due to non-effective and ill-suited ways of
handling screen sizes. Originally, pages were built to target a particular device. This
approach implied creating a range of designs for each responsive tier resulting in
different versions of the same page. However, with the mobile web becoming a reality
and more and more devices with non-standard resolutions appeared, this approach has
quickly become irrelevant since it could not handle this variety efficiently.
  The modern-day user expects to be able to access any website with a vast range of
devices. Your website should be ready to handle any scenario. You cannot ignore these
demands because numbers do not lie: according to recent studies,
 more than 80% of users surf through the internet using mobile devices in 2019;
 more than 60% of Google’s visits are done via a mobile device;
 mobile devices accounted for more than 50% of website traffic worldwide.
 Your brand cannot neglect this tendency. If you cannot meet these expectations and
growing demands by quickly adapting to the new reality, then you are doomed to failure,
and your brand is doomed to extinction.

Benefits of Responsive Web Design

1. GOOD VISUAL EXPERIENCE

2. best user experience

3. lower maintenance needs

4. high web page loading speed

5. no extra fees for creating and maintaining different versions

6. easy analytics reporting.

Disadvantages of Responsive Web Design

1. It can slow performance;
2. It may suffer from web browser incompatibility;
 3. It makes it challenging to run advertising campaigns;
4. It makes it challenging to offer different things to different users depending on the device
used

Key Features of Responsive Web Design

Three key features that are still

considered the main pillars of this
concept.

They are:
1. Flexible layout;
2. Flexible images;
3. Media Queries.

Flexible Layout
 A flexible layout is the heart and soul of the design. As a rule, it is a flexible grid built
with the relative units of measurement
Flexible Images
 images have been an obstacle to implementing truly adaptable responsive pages since the
dawn.

 The deal is, use of a flexible grid in the project made us abandon our beloved pixels and
replace them with relative units of measurement.
 This means that all elements inside the grid should follow this lead. Images are no
exception.
 More so, by playing a crucial role in visual communication and user experience, they
should first obey this principle.

Media Queries
 The third key ingredient of a responsive website is media queries.
 Media queries allow building different layouts within one project by tweaking your
whole design or parts to best suit the screen size.
 With them, you can re-arrange and reorder existing elements like columns, rows, and
containers using basic CSS

CSS Modules
 CSS modules let you import your .CSS file into a JavaScript file with the CSS definitions
as properties.
 It also lets you use the compose property to extend and modularize style definitions.
 CSS was defined to style documents, not UI components.
 The lack of modularity in CSS language makes it hard to maintain complex or legacy
code.
 Developers are afraid to make code changes since it's easy to break something when CSS
definitions are global.
  CSS Modules solves these problems by limiting the scope to components. CSS Modules
is not an official standard.
 It's a community-led effort popularized by the ReactJS ecosystem.
 The problem of global scope is solved by CSS Modules since class names are local to the
component.
 The same class name can be used in another component with different styling.
 CSS Modules leverages on tooling. Tools convert local names to globally unique names.

CSS Modules has the following features

Local Scope:
 Class names and animation names are locally scoped by default.
Global Scope:
 Using: global switch, developer can choose to reuse some styles globally.
Composition:

 A selector can extend styles from another, thus promoting reuse of styles within local
scope.
 Composition can't be used for global scope. A selector can be composed from a selector
in global scope or selectors in other files.
Naming

 Names should be in camelCase. Though traditional CSS naming convention is to use

kebab-case, hyphens can cause problems when accessed within JavaScript.
 The use of camelCase simplifies the syntax.
Integration

 CSS Modules should have tooling support to compile CSS to a low-level format called
Interoperable CSS (ICSS).
It should also work nicely with CSS processors (Less, Sass, Post CSS), bundlers (Webpack) and
JS frameworks (Angular, React).

Multiple Choice Questions

1) Full form of CSS
a) Cascade style sheet
b) Cas style sheet
 c) Cascade sheet style
d) Cascade shape sheet

2) CSS style rule have how many parts

a) 1
b) 2
c) 3
d) 4
3) Property and values are separated by
a) :
b) ;
c) ,
d) .
4) Property and values are used inside
a) Header Tag
b) Selectors
c) Body tag
d) Head tag
5) CSS is mainly used for
a) Decorating
b) Creating web pages
c) For giving functionalities to the buttons
d) None

Exercise
1) What do you mean by CSS?
2) Explain the properties of CSS
3) Why we are using CSS
4) What do you mean by modules in CSS?
5) Explain the features of CSS Modules

Keywords: -
Property, values, declaration, CSS, tag, sheet, style, modules, centered

Multiple Choice Questions Answers

 1) a
2) b
3) a
4) b
5) a

Chapter 12: Selectors, Background and

borders
Selectors in CSS
There are Three types of CSS Selectors
1. The Element selectors
2. The ID Selectors

3. The Class Selectors

 The Element selectors A CSS declaration always ends with a semicolon, and declaration
groups are surrounded by curly brackets: example –

p {color: red; text-align: center;}

To make the CSS more readable, you can put one declaration on each line, like this
p {color: red; text-align: center;}

 The ID selectors the id selector is used to specify a style for a single, unique element.
 The id selector uses the id attribute of the HTML element, and is defined with a "#".
 Example – Imagine within the body element of our html page, we have the following
paragraph element
 We can then create a CSS rule with the id selector:
{color: red; text-align: center;}

The Class selectors

 The class selector is used to specify a style for a group of elements. Unlike the id
selector, the class selector is most often used on several elements.
 This allows you to set a particular style for many HTML elements with the same class.
  The class selector uses the HTML class attribute, and is defined with a ".". In the example
below, all HTML elements with class="center" will be center-aligned:
<h2 class=” center”>hi</h2>
We can then create a CSS rule with the class selector:
. center {text-align: center;}

 we can also specify that only specific HTML elements should be affected by a class.
 In the example below, all p elements with class="center" will be center-aligned: example
p. center {text-align: center;}

Attribute Selector
 We can also apply styles to HTML elements with particular attributes.
 The style rule below will match all the input elements having a type attribute with a value
of text:
input[type="text"]
{color: #000000;}

 There are following rules applied to attribute selector.

 p[lang] - Selects all paragraph elements with a lang attribute.
 p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value of exactly
"fr". p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the
word "fr".
 p[lang|="en"] - Selects all paragraph elements whose lang attribute contains values that
are exactly "en", or begin with "en-".

There are three ways of inserting a style

sheet:
1. External style sheet
2. Internal style sheet
3. Inline style

1: - External style sheet

 An external style sheet is ideal when the style is applied to many pages.
 With an external style sheet, you can change the look of an entire Web site by
 changing one file. Each page must link to the style sheet using the <link> tag. The
 <link> tag goes inside the head section:
 <head>
 <link rel="stylesheet" type="text/CSS" href="mystyle.css" />
 </head>
 An external style sheet can be written in any text editor. The file should not
 contain any html tags. Your style sheet should be saved with a .CSS extension. hr {color:
sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Code
Output
  Make sure you include the correct path to your CSS file in the href. If the CSS file is in
the same folder as your HTML
 file then no path is required (like the example above) but if it's saved in a folder, then
specify it like this
 href="folder name/style.css".
 <link rel="stylesheet" type="text/CSS" href="folder name/style.css">
 External stylesheets are considered the best way to handle your CSS. There's a very
simple reason for this: when
 you're managing a site of, say, 100 pages, all controlled by a single stylesheet, and you
want to change your link colors from blue to green, it's a lot easier to make the change in
your CSS file and let the changes "cascade"
 Again, if you want to completely change the look of your website, you only need to
update this one file.
 You can load as many CSS files in your HTML page as needed.
<link rel="stylesheet" type="text/CSS" href="main.css">
<link rel="stylesheet" type="text/CSS" href="override.css">

 CSS rules are applied with some basic rules, and order does matter. For example, if you
have a main.css file with
some code in it:
 p. green {color: #00FF00;}
 All your paragraphs with the 'green' class will be written in light green, but you can
override this with another .CSS
 file just by including it after main.css. You can have override.css with the following code
follow main.css, for
example:
 p. green {color: #006600;}
 Now all your paragraphs with the 'green' class will be written in darker green rather than
light green.
 Other principles apply, such as the ‘! important' rule, specificity, and inheritance.
 When someone first visits your website, their browser downloads the HTML of the
current page plus the linked CSS
file.
 Then when they navigate to another page, their browser only needs to download the
HTML of that page; the
 CSS file is cached, so it does not need to be downloaded again. Since browsers cache the
external stylesheet, your pages load faster.

2.Internal style sheet

 An internal style sheet should be used when a single document has a
 unique style. You define internal styles in the head section of an HTML page, by
  using the <style> tag, like this:
 <head>
 <style type="text/CSS">
 hr {color: sienna;}
 p {margin-left:20px;}
 body {background-image:url("images/back1.gif");}
 </style>
 </head>

Code

Output
  CSS enclosed in <style></style> tags within an HTML document functions like an
external stylesheet, except that
 it lives in the HTML document it styles instead of in a separate file, and therefore can
only be applied to the
 document in which it lives. Note that this element must be inside the <head> element for
HTML validation (though it
 will work in all current browsers if placed in body).

3.Inline style sheet

 An inline style loses many of the advantages of style sheets by mixing content
 with presentation. Use this method sparingly! To use inline styles, you use the style
 attribute in the relevant tag. The style attribute can contain any CSS property. The
 example shows how to change the color and the left margin of a paragraph:
 <p style="color: sienna; margin-left:20px">This is a
 paragraph. </p>

Code
Output

Backgrounds and Borders

Padding using CSS

 The padding property allows you to specify how much space should appear
 between the content of an element and its border: The value of this attribute
 should be either a length, a percentage, or the word inherits. If the value is inherited,
 it will have the same padding as its parent element. If a percentage is used, the
 percentage is of the containing box. The following CSS properties can be used to
 control lists. You can also set different values for the padding on each side of the
 box using the following properties:
 The padding-bottom specifies the bottom padding of an element.
 The padding-top specifies the top padding of an element.
 The padding-left specifies the left padding of an element.
 The padding-right specifies the right padding of an element.
 The padding serves as shorthand for the preceding properties.

The padding-bottom Property

  The padding-bottom property sets the bottom padding (space) of an element. This
 can take a value in terms of length of %
The padding-top Property

 The padding-top property sets the top padding (space) of an element. This can take a
 value in terms of length of %

Code

Output
Setting Display Using CSS
 The display property is the most important CSS property for controlling layout.
 The display property specifies if/how an element is displayed. Every HTML
 element has a default display value depending on what type of element it is. The
 default display value for most elements is block or inline. A block element is
 often called a block-level element. An inline element is always just called an inline
element.

Block-level Elements
 A block-level element always starts on a new line and takes up the full width
 available (stretches out to the left and right as far as it can).
 The <div> element is a block-level element.
 Examples of block-level elements:
 <div>
 <h1> - <h6>
 <p>
 <form>
 <header>
 <footer>
 <section>
 <div>
 div is the standard block-level element. A block-level element
 starts on a new line and stretches out to the left and right as far as it can.
 Other common block-level elements are p and form, and new
 in HTML5 are header, footer, section, and more.
Inline Elements
 An inline element does not start on a new line and only takes
 up as much width as necessary. This is an inline <span>
 element inside a paragraph.
 Span is the standard inline element. An inline element can wrap
 some text inside a paragraph <span> like this </span> without
 disrupting the flow of that paragraph. An element is the most
 common inline element, since you use them for links.
 Examples of inline elements:
 <span>
 <a>
 <imp>
 CSS Syntax
 Display: value;
 The values of display property have the following meanings:
 Block -This value causes an element to generate a block box.
 Inline-block - This value causes an element to generate an inline-level
 block container. The inside of an inline-block is formatted as a block box,
 and the element itself is formatted as an atomic inline-level box.
 Inline - This value causes an element to generate one or more
 inline boxes.
 list-item - This value causes an element (e.g., LI in HTML) to
 generate a principal block box and a marker box.
 None - This value causes an element to not appear in the
 formatting structure
 Here are some examples of the display property:
 p {display: block}
 em {display: inline}
 li {display: list-item}

Setting width and Maxwidth using CSS

  Setting the width of a block-level element will prevent it from stretching out to the
 edges of its container. Then, you can set the margins to auto, to horizontally center
 the element within its container. The element will take up the specified width, and
 the remaining space will be split equally between the two margins:
 This <div> element has a width of 500px, and margin set to
 auto.
 Note: The problem with the <div> above occurs when the browser window is
 smaller than the width of the element. The browser then adds a horizontal
 scrollbar to the page.
 Using max-width instead, in this situation, will improve the browser's handling of
 small windows. This is important when making a site usable on small devices:
 This <div> element has a max-width of 500px, and margin
 set to auto.
 Tip: Resize the browser window to less than 500px wide, to see the difference between
the two divs!

* Universal selector (all elements)

div Tag selector (all <div> elements)

. blue Class selector (all elements with class blue)

. blue. Red All elements with class blue and red (a type of Compound selector)

#Headline ID selector (the element with "id" attribute set to headline)

: pseudo-class All elements with pseudo-class

: pseudo-element Element that matches pseudo-element

: lang(en) Element that matches: lang declaration, for example <span lang="en">
div > p child selector

Attribute Selectors

Code
Output

CSS Borders

CSS borders allows us to specify the different style, width, and color of an element's border.

The border property is a shorthand syntax in CSS that accepts multiple values for drawing a line
around the element it is applied to.

Values

The border property accepts one or more of the following values in combination:
The border-style property specifies what kind of border to display

1) dotted

Sets a dotted border

2) dashed

Sets a dashed border

3) none

Sets no border

4) groove

Sets a 3d groove border

5)double

Sets a double border

Code
Output
Border width and color

 We can also add the width and color for the border by using border-width and border-
color properties

Code
Output

class name selector

 The class name selector selects all elements with the targeted class name. For example,
the class name. warning
 would select the following <div> element?
 <div class="warning">
 <p>This would be some warning copy. </p>
 </div>

 You can also combine class names to target elements more specifically. Let's build on the
example above to
 showcase a more complicated class selection.
 In this example, all elements with the. warning class will have a blue text color, elements
with the. important class
 with have an orange text color, and all elements that have both the. important and.
warning class name will have a
 red text color.
 Notice that within the CSS, the. warning. Important declaration did not have any spaces
between the two class
  names. This means it will only find elements which contain both class names warning
and important in their class
 attribute. Those class names could be in any order on the element.
 If a space was included between the two classes in the CSS declaration, it would only
select elements that have
 parent elements with a. warning class names and child elements with. important class
names.

Code
Output

Multiple Choice Questions

1) How many ways are there for inserting style sheet?
a) 2
b) 3
c) 4
d) 5

2) For which CSS style sheet, we have to use as .CSS

a) External style sheet
b) Internal style sheet
c) Inline style sheet
d) None

3) How many types of selectors are there in css?

a) 2
b) 4
c) 3
d) 5

4) An external style sheet is ideal when the style is applied to

a) Many pages
b) One pages
c) None
 d) Two pages

5) The element selector is used

a) Select the element and apply the CSS property
b) Select the id
c) Select the properties
d) None

6)Which of the following CSS property defines the different properties of all four sides of an
element’s border in a single declaration?
a) border
b) padding
c) border-collapse
d) border-width

7) Identify the CSS property defining bottom-left corner shape of the border?
a) border-radius
b) border-corner-radius

c) border-bottom-left-radius
d) border-left-radius

8) Select the CSS property that sets the width of an element’s bottom border?

a) border-width
b) border-bottom
c) border-width-down
d) border-bottom-width

9) Which of the following CSS property border-color property sets the color of an element’s
four borders?

a) border-background
b) border-background-color
c) border-color
d) all of the mentioned

10) Choose the CSS property that can be used for collapsing the borders between table cells?
a) border
b) collapse-border
c) border-collapse

d) border-cell

Exercise
1) What is the different style sheet in CSS?
2) Explain internal style sheet
3) Explain the difference between internal and external style sheet
4) Explain the syntax for CSS selectors
5) Explain class name selectors

Keywords
collapsing, internal, inline, element, property, external, background

Multiple Choice Questions Answers

1) A
2) A
3) D
4) A
5) A
6) D
7) C
8) D
9) C
10) C
 Chapter 13: Text Effect and Fonts

Text Effect

 CSS is a language that describes the style of an HTML document. You can set the
 following text properties of an element:
 The color property is used to set the color of a text.
 The direction property is used to set the text direction.
 The letter-spacing property is used to add or subtract space between the
 letters that make up a word.
 The word-spacing property is used to add or subtract space between the
 words of a sentence.
 The text-indent property is used to indent the text of a paragraph.
 The text-align property is used to align the text of a document.
 The text-decoration property is used to underline, overline, and
 strikethrough text.
 The text-transform property is used to capitalize text or convert text to
 uppercase or lowercase letters.
 The white-space property is used to control the flow and formatting of
 text.
 The text-shadow property is used to set the text shadow around a text.
 Set the Text Color
 The following example demonstrates how to set the text color. Possible
 value could be any color name in any valid format.
 <p style="color: red;">This text will be written in red. </p>
 Set the Text Direction
 The following example demonstrates how to set the direction of a text.
 Possible values are ltr or rtl.
 <p style="direction;">This text will be rendered from right to left </p>

Set the Space between Characters

  The following example demonstrates how to set the space between
 characters.
 Possible values are normal or a number specifying space.
<p style="letter-spacing:5px;">This text is having space between letters.
</p>

 The following example demonstrates how to set the space between words.
 Possible values are normal or a number specifying space.
<p style="letter-spacing:5px;">This paragraph is having spaces between the letters.
</p>

Code

Output
Set the Text Indent
 The following example demonstrates how to indent the first line of a
 paragraph. Possible values are % or a number specifying indent space.

<p style="text-indent:1cm;">
This text will have first line indented by 1cm and this line will

remain at its actual position this is done by CSS text-indent

property.
</p>

Code
Output

Set the Text Alignment

 The following example demonstrates how to align a text.
 Possible values are left, right, center, justify.
<p style="text-align: right;"> This text will be right aligned. </p>
<p style="text-align: center;"> This text will be center aligned. </p>

<p style="text-align: left;"> This text will be left aligned. </p>

Code

Output
Decorating the Text
 The following example demonstrates how to decorate a text. Possible
 values are none, underline, overline, line-through, blink.
<p style="text-decoration: underline;"> This text will be underlined </p>
<p style="text-decoration: line-through;"> This text will be strike through.

</p>
<p style="text-decoration: overline;"> This text will have an over line. </p>
<p style="text-decoration: blink;">This text will have blinking effect </p>

Code

Output
 Set the Text Cases
 The following example demonstrates how to set the cases for a text.
 Possible values are none, capitalize, uppercase, lowercase.
<p style="text-transform: capitalize;"> This text will be capitalized </p>
<p style="text-transform: uppercase;"> This text will be in uppercase </p>
<p style="text-transform: lowercase;"> This text will be in lowercase </p>

Code
Output

CSS Fonts
  A font is the combination of typeface and other qualities, such as size, pitch,
 and spacing. For example, Times Roman is a typeface that defines the shape
 of each character. Within Times Roman, however, there are many fonts to
 choose from -- different sizes, italic, bold, and so on. You can set the following
 font properties of an element:
 The font-family property is used to change the face of a font.
 The font-style property is used to make a font italic or oblique.
 The font-variant property is used to create a small-caps effect.
 The font-weight property is used to increase or decrease how bold or light
 a font appears.
 The font-size property is used to increase or decrease the size of a font.
 The font property is used as shorthand to specify a number of other fonts
 properties.

Set the Font Family

 Following is the example, which demonstrates how to set the font family
 of an element. Possible value could be any font family name

<p style="font-family: Georgia, Garamond, serif;">

This text is rendered in either Georgia, Garamond, or the default serif font
depending on which font you have at your system. </p>

Set the Font Style

 The following example demonstrates how to set the font style of an
 element. Possible values are normal, italic and oblique.
<p style="font-style: italic;">This text will be rendered in italic

style </p>

Code
Input

Set the Font Variant

 The following example demonstrates how to set the font variant of an element.
 Possible values are normal and small-caps.
<p style="font-variant: small-caps;"> This text will be in as small letters </p>
Code

Input

Set the Font Weight

 The following example demonstrates how to set the font weight of an
 element. The font-weight property provides the functionality to specify
 how bold a font is? Possible values could be normal, bold, bolder, lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900.
<p style="font-weight: bold;"> This font is bold. </p>
<p style="font-weight: bolder;"> This font is bolder. </p>

<p style="font-weight:900;"> This font is 900 weight. </p>

Code
Input

Set the Font Size

 The following example demonstrates how to set the font size of an
 element. The font-size property is used to control the size of fonts.
 Possible values could be xx-small, x-small, small, medium, large, x-large,
 xx-large, smaller, larger, size in pixels or in %.
<p style="font-size:20px;"> This font size is 20 pixels </p>

<p style="font-size: small;"> This font size is small </p>

<p style="font-size: large;"> This font size is large </p>
Code

Input

Set the Font Size Adjust

 The following example demonstrates how to set the font size adjust of an
 element. This property enables you to adjust the x-height to make fonts
 more legible. Possible value could be any number.
<p style="font-size-adjust:0.61;">This text is using a font-size-adjust
value. </p>

Code

Input

Managing hyperlinks using CSS

 An element in an electronic document that links to another place in the same
 document or to an entirely different document. A hyperlink, or simply a link, is a
 reference to data that the reader can directly follow either by clicking, tapping, or
 hovering. A hyperlink points to a whole document or to a specific element within
 a document. Hypertext is text with hyperlinks. The text that is linked is called
 anchor text. You can set the following properties of a hyperlink:
 The: link signifies unvisited hyperlinks.
 The: visited signifies visited hyperlinks.
 The: hover signifies an element that currently has the user's mouse pointer
  hovering over it.
 The: active signifies an element on which the user is currently clicking.
 Usually, all these properties are kept in the header part of the HTML document.
 Remember a: hover MUST come after a: link and a: visited in the CSS definition in
 order to be effective. Also, a: active MUST come after a: hover in the CSS
definition as follows:
<style type="text/CSS">
a: link {color: #000000}
a: visited {color: #006600}
a: hover {color: #FFCC00}

a: active {color: #FF00CC}

</style>

1. Which of the following CSS property is used to set the text formatting?
a) font
b) font-style
c) text-decoration

d) all of the mentioned

2. Which of the following sets the color of any text decoration, such as underlines, overlines,
and strike throughs?
a) text-font
b) text-format
c) text-color
d) text-decoration-color

3. Which of the following sets what kind of line decorations are added to an element, such as
underlines, overlines, etc.?
a) text-style
b) text-decoration
c) text-line
d) text-decoration-line

4. Which of the following text-decoration value specifies each line of text has a line above it?
a) line
b) underline
c) overline

d) blink

5. Which of the following

a) text-overline

b) text-overline-decoration
c) text-overline-width
d) text-decoration-overline-width

6) Which of the following value is supposed to be a slightly bolder weight that standard bold in
font attribute?

a) emphasize
b) light
c) lighter
d) dark

7)Which of the following property allows contextual adjustment of inter-glyph spacing, i.e., the
spaces between the characters in text?

a) font-style
b) font-family
c) font-kerning
d) font-variant

8)Which of the following is not a value for font-style property?

a) normal
b) italic
c) oblique

d) none of the above

9)Which of the following selects a normal, or small-caps face from a font family?

a) font-weight
b) font-synthesis
c) font-kerning
d) font-variant

10)Which of the following value specifies whether the user agent is allowed to synthesize bold
or oblique font faces when a font family lacks bold or italic faces?
a) font-weight
b) font-synthesis
c) font-kerning

d) font-variant

Exercise
1) Explain fonts in CSS
2) Explain three different types of fonts
3) How to set the space between the text
4) What do you mean by text-indent?
5) How to set the font style

Keywords
italic, oblique, font-variant-font-size, emphasizes, family, kerning,Text-transform, letter-fonts,
lowercase, uppercase, capitalize

Multiple Choice Questions Answers

1)c
2)d
3)a
4)c
5)c
6)d
7)c
8)d
9)b
10)d
 Chapter 14: Layouts

HOW CSS LAYOUT WORKS

 Web page layout involves putting content into different regions of the page.
 In order to do this, the content needs to be in container tags such as: nav, header,
section, footer, picture, aside, and the ubiquitous div. Elements that are displayed as
blocks, such as ul, ol, and p can be also moved everywhere in the page.

TWO TECHNIQUES FOR CSS LAYOUT

 There are two general techniques used for layout: floats and absolute positioning.
 Floats are by far the most used, as it allows the layout to be fluid. Also, with float layout,
content never overlaps other content, so even if the layout isn't pretty, it's functional.
 With absolute positioning, you have the power and burden of complete control. We'll
look at both in this reading.

 To use float, you start with the normal layout of boxes stacked vertically on the page,
but you can allow certain elements to move to the side and have other material flow
around them. To do that, HTML elements have a property float, which will make the
element float to either the left or the right side of the page (your choice). Of course,
other material can't flow around it unless it is narrow enough, so we also have to
consider the width of the element. We'll look at that, too.

 This technique doesn't go well with the fluid design, but is good for positioning things
like logos, etc. that need always be in a certain place. Absolute positioning is sometimes
used in a limited way as part of an overall layout that mostly uses float.
LAYOUT STRATEGIES
 Web page layout with CSS is more of an art than science; there is no formula for
marking up your HTML page or creating the CSS. CSS layout is something that you will
learn through experience, learning the different CSS properties, following tutorials, and
practicing a lot. What follows in this section is a set of guidelines that can be useful as
you start learning about this topic.

 Start with your content. Design starts with your content (headlines, text, links,
photographs, etc.), not with colors, fonts, or icons. It is the page message that should
dictate the design. For example, if the goal of a student organization page is to get more
students to join, you can put a large photo of the members doing something fun or
interesting, together with quotes from them. Then you use style to make them
compelling.
 Mock up your design. Don't start your design with code, start with a drawing. Using a
drawing program (Paint, Photoshop, Illustrator, etc.) gives you freedom to explore
different colors, fonts, images, and positioning, without having to write code. This way
you can experiment faster with many choices. If your page needs user interface
elements such as buttons, tabs, etc. you can use the free stencil kit from Yahoo,
together with Photoshop.
 Identify the boxes. Once you are satisfied with your mockup, you can start thinking
about the HTML structure. Basically, you need to identify which elements look like
individual boxes, because they will have to be in container tags in your HTML.
 Remember background images. Very often, you can more easily place an image with the
background-image property than the <img> tag. This is because you can put other
information on top of this image. However, you should know that background images
are not printed, thus, don't put important information (such as maps) as background.

Grid
 CSS Grid Layout is a two-dimensional grid-based layout system that,
 compared to any web layout system of the past, completely changes the way we design
user interfaces. CSS has always been used to layout our web pages,
 but it’s never done a very good job of it
  Grid is the very first CSS module created specifically to solve the layout problems we’ve
all been hacking our way around for as long as we’ve been making websites.
 Grid Container
 The element on which display: grid is applied. It’s the direct parent of all the grid items.
In this example container is the grid container.

<div class="container">
<div class="item item-1"> </div>
<div class="item item-2"> </div>
<div class="item item-3"> </div>

</div>

Grid Line
 The dividing lines that make up the structure of the grid.
 They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and
reside on either side of a row or column. Here the yellow line is an example of a column
grid line.

Grid Track
 The space between two adjacent grid lines.
 You can think of them as the columns or rows of the grid. Here’s the grid track between
the second and third-row grid lines.

Grid Area
 The total space surrounded by four grid lines.
 A grid area may be composed of any number of grid cells. Here’s the grid area between
row grid lines 1 and 3, and column grid lines 1 and 3.
Grid Item
 The children (i.e., direct descendants) of the grid container. Here the item elements are
grid items, but sub-item isn’t.

<div class="container">

<div class="item"> </div>

<div class="item">
<p class="sub-item"> </p>
</div>
<div class="item"> </div>

</div>

Grid Cell
 The space between two adjacent row and two adjacent column grid lines.
 It’s a single “unit” of the grid. Here’s the grid cell between row grid lines 1 and 2, and
column grid lines 2 and 3.

Code
Output
Multiple Choice Questions
1) Which of the following is most suitable for a grid layout?

a) toolbar

b) form

c)menu

d)complex layout, like a newspaper

2)Which model includes margin, border, padding, and content?

a) CSS3 Flexbox Box model

b) CSS3 Grid Layout model

c) CSS Grid Template Layout Module

3)Which model defines structures similar to tables using 2 dimensions?

 a) CSS Box model

b) CSS3 Flexbox Box model

c) CSS3 Grid Layout model

d) CSS float

4)You are creating a grid layout. What does 1fr mean in the following code?

grid-template-columns: 150px 150px 1fr 1fr;

a) The first two columns will be two fraction units of the stated width.

b) The third and fourth columns is 1 fraction unit of the remaining space in the grid.

c) The second column will be double the stated width.

d) The second column will be half of the remaining space in the grid.
5)How many columns and rows are defined in the following code?

section {

display: grid;

grid-template-columns: 100px 1fr 1fr 250px;

grid-rows: 50px 1fr 1fr ;

section header {

grid-column: 1 / 4;

grid-row: 1;

section nav {

grid-column: 1;

grid-row: 2 / 3;

section article {

grid-column: 2;

grid-row: 2;
}

section aside {

grid-column: 3;

grid-row: 2;

section footer {

grid-column: 1 / 4;

grid-row: 3;

a) 1 rows and 2 columns

b) 2 rows and 3 columns

c) 3 rows and 2 columns

d) 3 rows and 4 columns

Exercise
 1) What do you mean by grid
2) What do you mean by layouts?
3) What do you mean by grid layouts?
4) What do you mean by grid are?
5) Explain the two techniques in CSS layouts

Keywords
Techniques, layouts, grids, narrow, positioning, guidelines
 Chapter 15: Box Model
 You have seen the border that surrounds every box i.e., element, the padding that
 can appear inside each box, and the margin that can go around them. In this
 chapter, we will learn how to change the dimensions of boxes. We have the
 following properties that allow you to control the dimensions of a box.
 The height property is used to set the height of a box. The width property is used to set
the width of a box.
 The line-height property is used to set the height of a line of text.
 The max-height property is used to set a maximum height that a box can
 The min-height property is used to set the minimum height that a box can
 The max-width property is used to set the maximum width that a box can
 The min-width property is used to set the minimum width that a box can

The Height and Width Properties

 The height and width properties allow you to set the height and width for boxes.
 They can take values of a length, a percentage, or the keyword auto

The line-height Property

 The line-height property allows you to increase the space between lines of text.
 The value of the line-height property can be a number, a length, or a percentage.

The max-height Property

  The max-height property allows you to specify the maximum height of a box. The
 value of the max-height property can be a number, a length, or a percentage.

The max-width Property

 The max-width property allows you to specify the maximum width of a box. The
 value of the max-width property can be a number, a length, or a percentage.
 The border properties allow you to specify how the border of the box representing
 an element should look. There are three properties of a border you can change:
 The border-color specifies the color of a border.
 The border-style specifies whether a border should be solid, dashed line,
 double line, or one of the other possible values.
 The border-width specifies the width of a border.

The border-color Property

 The border-color property allows you to change the color of the border
 surrounding an element. You can individually change the color of the bottom, left,
 top and right sides of an element's border using the properties:
 border-bottom-color changes the color of bottom border.
 border-top-color changes the color of top border.
 border-left-color changes the color of left border.
 border-right-color changes the color of right border.

The border-style Property

 The border-style property allows you to select one of the following styles of
 border:
 none: No border. (Equivalent of border-width:0;)
 solid: Border is a single solid line.
 dotted: Border is a series of dots.
 dashed: Border is a series of short lines.
 double: Border is two solid lines.
 groove: Border looks as though it is carved into the page.
 ridge: Border looks the opposite of groove.
 inset: Border makes the box look like it is embedded in the page.
  outset: Border makes the box look like it is coming out of the canvas.
 hidden: Same as none, except in terms of border-conflict resolution for table elements.
 You can individually change the style of the bottom, left, top, and right borders of
 an element using the following properties:
 border-bottom-style changes the style of bottom border.
 border-top-style changes the style of top border.
 border-left-style changes the style of left border.
 border-right-style changes the style of right border.

Code

Input
Multiple Choice Question

1)Which of the following property adds padding to the top of an element?

a) height
b) padding-height
c) top
d) padding-top

2)Which of the following display property value is described by treats the element as inline?
a) inline-block
b) list-item
c) block

d) inline

3)Which of the following property defines the style for the bottom border of an element?
a) border-bottom-style

b) border-collapse
c) border-style-bottom
d) none of the mentioned

4)Which of the following visibility property value is described by the element is not visible, but
the layout of surrounding elements is not affected?

a) visible
b) hidden
c) collapse
d) none of the mentioned

5)Which of the following property defines the style for the left border of an element?
a) border-style
b) border-left-style
c) border-left-width
d) border-right

Exercise
 1) what do you mean by box-model?
2) Explain the features of box-model
3) Explain max-height and max-width property
4) Draw a simple box -model layout
5) Explain some border properties

Keywords
Border, bottom, collapse, inline-block, hidden, top, padding, Hight

Multiple Choice Question Answers

1)d
2)d
3)a
4)b
5)b
 Chapter 16: CSS Pagination

 it enables to redirects you to results for the same query on

other pages
 CSS pagination is a very useful technique for indexing
different pages of a website on the homepage.
 If your website has lots of pages, you have to add some sort
of pagination to each page.

Code
Output
 When you click on pagination 1number you will be
redirected into page1

 When you click on pagination 2 number you will be

redirected into page2

 When you click on pagination 3 number you will be

redirected into page3

 When you click on pagination 4number you will be

redirected into page4
Multiple Choice Questions
1)what enables to redirects you to results for the same query on other pages
a) pagination
b) canvas
c) svg
d) links
2)Pagination is mainly used for
a) To give links for multiple pages through a web page
b) For slid show
c) For images tagging
d) For font effect

Exercise
1)Explain about pagination
2) Different type of pagination
3) what do you mean by breadcrumbs

Multiple Choice Questions Answers

1)a
2)b

Keywords
Pagination, breadcrumbs, redirect, homepage
 Chapter 17: Buttons
 With the help of CSS, we can do modification on buttons like adding color, changing
borders etc.
 Buttons are for triggering actions. When do you use the <button> element? A good rule
is to use a button when there is “no meaningful href.”
 Here’s another way to think of that: if clicking it doesn’t do anything without JavaScript,
it should be a <button>.
 A <button> that is within a <form>, by default, will submit that form. But aside from
that, button elements don’t have any default behavior, and you’ll be wiring up that
interactivity with JavaScript.

With html we can create a simple button

Code
Output

With html and CSS, we can create a simple

button with extra features like color …etc.

 In CSS we can use. buttons {} to give the properties of buttons inside the style tag and to
create a button we have to use <button>…</button> tag in html

Code
Output

Different properties applied to button

 1) Button size
 We can change the button size by using font-size property

Code

Output
 2) Button color
 We can change the button color by using background-color property

Code
Output
3) Rounded Button
 We can change the button to rounded button by using border-radius property

Code

Output
4) Button Width
 We can change the button width to by using width property

Code
Output

Multiple Choice Questions

1) What is the tag used for creating button?

a) <a>
b) <button>
c) <small>
d) <big>
2) . buttons {} is used for
a) Providing various properties for buttons
b) For creating buttons
c) For creating different shapes of buttons
d) None
3) Which properties is used for creating button color?
a) Background-color
b) Button-color
c) Font-size
d) Width
4) Which properties is used for creating different font size

a. Background-color
b. Button-color
c. Font-size
d. Width
Exercise
1) How to create a button
2) How to use CSS for styling the buttons
3) How to create different button size

Keywords

Button, properties, provides, meaningful

Multiple Choice Questions Answers

1)b
2)a
3)a

4)c