Top Html And CSS Interview questions in 2022

This article covers the most frequently asked HTML and CSS interview questions.

Before starting with the interview questions on HTML and CSS, let’s first go through, what is HTML and CSS? the career opportunities it provides, etc.

Introduction To Html

HTML is an abbreviation for HyperText Markup Language. It is a text formatting language that was first used to create web pages in 1993. HTML is a language that the browser interprets to tell it what to display and how to display it.

If you wish to work in the web development field [Web designers, Web Developers], you need to master Html And CSS. HTML alone is insufficient for a web developer because HTML simply outlines the structure of the data that will be presented on the browser in a webpage; we will need to employ Html And CSS as well as Javascript to make it visually appealing and functional.

HTML5 is the most recent version of HTML. Tags and Attributes are the two main components of the HTML language. The image below depicts some basic HTML tags and attributes.

HTML Interview Questions and Answers

1. Are the HTML tags and elements the same thing?

No, HTML elements are defined by a starting tag, some content, and a closing tag. For example, <h1>Heading </h1> is an HTML element, but only <h1> is a starting tag, and </h1> is a closing tag.

2. Describe the HTML layout structure?

Every web page contains many components that display the required content as well as a unique user interface. However, there are a few things that are templated and are a generally acknowledged style of structuring a web page, such as:

<header>: Stores the web page’s initial information.
<footer>: This is the final section of the page.
<nav>: The HTML page’s navigation menu.
<article>: It is a collection of information.
<section>It is used within the article block to specify the basic structure of a page.
<aside>: Page’s sidebar material

3. What are tags and attributes in HTML?

Tags are the primary component of HTML that defines how the content will be structured/formatted, whereas Attributes are used in conjunction with HTML tags to define the element’s characteristics. For instance, <p align=” center”> Interview questions</p>In this case, the attribute ‘align’ will be used to align the paragraph so that it appears in the center of the view.

4. What are void elements in HTML?

Void elements are HTML elements that do not have closing tags or do not need to be closed. For example <br/>, <img/>, <hr/> and so on.

5. What is the advantage of collapsing white space?

Because the browser collapses multiple spaces into a single space character, a blank sequence of whitespace characters is treated as a single space character in HTML. This allows a developer to indent lines of text without worrying about multiple spaces and maintains the readability and understandability of HTML codes.

6. What are HTML Entities?

Some characters in HTML are reserved, such as ‘<‘, ‘>’, ‘/’, and so on. To use these characters on our webpage, we must employ character entities known as HTML Entities. The mappings between the reserved character and its respective entity character are shown below.

Character	Entity Name	Entity Number
<	<	<
>	>	>
&	&	&
(non-breaking space) Eg. 10 PM	Eg. <p>10&nbsp&nbspPM</p

7. What is the ‘class’ attribute in HTML?

The class attribute is used to indicate the name of an HTML element’s class. Multiple HTML elements can have the same class value. It is also primarily used to link the styles written in the stylesheet to the HTML elements.

8. What is the difference between the ‘id’ attribute and the ‘class’ attribute of HTML elements?

Multiple HTML elements can have the same class value, however, a value of an element’s id property cannot be connected with another HTML element.

9. Define multipart form data?

One of the values of the enctype attribute is multipart form data. Its purpose is to deliver file data to the server for processing. Text/plain and application/x-www-form-URL encoded are two more accepted enctype options.

10. How to optimize website assets loading?

To reduce the website load time, we must optimize asset loading, which entails:

CDN hosting – A CDN, or content delivery network, is a network of computers that are geographically distributed to help reduce latency.
File compression – This is a technique for reducing the size of an asset in order to reduce data transfer.
Concatenation of files – This minimizes the number of HTTP calls.
Minifying scripts – reduces the overall file size of js and CSS files.
Parallel downloads – Hosting assets on various subdomains can help to circumvent all modern browsers’ download limit of 6 assets per domain. This can be configured, but most regular users never change it.
Lazy Loading – Rather than loading all assets at once, non-critical assets can be loaded on demand.

11. What are the various formatting tags in HTML?

HTML has various formatting tags:

