Scribd
Upload
255 views29 pages

HTML Css Questions Answers For Interview Students Competitive Exams

This document contains questions and answers related to HTML and CSS. It provides definitions and explanations of common HTML elements, tags, attributes and concepts. Examples are given for various HTML elements and features like headings, lists, links, images, iframes and forms.

Uploaded by

akhilkadali123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
255 views29 pages

HTML Css Questions Answers For Interview Students Competitive Exams

This document contains questions and answers related to HTML and CSS. It provides definitions and explanations of common HTML elements, tags, attributes and concepts. Examples are given for various HTML elements and features like headings, lists, links, images, iframes and forms.

Uploaded by

akhilkadali123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

HTML & CSS

QUESTIONS &
ANSWERS FOR
I N T E RV I E W,
STUDENTS,
COMPETITIVE EXAMS
Editor
Swawon Mondal
TABLE OF CONTENT
HTML………………………………. 1
CSS…………………………………. 43
1. What is HTML?
Ans: HTML stands for Hyper Text Markup Language. It is a language of
World Wide Web. It is a standard text formatting language which is used to
create and display pages on the Web. It makes the text more interactive and
dynamic. It can turn text into images, tables, links.

2. What are Tags?


Ans: HTML tags are composed of three things: an opening tag, content and
ending tag. Some tags are unclosed tags.
HTML documents contain two things:
content, and
tags

When a web browser reads an HTML document, the browser reads it from
top to bottom and left to right. HTML tags are used to create HTML
documents and render their properties. Each HTML tags have different
properties.
Syntax
<tag> content </tag>
Content is placed between tags to display data on the web page.

3. Do all HTML tags have an end tag?


Ans: No. There are some HTML tags that don't need a closing tag. For
example: <image> tag, <br> tag.

4. What is formatting in HTML?


Ans: The HTML formatting is a process of format the text for a better look
and feel. It uses different tags to make text bold, italicized, underlined.

5. How many types of heading does an HTML contain?


Ans: The HTML contains six types of headings which are defined with the
<h1> to <h6> tags. Each type of heading tag displays different text size
from another. So, <h1> is the largest heading tag and <h6> is the smallest
one. For example:

1. <h1> Heading no. 1</h1>


2. <h2> Heading no. 2</h2>
3. <h3> Heading no. 3</h3>
4. <h4> Heading no. 4</h4>
5. <h5> Heading no. 5</h5>
6. <h6> Heading no. 6</h6>

6. What are some common lists that are used when designing a
page?
Ans: There are many common lists which are used to design a page. You
can choose any or a combination of the following list types:
Ordered list - The ordered list displays elements in numbered
format. It is represented by <ol> tag.
Unordered list - The unordered list displays elements in bulleted
format. It is represented by <ul> tag.
Definition list - The definition list displays elements in definition
form like in dictionary. The <dl>, <dt> and <dd> tags are used to
define description list.

7. What is the difference between HTML elements and tags?


Ans: HTML elements communicate to the browser to render text. When the
elements are enclosed by brackets <>, they form HTML tags. Most of the
time, tags come in a pair and surround content.
8. What is semantic HTML?
Ans: Semantic HTML is a coding style. It is the use of HTML markup to
reinforce the semantics or meaning of the content. For example: In semantic
HTML <b> </b> tag is not used for bold statement as well as <i> </i> tag is
used for italic. Instead of these we use <strong></strong> and <em></em>
tags.

9. What is an image map?


Ans: Image map facilitates you to link many different web pages using a
single image. It is represented by <map> tag. You can define shapes in
images that you want to make part of an image mapping.

10. How to insert a copyright symbol on a browser page?


Ans: You can insert a copyright symbol by using &copy; or &#169; in an
HTML file.

11. How to create a nested webpage in HTML?


Ans: The HTML iframe tag is used to display a nested webpage. In other
words, it represents a webpage within a webpage. The HTML <iframe> tag
defines an inline frame.

