Top 20 HTML & CSS Interview Questions With Answers

Are fascinating website ideas exploding out of your mind? Do you wish to put your creative ideas into the most responsive websites that call visitors to come back for more? Then you should surely make your hands dirty with HTML and CSS to give life to your ideas! And, here are a few HTML & CSS Interview Questions & Answers to help you get started. Whether it be an interview or a written test, these HTML & CSS Questions with answers will guide you at their best.

Lets begin with HTML Questions & Answers here.

HTML & HTML5 Questions

An unavoidable and most-asked question is the one below:

As you begin, if you wish to explore HTML & CSS, try GUVI’s Modern HTML & CSS self-paced course.

1. What is HTML?

Ans. HTML stands for HyperText Markup Language. It is also the most popular markup language for creating websites that can be viewed in a web browser.

Another basic question that would follow the definition is-

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

Ans. HTML elements communicate to the browser how to render text. When surrounded by angular brackets <> they form HTML tags, which come in pairs and surround the text.

The next set of questions is a few generic HTML questions with answers that you should know before going into an interview.

3. What does DOCTYPE mean?

Ans. The term DOCTYPE means Document Type Definition and tells the browser which type of HTML is used on a webpage. Browsers use DOCTYPE to determine how to render a page. Moreover, failing to use DOCTYPE will load your page in Quirks Mode.

4. What are the limitations when serving XHTML pages?

The main limitation is the poor browser support of XHTML. Internet Explorer and other user agents cannot parse XHTML as XML. Thus, it is not as extensible language as one might think.

Master HTML: A Complete Guide to HTML and CSS for Beginners

5. What is the syntax difference between a bulleted list and numbered list?

Ans. Bulleted lists use the <ul> tag, which stands for “unordered,” whereas <ol> is used to create an ordered list.

6. What is the difference between a and a?

Ans. A <div> is a container element for grouping and styling, whereas a <frame>creates divisions within a web page and should be used within the <frameset>tag. The use of <frame> and <frameset>are no longer popular and are now being replaced with the more flexible <iframe>, which has become popular for embedding elements from other websites (ie. Youtube videos) into a page.

7. What is the difference between the application model of HTML and HTML5?

Ans. There is not a big difference between the two. HTML5 is a continuum of HTML. There has been no major paradigm shift. From a broader viewpoint, HTML was a simple language for laying out text and images on a webpage, whereas HTML5 can be viewed as a development platform that does what HTML does and more, including better support for audio, video, and interactive graphics. And, it has several new elements, supports offline data storage for applications, and has more robust exchange protocols.

Find out: Is Web Development a Good Career?

8. What are some new HTML5 markup elements?

Ans. Among several: <article>, <aside>, <bdi>, <command>, <details>, <figure>, <figcaption>, <summary>, <header>, <footer>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>, <section>, and <time>.

9. What are the new image elements in HTML5?

Ans. The new image elements in HTML5 are Canvas and WebGL. <canvas> is a new element that acts as a container for graphical elements like images and graphics. WebGL stands for Web Graphics Language, a free cross-platform API that is used for creating 3D graphics in web browsers.

10. What are data- attributes good for?

Ans. data– attribute is used to assign custom data to an element. The stored (custom) data can then be used in the page’s JavaScript to create a more engaging user experience.

11. Describe the difference between cookies, sessionStorage, and localStorage.
Ans. Cookies are small text files that websites place in a browser for tracking or login purposes, and hold a modest amount of data. Meanwhile, localStorage and sessionStorage are new objects, both of which are storage specifications but vary in scope and duration. Moreover, local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Furthermore, is it permanent? sessionStorage only lasts as long as the duration of the longest open tab.

Do you want to master HTML: Learn HTML in a fun way!

12. What are some of the major new APIs that come standard with HTML5?
Ans. Among others are Media API, Text Track API, Application Cache API, User Interaction, Data Transfer API, Command API, and the History API.

13. What is the difference in caching between HTML5 and the old version of HTML?
Ans. A crucial new feature of HTML5 is the Application Cache which creates an offline version of a web application. and stores website files such as HTML files, CSS, images, and JavaScript, locally. Obviously, that speeds up site performance.

14. What is an image map?
Ans. An image map is a list of coordinates relating to a specific image, created to hyperlink areas of the image to different destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination).

15. What is the advantage of collapsing white space?
Ans. White spaces are blank sequences of space characters, which are actually treated as a single space character in HTML. The browser collapses multiple spaces into a single space, so we can indent lines of text without worrying about multiple spaces. This enables us to organize the code into a much more readable format.

16. Do all HTML elements need both opening and closing tags?
Ans. Not really, elements like <img src=””/> or <input tyoe=””/> don’t need a closing tag.

Know: How to Become a Web Developer Comfortably?

17. What is a marquee?

Ans. A marquee is used to enable scrolling text on a web page. So, to do this, just place whatever text you want to appear scrolling within the <marquee> and </marquee>tags.

18. How do you create links to sections on the same page?

Ans. Links can be created using the tag, with referencing through the use of the # symbol. For example, we can have

<a href=”#top”> BACK TO TOP</a>