<b> – makes text bold
<i> – makes text italic
<em> – makes text italic but with added semantics importance
<big> – increases the font size of the text by one unit
<small> – decreases the font size of the text by one unit
<sub> – makes the text a subscript
<sup> – makes the text a superscript
<del> – displays as strike-out text
<strong> – marks the text as important
<mark> – highlights the text
<ins> – displays as added text

12. Please explain how to indicate the character set being used by a document in HTML ?

The character set is defined in <meta> tag inside <head> element.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   ...
   ...
 </head>
 ...
</html>

13. How to include javascript code in HTML?

HTML provides a <script> tag using which we can run the javascript code and make our HTML page more dynamic.

<!DOCTYPE html>
<html>
   <body>
    <h1>
          <span>This is a demo for </span>
          <u><span id="demo"></span></u>
   </h1>
   <script>
       document.getElementById("demo").innerHTML = "script Tag"
   </script>
   </body>
</html>

14. When to use scripts in the head and when to use scripts in the body?

If the scripts include any event-triggered routines or the jquery library, we should include them in the head section. If the script writes content to the page or is not contained within a function, it should be placed towards the bottom of the body section. In summary, here are three points:

In the head section, place library scripts or event scripts.
Place standard scripts in the head section that do not write anything to the page until there is a performance issue.
Scripts that render something on the web page should be placed at the bottom of the body section.

15. What are forms and how to create forms in HTML?

To capture user inputs, an HTML form is employed. To create forms, HTML provides the form> tag. We utilise the input> tag inside the form to capture user input so that all collected user data may be transferred to the server for processing. There are several input types, such as ‘button,’ ‘checkbox,’ ‘number,’ ‘text,’ ‘password,”submit,’ and so on.

<form action="/submit_data.php">
   <label>Enter your name: </label>
   <input type="text" name="name" /> 
   <label>Enter Mobile number </label>
   <input type="number" name="mobile_no"/>
   <input type="submit" value="Submit">
</form>

16. How to handle events in HTML?

HTML allows event trigger actions in browsers using javascript or JQuery. There are a lot of events like ‘onclick’, ‘ondrag’, ‘onchange’, etc.

<!DOCTYPE html>
<html>
   <body style="padding-top:50px">
       <h3 id="event_demo">0</h3>
       <input type="button" onclick="myFunction()" value="Click Me" />
       <input type="reset" onclick="reset()" value="Reset" />
   </body>
   
   <script>
       function myFunction() {
           var value = document.getElementById("event_demo").innerHTML
           value = parseInt(value) + 1;
           document.getElementById("event_demo").innerHTML = value;
       }
       function reset() {
           document.getElementById("event_demo").innerHTML = 0;
       }
   </script>
</html>

17. Difference between link tag <link> and anchor tag <a>?

The anchor tag <a> is used to construct a hyperlink to another website or a specific section of a website, and these links are clickable, but the link tag <link> specifies a link between a document and an external resource, and these links are not clickable.

18. How to specify the link in HTML and explain the target attribute?

To specify the links in a webpage, HTML provides the hyperlink – a> tag. The ‘href’ attribute specifies the link, and the ‘target’ attribute specifies where we want to open the linked document. The following values can be assigned to the ‘target’ attribute:

_self: This is a default value. It opens the document in the same window or tab as it was clicked.
_blank: It opens the document in a new window or tab.
_parent: It opens the document in a parent frame.
_top: It opens the document in a full-body window

19. What is the difference between “display: none” and “visibility: hidden”, when used as attributes to the HTML element.

When we use the attribute “visibility: hidden” for an HTML element, it is hidden from the webpage but still occupies space. When we use the “display: none” property for an HTML element, the element is hidden and takes up no space on the webpage.

20. What is the significance of <head> and <body> tag in HTML?

The information about the document is provided by the <head> tag. It should always be surrounded by the <html> tag. This tag holds metadata about the webpage, and tags surrounded by the head tag, such as <link>, <meta>, <style>, <script>, and so on, are not displayed on the web page. In addition, there can only be one <head> tag in the entire HTML text, and it must always come before the <body> tag.

The <body> tag specifies the content of the HTML document. It should always be surrounded by the <html> tag. The <body> tag will always surround all of the materials that need to be displayed on the web page, such as pictures, text, audio, video, and contents, which are presented using elements such as <p>, <img>, <audio>, <heading>, <video>, <div>, and so on. In addition, there may only be one body element in an HTML document, and it must always come after the <head> tag.