For example:

1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2> HTML Iframes example</h2>
5. <p> Use the height and width attributes to specify the size of the
iframe:</p>
6. <iframe src ="https://www.google.com/" height ="300" width
="400" ></iframe>
7. </body>
8. </html>

12. How do you keep list elements straight in an HTML file?


Ans: You can keep the list elements straight by using indents.

13. Does a hyperlink only apply to text?


Ans: No, you can use hyperlinks on text and images both. The HTML
anchor tag defines a hyperlink that links one page to another page. The
"href" attribute is the most important attribute of the HTML anchor tag.
Syntax

1. <a href = "..........." > Link Text </a>

14. What is a style sheet?


Ans: A style sheet is used to build a consistent, transportable, and well-
designed style template. You can add these templates on several different
web pages. It describes the look and formatting of a document written in
markup language.
15. Can you create a multi-colored text on a web page?
Ans: Yes. To create a multicolor text on a web page you can use <font color
="color"> </font> for the specific texts you want to color.

16. Is it possible to change the color of the bullet?


Ans: The color of the bullet is always the color of the first text of the list.
So, if you want to change the color of the bullet, you must change the color
of the text.

17. What is a marquee?


Ans: Marquee is used to put the scrolling text on a web page. It scrolls the
image or text up, down, left or right automatically. You should put the text
which you want to scroll within the <marquee>......</marquee> tag.
18. How many tags can be used to separate a section of texts?
Ans: Three tags are used to separate the texts.
<br> tag - Usually <br> tag is used to separate the line of text. It
breaks the current line and conveys the flow to the next line
<p> tag - The <p> tag contains the text in the form of a new
paragraph.
<blockquote> tag - It is used to define a large quoted section. If
you have a large quotation, then put the entire text within
<blockquote>.............</blockquote> tag.

19. How to make a picture of a background image of a web


page?
Ans: To make a picture a background image on a web page, you should put
the following tag code after the </head> tag.

1. <body background = "image.gif" >

Here, replace the "image.gif" with the name of your image file which you
want to display on your web page.

20. What are empty elements?


Ans: HTML elements with no content are called empty elements. For
example: <br>, <hr> etc.

21. What is the use of a span tag? Give one example.


Ans: The span tag is used for following things:
For adding color on text
For adding background on text
Highlight any color text
Example:

1. <p>
2. <span style ="color:#ffffff;" >
3. In this page we use span.
4. </span>
5. </p>

22. What is the use of an iframe tag?


Ans: An iframe is used to display a web page within a web page.
Syntax:

1. <iframe src ="URL" ></iframe>

Example:

1. <iframe src ="demo_iframe.html" width ="200px" height ="200px"


></iframe>

Target to a link:

1. <iframe src ="http://www.javatpoint.com" name ="iframe_a" >


</iframe>

23. What are the entities in HTML?


Ans: The HTML character entities are used as a replacement for reserved
characters in HTML. You can also replace characters that are not present on
your keyboard by entities. These characters are replaced because some
characters are reserved in HTML.

24. Why is a URL encoded in HTML?


Ans: An URL is encoded to convert non-ASCII characters into a format that
can be used over the Internet because a URL is sent over the Internet by
using the ASCII character-set only. If a URL contains characters outside the
ASCII set, the URL has to be converted. The non-ASCII characters are
replaced with a "%" followed by hexadecimal digits.

25. Does a <!DOCTYPE html> tag is a HTML tag?


Ans: No, the <!DOCTYPE html> declaration is not an HTML tag. There
are many type of HTML e.g. HTML 4.01 Strict, HTML 4.01 Transitional,
HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional,
XHTML 1.0 Frameset, XHTML 1.1 etc. So, <!DOCTYPE html> is used to
instruct the web browser about the HTML page.

26. What is the canvas element in HTML5?