which would result in the words “BACK TO TOP” appearing on the webpage and links to a bookmark named top. We can then create a separate tag like:

<a name=top></a>

somewhere on the same webpage so that the user will be linked to that place when clicking on “BACK TO TOP”.

So, these were the top HTML questions with answers. To read more HTML CSS interview questions: Proceed with the top CSS Interview questions and answers.

CSS Questions

CSS is all about styling and customizing the web pages. So, the following CSS Interview questions are the most relevant ones.

19. What are the possible ways to apply CSS styles to a web page?

Ans. CSS can be applied in the following three ways:
• Linked: Create a separate .css file and add all the styles for the web page there. Make sure the file is linked to the HTML document(s) using the link tag
• Embedded: Inside the HTML document, open a style tag and inside that, add all styles just like you’d do on a linked file.
• Inline: This is done by adding a style attribute inside an HTML element.

Full Stack Developers: You Should Know This Before Stepping Into Full Stack Development| ZEN Q&A Series

20. Explain the CSS box model.
Ans. The CSS box model is made up of margins, borders, padding, and content. Furthermore, the box model provides a more structured way to space elements in relationship to each other in web pages. So, in your browser’s developer tools, the CSS box model is found at the end of the CSS section and it looks like this:

21. What is the difference between inline and block elements?

Ans. Basically, a block element will take up the whole width available, and comes with a line break before and after. Examples of block-level elements are: headings (i.e <h1>), Paragraphs(<p>), divisions(<div>) etc. In contrast, inline elements take up only the space they need and do not force line breaks. For example: anchors (<a>), spans(<span>) etc.

22. What is grouping used for in CSS?
Ans. Grouping allows several elements of HTML to have the very same styles applied. Moreover, it uses a single declaration and selectors and is separated by commas. For example:

Learn CSS: A Complete Guide to HTML and CSS for Beginners

23. What is a Class selector and how does it differ from an ID selector?
Class selectors are used to applying a style to multiple HTML elements identified with the same class. They are called within the CSS document by a ‘.’, followed by the class name, like this:

The difference between classes and IDs is that an HTML element can accept multiple classes, but only one ID. That means IDs are unique for HTML elements.

24. What is the difference between visibility:hidden and display:none?
Ans. Although these two properties seem similar, there is quite an important difference between the two:
• visibility:hidden hides the element, but it will still take up space, this way affecting the layout of the document.
• display:none also hides the element, but will not take up space and the page will appear as if the element is not present.

25. What are CSS preprocessors and why do we use them?
Ans. CSS preprocessors convert code written in a preprocessed language like SASS or LESS into the same old CSS we’ve been using for such a long time now. The main advantages of using preprocessors are:
a. Ability to define variables
b. Ability to use nested syntax
c. Ability to create and use mixins (functions)
d. Use of mathematical and operational functions
However, there are also some disadvantages like updating issues and debugging difficulties.

Become a Web Developer: Most Important React Interview Questions Of 2023! [Part-2]

26. What are child selectors in CSS?
Ans. Child selectors represent a way of grouping (for styling) a set of elements that descend from a parent element. For example:

27. What are grid systems and why do we use them in web pages?
Ans. Grid systems are structured rules that enable content to be stacked horizontally and vertically consistently and sustainably.
They find heavily usage in today’s websites because they offer increased productivity while coding, they’re versatile and ideal for responsive layouts.

28. How do we use shorthand properties and why?
Ans. Shorthand properties cannot be applied to any CSS property but only a few like border, outline, padding, background etc. Shorthand properties reduce file size thus improving page load time. Then the trick stands for listing all property values on a single line, in a pre-defined order that must be respected. For example:

29. What is the purpose of the z-index and how to use it?
Ans. The z-index property specifies the stack order of an element within the document area (or a part of it). An element with greater stack order will always be in front of an element with a lower stack order. However, z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). It can have four kinds of values:

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

30. List some of the new CSS properties introduced with CSS3?
Ans. The following is a list of new properties in CSS3:
1. border-radius
2. box-shadow
3. text-shadow
4. text-stroke
5. background-size
6. text-overflow
7. resize
8. transition
Also, other features like multiple backgrounds allow you to have two or more backgrounds in the very same selector and a flexible box model which ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

31. Explain what pseudo-classes are and their usage.
Ans. We use Pseudo-classes to define a special state of an element. So, note that pseudo-classes find no definition in the markup. We can use them for:
1. Styling an element on mouseover (hover)
2. Styling an element when it gets focus
3. Styling visited/unvisited links

Web Developers: Top 5 Programming Languages For Web Development

32. What is the CSS selector which allows you to target every element in a web page?
Called the universal selector and signed with an asterisk (*), it sets all HTML elements the same styling rules as defined in the property declarations. For example:

33. What are media queries and how to use them?
Ans. A media query consists of a media type and at least one expression that limits the style sheets’ scope by using media features, such as width, height, and colour. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself. And, the usage of media queries is similar to this:

Wrapping Up

We have tried to cover all the top HTML & CSS questions and answers here. Hope this mini-guide is helpful to you. Improve your web development skills. Start with the basics of HTML & CSS.

If you wish to explore HTML & CSS, try GUVI’s Modern HTML & CSS course.