Introduction to CSS

Web apps and websites are becoming more prevalent in every field, Html and CSS are required to create visually appealing web pages. There is now a high need for web developers that are proficient in HTML and CSS. Candidates seeking a career in web design must pass interviews that include Html And CSS interview questions.

We compiled a list of CSS interview questions and divided them into four categories: fundamental CSS interview questions, intermediate CSS interview questions, advanced CSS interview questions, and frequently asked CSS interview questions. This list would be beneficial to both seasoned professionals and new graduates. Let us begin with this CSS interview questions and answers guide.

CSS Interview Questions and Answers

Let us begin with the basic CSS interview questions!

1. Name some CSS frameworks.

CSS frameworks are libraries that make it easier to style web pages. Foundation, Bootstrap, Gumby, Ukit, Semantic UI, and others are examples.

2. How can CSS be integrated into an HTML page?

CSS can be integrated into HTML in three ways: using style tags in the head section, inline styling, writing CSS in a separate file, and linking to the HTML page via the link tag.

3. What was the purpose of developing CSS?

CSS was created to specify how webpages look visually. It enables developers to segregate the structure and content of a website, which was previously impossible.

4. What is the difference between a class and an ID?

Class is a method of customizing HTML components. They are not unique and contain several elements. ID, on the other hand, is unique and can only be assigned to a single element.

5. Define z-index.

This is one of the most common CSS interview questions. The Z-index specifies the stack order of pieces that overlap each other. It has a default value of zero and can take negative or positive values. A greater z-index value is piled on top of the lower index value. It accepts the values auto, number, initial, and inherit.

6. What do you understand by the universal sector?

A universal selector is one that matches the name of any element type rather than selecting elements of a specific type.

Example:-

<style>

* {

color: blue;

font-size: 10px;

}

</style>

7. Tell us about the use of the ruleset.

The ruleset is used to identify selects that can be connected to other selectors. A ruleset is made up of two parts:

Declaration block: contains one or more semicolon-separated declarations
Sector: denotes the HTML element that must be styled.

8. What are the elements of the CSS Box Model?

The CSS box model specifies how CSS components are laid out and designed. Content (such as text and pictures), padding (the area surrounding content), border (the area around padding), and margin are the components (the area around the border).

9. Explain a few advantages of CSS.

CSS allows you to handle numerous pages from a single site, group styles in complicated circumstances using selectors and grouping techniques, and classify various HTML components.

10. How can you target h3 and h2 with the same styling?

Multiple elements can be targeted by separating them with a comma:

h2, h3 {color: red;}

11. Name media types allowed by CSS.

The different media types allowed by CSS are:

speech
audio
visual
tactile media
continuous or paged media
grip media or bitmap
interactive media

12. Tell us about the property used for image scroll controlling?

The background-attachment attribute specifies whether the background picture is fixed or scrolls along with the rest of the page. A fixed background-image example:

body {

  background-image: url(‘url_of_image’);

  background-repeat: no-repeat;

  background-attachment: fixed;

}

13. Define contextual selectors.

Contextual selectors in CSS allow developers to set styles for distinct portions of a page. Styles can be applied to individual HTML elements directly, or they can be assigned to separate classes.

14. Explain responsive web design.

Responsive Design is a method of creating web pages that makes use of flexible graphics, flexible layouts, and CSS media queries. This design method tries to create web pages that recognize the orientation and screen size of visitors and adjust the layout accordingly.

15. Tell us about the general CSS nomenclature.

CSS style commands are written in a value and property format. CSS contains a semicolon as a system terminator. The selector is enclosed in curly braces throughout the style. This results in the creation of a style sheet that can be applied to an HTML page.

16. What are the limitations of CSS?

CSS cannot always assure compatibility with every browser; you need to be cautious while choosing the style selector.
The parent selector tag is not available, thus you can’t select the parent selector tag.
Some selectors can lead to cross-browser issues due to their less browser-friendly behavior.
We cannot request a webpage through CSS.

17. How to include CSS in the webpage?

You may incorporate an external style sheet file as a CSS file in your HTML file by using a link tag.
You may integrate CSS styles in your HTML page and write them in the stand-alone stylesheet form of CSS.
By adding an inline style to HTML components, CSS may be placed right in the HTML tag.
Using the @import rule, one may import an external stylesheet file as a new CSS file.