Ans: The <canvas> element is a container that is used to draw graphics on
the web page using scripting language like JavaScript. It allows for
dynamic and scriptable rendering of 2D shapes and bitmap images. There
are several methods in canvas to draw paths, boxes, circles, text and add
images. For Example:

1. <canvas id ="myCanvas1" width ="300" height ="100" style


="border:2px solid;" >
2. Your browser does not support the HTML5 canvas tag.
3. </canvas>

27. What is SVG?


Ans: HTML SVG is used to describe the two-dimensional vector and
vector/raster graphics. SVG images and their behaviors are defined in XML
text files. So as XML files, you can create and edit an SVG image with the
text editor. It is mostly used for vector type diagrams like pie charts, 2-
Dimensional graphs in an X, Y coordinate system.

1. <svg width ="100" height ="100" >


2. <circle cx ="50" cy ="50" r ="40" stroke ="yellow" stroke-width
="4" fill ="red" />
3. </svg>
28. What are the different new form element types in HTML 5?
Ans: Following is a list of 10 frequently used new elements in HTML 5:
Color
Date
Datetime-local
Email
Time
Url
Range
Telephone
Number
Search

29. Is there any need to change the web browsers to support


HTML5?
Ans: No. Almost all browsers (updated versions) support HTML 5. For
example Chrome, Firefox, Opera, Safari, IE.

30. Which type of video formats are supported by HTML5?


Ans: HTML 5 supports three types of video format:
mp4
WebM
Ogg

31. Is audio tag supported in HTML 5?


Ans: Yes. It is used to add sound or music files on the web page. There are
three supported file formats for HTML 5 audio tag.
1. mp3
2. WAV
3. Ogg

Let's see the code to play mp3 file using HTML audio tag.

1. <audio controls>
2. <source src ="koyal.mp3" type ="audio/mpeg" >
3. Your browser does not support the html audio tag.
4. </audio>

Instead of koyal.mp3, you can pass any mp3 file name.

32. What is the difference between progress and meter tag?


Ans: The progress tag is used to represent the progress of the task only
while the meter tag is used to measure data within a given range.

33. What is the use of figure tag in HTML 5?


Ans: The figure tag is used to add a photo in the document on the web page.
It is used to handle the group of diagrams, photos, code listing with some
embedded content.

1. <p> The Taj Mahal is widely recognized as "the jewel of Muslim


art in India and one of the universally admired masterpieces of the
world's heritage."</p>
2. <figure>
3. <img src ="htmlpages/images/tajmahal.jpg" alt ="Taj Mahal" />

4. </figure>
34. What is the use of figcaption tag in HTML 5?
Ans: The <figcaption> element is used to provide a caption to an image. It
is an optional tag and can appear before or after the content within the
<figure> tag. The <figcaption> element is used with <figure> element and
it can be placed as the first or last child of the <figure> element.

1. <figure>
2. <img src ="htmlpages/images/tajmahal.jpg" alt ="Taj Mahal" />

3. <figcaption> Fig.1.1 - A front view of the great Taj Mahal in Agra.


</figcaption>
4. </figure>

35. What is button tag?


Ans: The button tag is used in HTML 5. It is used to create a clickable
button within the HTML form on the web page. It is generally used to
create a "submit" or "reset" button. Let's see the code to display the button.

1. <button name ="button" type ="button" > Click Here</button>

36. What is the use of details and summary tag?


Ans: The details tag is used to specify some additional details on the web
page. It can be viewed or hidden on demand. The summary tag is used with
details tag.

37. What is datalist tag?


Ans: The HTML 5 datalist tag provides an autocomplete feature on the
form element. It facilitates users to choose the predefined options to the
users to select data.

