HTML and CSS Interview Questions And Answers

In this article,i will discuss some interview questions regarding HTML and CSS.

1)What is HTML5? What are the new features?

HTML is a markup language designed for processing, defining and formatting the texts to be displayed in a web browser.The HTML5 is the latest vresion and has features like:

1. Local Storage and session storage instead of cookies
2. New form elements like date,time,url,range,color
3. Canvas for 2D drawing.
4. Media elements like audio and video
5. New semantic elements like nav, header, footer,section and article.

2)What is the difference between Canvas and SVG?

SVG stands for Scalable Vector Graphics where Canvas is pixel graphics.

SVG is a resolution-independent,it will not lose its quality when resized or zoomed.But canvas is resolution-independent.The quality will be affected when it is zoomed or resized.

SVG is written in XML format.Canvas is drawn with JavaScript.

SVG can be modified through CSS and Script.But in Canvas is suitable only through JavaScript

3)What is quirk mode in HTML5? Or, what if if we missed the <!DOCTIPE> elements in html5?

If we omiitted or not included the <!DOCTYPE> element in our document,it will go to Quirk mode.In this mode,the handling of the HTML elements is left to the browser.So the display of our contents will vary from browser to browser and in older versions.So it is safe to include the <!DOCTYPE> in our document.

4)What is HTML Web Workers?What are limitations of HTML5 Web Worker?

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

HTML% Web worker seems to be very handy in many scenarios(espicially for CPU intensive tasks) but it has certain limitations.Few JavaScript objects are not accessible to HTML5 web worker as: parent object,window object,document object

5)What is HTML SSE?

A server-sent event is when a web page automatically gets updates from a server.Receive Server-Sent Event Notifications The EventSource object is used to receive server-sent event notifications:

var source = new EventSource(“demo_sse.php”);
source.onmessage = function(event) {
document.getElementById(“result”).innerHTML += event.data + “<br>”;
};

Example explained:

• Create a new EventSource object, and specify the URL of the page sending the updates (in this example “demo_sse.php”)
• Each time an update is received, the onmessage event occurs
• When an onmessage event occurs, put the received data into the element with id=”result”

6)What is the difference between a block-level element and an inline element?

A block-level element is drawn as a block that stretches to fill the full width available to it i.e, the width of its container and will always start on a new line.Elements that are block-level by default: <div>, <img>, <section>, <form>, <nav>.

Inline elements are drawn where they are defined and only take up space that is absolutely needed. The easiest way to understand how they work is to look at how text flows on a page.
Examples of elements that are inline by default: <span>, <b>, <strong>, <a>, <input>.

7)How to create a nested webpage in HTML?

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.

8)What is Cell Spacing and Cell Padding?

Cell Spacing is referred to as the space or gap between the two cells of the same table. Whereas, Cell Padding is referred to as the gap or space between the content of the cell and cell wall or cell border.

9)What is difference between HTML and XHTML?

The differences between HTML and XHTML are:

• HTML is an application of Standard Generalized Markup Language. Whereas, XML is an application of Extensible Markup Language.
• The first one is a static Web Page whereas the later one is a dynamic Web Page.
• HTML allows programmer to perform changes in the tags and use attribute minimization whereas XHTML when user need a new markup tag then user can define it in this.
• HTML is about displaying information whereas XHTML is about describing the information.

10)What is the meaning of cascading? How do style sheets cascade?

CSS brought about a revolution in web-development and how people perceive the process of building a website. Prior to the existence of CSS, elements had to be styled in an in-line fashion or the style were implemented in the head section of an HTML page. This was changed due to the cascading nature of CSS. Here are the three major ways CSS cascades:

1. Elements — The same CSS style can be applied to multiple elements to achieve the same style.
2. Multiple Style One Element — Multiple styles can be applied to a particular HTML element to achieve a unique style.
3. Same style, Multiple Pages — The same stylesheet can be applied to different HTML pages altogether to achieve a template styling very quickly.

11)What is the z-index in CSS?

The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.

An element with a higher z-index is always stacked above than a lower index.

Z-Index can take the following values:

• Auto: Sets the stack order equal to its parents.
• Number: Orders the stack order.
• Initial: Sets this property to its default value (0).
• Inherit: Inherits this property from its parent element.

12)What are the different modules used in the current version of CSS?

There are several modules in CSS. Below are a few of them:

• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

13)What will this piece of CSS code do to an element? .container { margin: 0 auto; }

When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within its parent container. Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0.

margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto;

14)What is the overflow property in CSS used for?

The overflow property specifies what should happen if content overflows an element’s box. This property specifies whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area. Below are the overflow options available in CSS –

overflow: auto;

overflow: none;

overflow: scroll;

overflow: visible;

15)What is the difference between {visibility: hidden} and {display: none}?

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the DOM). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn’t seen on the page.