18. What are the different types of Selectors in CSS?

Universal Selector, Element Type Selector, ID Selector, Class Selector, Descendant Combinatory, Child Combinator, General Sibling Combinator, Adjacent Sibling Combinator, and Attribute Selector are all examples of selectors.

19. What is a CSS Preprocessor? What are Sass, Less, and Stylus? Why do people use them?

A CSS preprocessor is a tool that allows us to employ complicated logical syntax such as variables, functions, mixins, and code nesting within vanilla CSS scripts itself.

The. sass extension is used by Sass (Syntactically Awesome Style Sheets). It is used for indentation; no semicolons or curly brackets are used.
Less (Leener Stylesheets) makes use of the. less extension. It is simple to incorporate into any JavaScript project by utilizing NPM or a less.js file. @ is used to define the variables in this case.
Stylus allows us a significant deal of freedom when writing syntax. It may utilize native CSS as well as exclude brackets, colons, and semicolons. It is not necessary to use @ or $ to declare variables.

People use SASS, LESS, and Stylus in order to extend the basic functionality of vanilla CSS.

19. What is the difference between inline, inline-block, and block?

<div> and p> are block elements. They typically begin on a new line and might occupy a full row or breadth.
The tags <a>, <span>, <strong>, and <img> are examples of inline elements. They do not begin a new line. They do, however, show on the same line as the text and tags.
Padding and margins, as well as height and width values, are available for inline-block elements. They are, nonetheless, identical to inline elements.

20. What are Pseudo classes?

Pseudo-classes are non-existent pseudo-elements in a typical document tree. It enables the selection of regular elements under specific situations, particularly when hovering over a link; the anchor tags are :link, :visited, :hover, :active, :focus.

In this example, the color will be red on the anchor tag when it’s hovered.

/* mouse over link */

a: hover {

color: #FFOOFF;

}

21. How do you specify units in the CSS? What are the different ways to do it?

There are mainly four different units in the CSS that are px, em, pt, and percentage (%).

Instead of the cascade, Px (Pixel) is employed for fine-grained control and alignment. We can use 1px or a multiple of px to make it crisp.
Em is used to keep relative font sizes and responsive fonts. 1em Equals 16px with the same font size In general, it is best to set the font size to 10px.
Pt (point) is a fixed-size unit used in printing. 1 point = 1/72 inch
Percentage (%) is used to specify the font size in relation to the body font size. As a result, the body font size must be adjusted appropriately.

22. When should you use translate () instead of absolute positioning?

CSS transform value translates When you change the opacity or transform, the browser does not reflow or redraw. The browser must construct a GPU layer for components when using Transform, however, utilizing the CPU modifies absolute positioning attributes. Translate () is more efficient, resulting in faster painting times. In contrast to changing absolute positioning, the element occupies the original space when using translate ().

23. Differentiate between the use of ID selector and class selector.

ID Selector:

<style>

{

text-align: right;

color: blue;

}

</style>

CSS class Selector: 

<style>

.right {

text-align: right;

color: blue;

}

</style>

23. How do media types in CSS work?

The four types of media properties are print, speech, and screen. Example of using print-media type:-

@media print {

h2 {

background-color: blue;

 }

}

24. What do you understand by pseudo-elements?

Some selectors benefit from the use of pseudo-elements. CSS is used to impart styles to HTML markups. If adding more markup or style to a document is not possible, pseudo-elements can aid by providing extra markup without interfering with the original page.

25. Differentiate between logical and physical tags.

Logical tags, which are older than physical tags, are primarily concerned with content. In terms of presentation and aesthetics, logical ones are rarely used. At the same time, physical ones are used in presentations.

Conclusion

In this tutorial, we have covered all the important aspects of HTML and CSS that can be asked in an interview. We have learned about the basics of tags, attributes, and properties as well as how to use selectors, IDs, and pseudo-elements to make a quirky design web page. We also discussed how to create a basic layout in HTML and how to style it using CSS. Finally, we have seen the basic, intermediate, and advanced interview questions asked in HTML and CSS. In the next tutorial, we will be covering the basics of JavaScript.If you find this post helpful then do share it with your friends and comment down your thoughts below.