1. <label>
2. Enter your favorite cricket player: Press any character<br />
3. <input type ="text" id ="favCktPlayer" list ="CktPlayers" >
4. <datalist id ="CktPlayers" >
5. <option value ="Sachin Tendulkar" >
6. <option value ="Brian Lara" >
7. <option value ="Jacques Kallis" >
8. <option value ="Ricky Ponting" >
9. <option value ="Rahul Dravid" >
10. <option value = "Shane Warne" >
11. <option value = "Rohit Sharma" >
12. <option value = "Donald Bradman" >
13. <option value = "Saurav Ganguly " >
14. <option value = "AB diVilliers" >
15. <option value = "Mahendra Singh Dhoni" >
16. <option value = "Adam Gilchrist" >
17. </datalist>
18. </label>

38. If I do not put <!DOCTYPE html> will HTML 5 work?


Ans: No, the browser will not be able to identify that it is an HTML
document and HTML 5 tags do not function properly..

39. What is the use of the required attribute in HTML5?


Ans: It forces a user to fill text on the text field or text area before
submitting the form. It is used for form validation.
Example:

1. Name: <input type ="text" name ="name" required>

40. What are the new <input> types for form validation in
HTML5?
Ans: The new input types for form validation are email, URL, number, tel,
and date.
Example:

1. <input type ="email" >

41. What Is Extensible Stylesheet Language (xsl)?


Ans: XSL is a proposed styling language for formatting XML (eXtensible
Markup Language) documents. The proposal was submitted to the W3C by
Microsoft, Inso, and ArborText.

42. How To Style Forms?


Ans: Forms and form elements like SELECT, INPUT etc. can be styled
with CSS - partially.
Checkboxes and Radiobuttons do not yet accept styles, and Netscape 4.xx
has certain issues, but here is a tutorial that explains the application of CSS
Styles on Form Elements.
43. What is CSS ?
Ans: The full form of CSS is Cascading Style Sheets. It is a styling
language which is simple enough for HTML elements. It is popular in web
designing, and its application is common in XHTML also.

44. What is the origin of CSS ?


Ans: Standard Generalized Markup Language marked the beginning of
style sheets in 1980s.

45. What are the different variations of CSS ?


Ans: The variations for CSS are:

CSS 1
CSS 2
CSS 2.1
CSS 3
CSS 4

46. What are the limitations of CSS ?


Ans: Limitations are:

Ascending by selectors is not possible


Limitations of vertical control
No expressions
No column declaration
Pseudo-class not controlled by dynamic behavior
Rules, styles, targeting specific text not possible

47. What are the advantages of CSS ?


Ans: Advantages are:
Bandwidth
Site-wide consistency
Page reformatting
Accessibility
Content separated from presentation

48. What are CSS frameworks?


Ans: It is a pre-planned libraries, which allows easier and more standards-
compliant webpage styling, using CSS language.

49. Who maintains the CSS specifications?


Ans: World Wide Web Consortium maintains the CSS specifications.
50. In how many ways can a CSS be integrated as a web page?
Ans: CSS can be integrated in three ways:

Inline: Style attribute can be used to have CSS applied HTML


elements.
Embedded: The Head element can have a Style element within
which the code can be placed.
Linked/ Imported: CSS can be placed in an external file and
linked via link element.

51. What benefits and demerits do External Style Sheets have?


Ans:
Benefits:

One file can be used to control multiple documents having


different styles.
Multiple HTML elements can have many documents, which can
have classes.
To group styles in composite situations, methods as selector and
grouping are used.

Demerits:
Extra download is needed to import documents having style
information.
To render the document, the external style sheet should be
loaded.
Not practical for small style definitions.

52. Discuss the merits and demerits of Embedded Style Sheets?


Ans: Merits of Embedded Style Sheets:

Multiple tag types can be created in a single document.


Styles, in complex situations, can be applied by using Selector
and Grouping methods.
Extra download is unnecessary.

Demerits of Embedded Style Sheets:

Multiple documents cannot be controlled.

53. What does CSS selector mean?


Ans: A string equivalent of HTML elements by which declarations or a set
of it, is declared and is a link that can be referred for linking HTML and
Style sheet is CSS selector.

54. Enlist the media types CSS allows?


