Top 10 HTML & CSS Interview Question

Do you want to better in your next front-end interview? If you want to do better in your next interview the post is for you.

1. Do all HTML tags have an end tag?

No. There are some HTML tags that don’t need to closing / ending tag. Example: <br>, <a>, <img>.

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

The HTML contains 6 types of headings form <h1> — <h6> <h1> is the largest heading and <h6> is the smallest heading .

3. What is semantic HTML?

Semantic elements = elements with a meaning.

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.

4. How to create a nested webpage in HTML?

by using <iframe> tag we can create a nested webpage in HTML . by using <iframe> tag we can add another web site or web page in our web site .

<iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

by using this <iframe> tag we can use a youTube video .

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

yes, you can change the color of the bullet. 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 of the list.

6. What is CSS?

the full form of css is Cascading Style Sheets. CSS outlines the style of an HTML webpage. It is a language by which we can set the behavior of an HTML webpage. It describes how the HTML content will be shown on screen.

7. What is the difference between padding and margin?

paddding: In CSS, the padding is the property by which we can create space around element’s content as well as inside any known border.

css padding and margin

margin: In CSS , the margin is the property by which we can create space around element’s content as well as outside of the border.

8. What is a CSS pseudo-class?

It is a class that is used to define a special state of an HTML element.

This class can be used by styling an element when a user snooped over it and also it can style an HTML element when it gets the focus.

selector:pseudo-class {

9. Differentiate between inline and block element.

Inline: the Inline element does not have an element to set width and height and also it does not have the line break.

Example: em, strong, etc. are the inline element .

Block element specification:

  • They do have the line break.
  • They define the width by setting a container and also allow setting height.
  • It can also contain an element that occurs in the inline element.


width and height
max-width and max-height
min-width and min-height
hi (i=1–6)- heading element
p- Paragraph element.

10. what is the difference between the ID and class?

Both ID and class is been used in HTML and assigns the value from CSS and JS.

  • The ID is a kind of element which uniquely assigns a name to a particular element whereas class has an element with a certain set of properties that can be used for the complete block.
  • The id can be used as an element because it can uniquely identify it whereas class is also defined to block the elements and applies too many tags wherever it is used.
  • ID provides the restriction to use its properties to one specific element whereas in class the inheritance is applied to a specific block or group of the element.

I am interested to learn and to teach.