Ans: The design and customization of documents are rendered by media.
By applying media control over the external style sheets, they can be
retrieved and used by loading it from the network.

55. Differentiate logical tags from physical tags?


Ans:

While physical tags are also referred to as presentational mark-


up, logical tags are useless for appearances.
Physical tags are newer versions while logical tags are old and
concentrate on content.

56. Differentiate Style Sheet concept from HTML?


Ans: While HTML provides easy structure method, it lacks styling, unlike
Style sheets. Moreover, style sheets have better browser capabilities and
formatting options.

57. Describe ‘ruleset’?


Ans: Ruleset : Selectors can be attached to other selectors to be identified
by ruleset.
It has two parts:

Selector, e.g. R and


declaration {text-indent: 11pt}

58. Comment on the Case-sensitivity of CSS ?


Ans: Although, there are no case-sensitivity of CSS, nevertheless font
families, URL’s of images, etc is. Only when XML declarations along
with XHTML DOCTYPE are being used on the page, CSS is case -
sensitive.

59. Define Declaration block?


Ans: A catalog of directions within braces consisting of property, colon and
value is called declaration block.
e.g.: [property 1: value 3]

60. Enlist the various fonts’ attributes?


Ans: They are:
Font-style
Font-variant
Font-weight
Font-size/line-height
Font-family
Caption
Icon

61. Why is it easy to insert a file by importing it?


Ans: Importing enables combining external sheets to be inserted in many
sheets. Different files and sheets can be used to have different functions.
Syntax:
@import notation, used with <Style> tag.

62. What is the usage of Class selector?


Ans: Selectors that are unique to a specific style, are called CLASS
selectors. Declaration of style and association with HTML can be made
through this. Syntax:
Classname
it can be A-Z, a-z or digits.
.top {font: 14em ;}, class selector
<Body class= “top”> this class is associated with element </body>

63. Differentiate Class selector from ID selector?


Ans: While an overall block is given to class selector, ID selector prefers
only a single element differing from other elements. In other words, ID are
uniques while classes are not. Its possible that an element has both class and
ID.
64. Can more than one declaration be added in CSS?
Ans: Yes, it can be achieved by using a semicolon.

65. What is Pseudo-elements ?


Ans: Pseudo-elements are used to add special effects to some selectors.
CSS in used to apply styles in HTML mark-up. In some cases when extra
mark-up or styling is not possible for the document, then there is a feature
available in CSS known as pseudo-elements. It will allow extra mark-up to
the document without disturbing the actual document.

66. What happens if 100% width is used along with floats all
across the page?
Ans: While making the float declaration, 1 pixel is added every time it is
used in the form of the border, and even more float is allowed thereafter.
67. Can default property value be restored through CSS? If
yes, how?
Ans: In CSS, you cannot revert back to old values due to lack of default
values. The property can be re- declared to get the default property.
68. Enlist the various Media types used?
Ans: Different media has different properties as they are case insensitive.
They are:

Aural – for sound synthesizers and speech


Print – gives a preview of the content when printed
Projection- projects the CSS on projectors.
Handheld- uses handheld devices.
Screen- computers and laptop screens.

69. What is CSS Box Model and what are its elements?
Ans: This box defines design and layout of elements of CSS. The elements
are:
Margin : the top most layer, the overall structure is shown
Border : the padding and content option with a border around it is shown.
Background color affects the border.
Padding : Space is shown. Background colour affects the border.
Content : Actual content is shown.

70. What is contextual selector?


Ans: Selector used to select special occurrences of an element is called
contextual selector. A space separates the individual selectors. Only the last
element of the pattern is addressed in this kind of selector. For e.g.: TD P
TEXT {color: blue}

71. Compare RGB values with Hexadecimal color codes ?


Ans: A color can be specified in two ways:

A color is represented by 6 characters i.e. hexadecimal color


coding. It is a combination of numbers and letters and is preceded
by #. e.g.: g {color: #00cjfi}
A color is represented by a mixture of red, green and blue. The
value of a color can also be specified. e.g.: rgb(r,g,b): In this type
the values can be in between the integers 0 and
255. rgb(r%,g%,b%): red, green and blue percentage is shown.

72. Compare Grouping and Nesting in CSS ?


Ans: Grouping: Selectors can be grouped having the same values of
property and the code be reduced.

1 h1 {
2
3 color: blue;
4}
5 h2 {
6
7 color: blue;
8 }
9
1 p{
0
1 color: blue;
1 }
1
2
1
3
1
4
1
5
1
6
1
7

It can be seen from the code that every element shares the same property.
Rewriting can be avoided by writing each selector separated by a comma.
Nesting: Specifying a selector within a selector is called nesting.
1 P
2
3 {
4 color: red;
5
6 text-align: left;
7
8 }
9 .marked
1 {
0
1 background-color: blue;
1 }
1
2 .marked p
1
3 {
1
color: green;
4
1 }
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5

73. How can the dimension be defined of an element ?


Ans: Dimension properties can be defined by:
Height
Max-height
Max-width
Min-height
Min-width
Width

74. Define float property of CSS?


Ans: By float property, the image can be moved to the right or the left along
with the text to be wrapped around it. Elements before this property is
applied do not change their properties.

75. How does Z index function?


Ans: Overlapping may occur while using CSS for positioning HTML
elements. Z index helps in specifying the overlapping element. It is a
number which can be positive or negative, the default value being zero.

76. What is graceful degradation?


Ans: In case the component fails, it will continue to work properly in the
presence of a graceful degradation. The latest browser application is used
when a webpage is designed. As it is not available to everyone, there is a
basic functionality, which enables its use to a wider audience. In case the
image is unavailable for viewing, text is shown with the alt tag.

77. What is progressive enhancement?


Ans: It’s an alternative to graceful degradation, which concentrates on the
matter of the web. The functionality is same, but it provides an extra edge
to users having the latest bandwidth. It has been into prominent use recently
with mobile internet connections expanding their base.

78. How can backward compatibility be designed in CSS?


Ans: HTML sheet methods is collaborated with CSS and used accordingly.

79. How can the gap under the image be removed?


Ans: As images being inline elements are treated same as texts, so
there is a gap left, which can be removed by:
CSS
1 img { display: block ; }

80. Why is @import only at the top?


Ans :@import is preferred only at the top, to avoid any overriding rules.
Generally, ranking order is followed in most programming languages such
as Java, Modula, etc. In C, the # is a prominent example of a @import
being at the top.

81. Which among the following is more precedent: CSS


properties or HTML procedures?
Ans: CSS is more precedent over HTML procedures. Browsers, which do
not have CSS support, display HTML attributes.

82. What is Inline style?


Ans: The Inline style in a CSS is used to add up styling to individual HTML
elements.
83. How comments can be added in CSS?
Ans: The comments in CSS can be added with /* and */.

84. Define Attribute Selector ?


Ans: It is defined by a set of elements, value and its parts.
85. Define property?
Ans: A style, that helps in influencing CSS. E.g. FONT. They have
corresponding values or properties within them, like FONT has different
style like bold, italic etc.

86. What is Alternate Style Sheet?


Ans: Alternate Style Sheets allows the user to select the style in which the
page is displayed using the view>page style menu. Through Alternate Style
Sheet, user can see a multiple version of the page on their needs and
preferences.

87. Are quotes mandatory in URL’s?


Ans: Quotes are optional in URL’s, and it can be single or double.

88. What is at-rule?


Ans: Rule, which is applicable in the entire sheet and not partly, is known
as at-rule. It is preceded by @ followed by A-Z, a-z or 0-9.

89. How can CSS be cascaded to mix with user’s personal


sheet?
Ans: Properties can be a set in recommended places and the document
modified for CSS to mix with user’s personal sheet.

You might also like