Top HTML and CSS Interview Questions & Answers

1. What is HTML?

HTML stands for Hyper Text Markup Language. It is the standard markup language used for creating web pages. Markup language consists of markup tags and used to develop web pages. It is developed by W3C (World Wide Web Consortium) organization.

2. What are the features of HTML?

It is a mark-up language that provides flexibility to design webpages.
It is easy to use and learn.
It is not case-sensitive means lower-case letters and upper-case letters have similar meanings.
It is platform-independent as it can be used on all operating systems like Windows, Mac, Linux, etc.
It allows adding links, images, audio, and videos to a webpage.

3. What is the current version of HTML?

HTML5.2 is the current version of HTML.

4. Difference between HTML4 and HTML5.

HTML5 provides <video> and <audio> elements for embedding and controlling multimedia content. HTML4 requires the use of third-party plugins like Flash for video and audio.
HTML5 introduces new input types & attributes, making it easier to create and validate forms. HTML4 uses a limited set of input types and lacks built-in validation.
HTML5 encourages the use of semantic tags and attributes, making it easier for search engines to understand the structure of web pages. HTML4 relies more on the use of generic tags like <div> for structure.
HTML5 introduces the <canvas> element, which allows for dynamic 2D graphics rendering directly in the browser. HTML4 does not have a native equivalent for canvas-based graphics.

5. What are HTML tags?

HTML tags are like keywords. Each tag has a unique meaning. They begin with < symbol and end with > symbol. Whatever is written inside < and > are called tags. HTML tags are composed of three things: an opening tag, content, and an ending tag. Content is placed between tags to display data on the web page.

E.g.: <p> This is a paragraph </p>. A paragraph tag is used where <p> is the opening tag and </p> is the closing tag.

6. What are HTML Attributes?

HTML attributes provide additional information about HTML elements. They are defined directly after the tag name. They only appear in opening tags and not in closing tags.

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

HTML elements are the building blocks of an HTML document, while HTML tags are the markers that define the beginning and end of an element. For example, <p> is an HTML tag, and everything between <p> and </p> is an HTML element.

8. Do all HTML tags have a closing tag?

No, there are some tags without closing tags like <br> tag to break the line, <img> tag for images, and <hr> tag to put the horizontal line, etc.

9. What is the basic structure of HTML?

The basic structure of HTML is

<html>
<head>
<title> Title of the page </title>
</head>
<body>Content of the page</body>
</html>

10. How do you include comments in HTML?

Comments in HTML are added using the  syntax. Anything between these tags will be treated as a comment and will not be rendered by the browser.

HTML CSS interview questions and answers

11. What are the different formatting tags in HTML?

In HTML, formatting tags are used to apply specific styles and formatting to the content within them. Here are some of the commonly used formatting tags in HTML: <b>, <i>, <strong>, <em>, <u>, <small>, <sup>, <sub>, <mark>, <code>

12. Which tag is used for headings and how many types of headings are there in HTML?

There are six types of heading tags used in HTML from <h1> to <h6>. Each tag represents a different text size. <h1> is the largest heading tag and <h6> is the smallest one.

13. How do you bold text in HTML?

The bold tag <b> </b> or strong tag <strong> </strong> are used to bold the text in HTML.

14. What are block-level elements?

Block-level elements start with a new line and take full width as a line. They have top and bottom margins. Examples of block-level elements are <div>, <table> etc

15. What are inline elements?

Inline elements do not start with a new line and take as much width as required. They do not have top and bottom margins. Examples of inline elements are <span>, <strong> etc

16. How to create hyperlinks in HTML?

Anchor tag <a> </a> is used to create hyperlinks in HTML that link one webpage to another webpage.

Syntax
<a href =”url”> Link Text </a>

17. What is the use of the href attribute in the anchor tag?

The href attribute is used in the anchor tag to specify the destination address of the link used.

18. What is the difference between <figure> tag and <img> tag?

These both tags are used to display images, but they serve different purposes and are used in different contexts.

<img>: The <img> tag is a void element used to embed images in an HTML document. The src attribute of the <img> tag specifies the URL of the image to be displayed.

<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_1280.png" alt="not found" width="500" height="500">

<figure>: The <figure> tag is a container element used to group an image with its related caption. To define the caption, you can use the <figcaption> element as a child of the <figure> element.

<figure>
    <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_1280.png" alt="not found" width="500" height="500">
    <figcaption>This is a User Placeholder Image</figcaption>
  </figure>

19. What is the purpose of the alt attribute in the <img> tag?

The alt attribute provides alternative text for an image if it cannot be displayed.

20. Which tag is used to display data in tabular form?

The table tag <table> </table> is used to display data in tabular form. A table is a combination of rows and columns.

21. What are the different tags used while displaying data in a table?

<table> It is used to define a table.

<tr> It is used to define a row in a table.

<th> It is used to define a header cell in a table.

<td> It is used to define a cell in a table.

<caption> It is used to define the table caption.

<tbody> It is used to define a group of body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

22. What are void elements in HTML?

In HTML, void elements, also known as self-closing elements or empty elements, are elements that do not have any content and do not require a closing tag. For example: <br>, <hr>, <input>, <img> etc.

23. What are the different types of lists in HTML?

Unordered List: It will list the items using plain bullets. It is represented by <ul> tag.
Ordered List: It will list the items in numbered format. It is represented by <ol> tag.
Definition List: It will list the items in definition form as in a dictionary. It is represented by <dl>, <dt> and <dd> tags.

24. How to insert a copyright symbol in HTML?

You can insert a copyright using &#copy; or &##169; in HTML.

25. What are the entities in HTML?

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.

26. What is CSS?

CSS stands for Cascading Style Sheet. It is used to style and layout web pages. It can control the layout of multiple web pages all at once. It is developed by W3C (World Wide Web Consortium) organization. Current version is CSS3.

27. Is CSS case-sensitive?

No, CSS is case-insensitive. Even it is not dependent on font styles, or images on a website.

28. What does !important mean in CSS?

In CSS, !important is a special flag that can be added to a CSS rule to give it higher specificity and priority. When !important is used, it overrides any other conflicting styles, even if those styles have higher specificity or come later in the CSS file.

29. What does the: root pseudo-class refers to?

In CSS, the :root pseudo-class refers to the root element of the document, which is typically represented by the element. It is the highest-level element in the document hierarchy, and :root allows you to select and apply styles to this element.

The :root pseudo-class is useful for defining global CSS variables (custom properties) and setting default styles that will apply to the entire document.

When comparing the specificity of the :root pseudo-class and the tag selector, the tag selector has a lower specificity than the :root selector.

Here's an example of using :root to define CSS variables:

:root {
  --primary-color: #007bff;
  --font-size: 16px;
}

body {
  font-size: var(--font-size);
  color: var(--primary-color);
}

30. Mention some of the CSS frameworks

The best CSS frameworks are-

Bootstrap
Foundation
Semantic UI
Ulkit
Tailwind CSS

31. What is the syntax of CSS?

A CSS syntax consists of a selector, property, and value which is written as

selector  {
	property: value;
}

32. How can you integrate CSS on a webpage?

There are three ways to integrate CSS on a webpage.

Inline CSS – Using the style attribute directly within an HTML element.
Internal CSS - Writing CSS rules within the <style> element in the <head> section of the HTML document.
External CSS – Linking an external CSS file using the element.

33. What is the importance of specificity in CSS?

Specificity is a concept in CSS that determines which styles are applied to an element when multiple conflicting styles are present. Inline styles have the highest specificity, followed by ID selectors, class selectors, and then element selectors.

34. What is a CSS selector?

CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc. Different types of CSS selectors are

Element Selector
Id Selector
Class Selector
Group Selector
Universal Selector
Attribute Selector
Combinator Selector
Pseudo-class Selector
Pseudo-elements Selector

35. Difference between Descendant Selector & Child Selector

Descendant means anywhere nested within it in the DOM tree. Could be a direct child, could be five levels deep, it is still a descendant.

The Child selector (>) requires the element to be the next nested level down.

36. What is the "clearfix" technique in CSS?

The "clearfix" technique is used to clear floats and ensure that a container properly contains its floated child elements. It prevents collapsing margins and ensures proper layout when elements are floated.

37. What is an ID selector?

The ID selector targets a single HTML element with a specific ID attribute. It is denoted by a hash (#) followed by the ID name. Example-

#container {
  width: 960px;
}

38. What is a Class selector?

The class selector targets HTML elements with a specific class attribute. It is denoted by a dot (.) followed by the class name. Example-

.box {
padding: 10px;
 margin: 10px;
 }

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

Class is a way of using HTML elements for styling. They are not unique and have multiple elements whereas ID is unique and it can be assigned to a single element.

40. Define CSS vendor prefixes.

In CSS, a vendor prefix (also known as a browser prefix) is a string of characters added to the beginning of a CSS property or value to enable experimental or non-standard features in specific web browsers. These prefixes were introduced to allow browser vendors to implement and test new CSS features before they become fully standardized and supported by all browsers.

Vendor prefixes typically consist of the browser's name or abbreviation followed by a hyphen. Here are some common vendor prefixes:

-webkit-: Used by WebKit-based browsers like Chrome and Safari.
-moz-: Used by Mozilla-based browsers like Firefox.
-ms-: Used by Microsoft browsers like Internet Explorer and Edge.
-o-: Used by Opera browser.

/* Without prefixes (standard) */
div {
  transform: translateX(50px);
}

/* With prefixes (browser-specific implementations) */
div {
  -webkit-transform: translateX(50px); /* Chrome and Safari */
  -moz-transform: translateX(50px);    /* Firefox */
  -ms-transform: translateX(50px);     /* Internet Explorer and Edge */
  -o-transform: translateX(50px);      /* Opera */
}

41. Explain the difference between the CSS position values: relative, absolute, fixed, and sticky.

1. Relative Position (position: relative)

Positioned relative to its normal position in the document flow.
top, right, bottom, and left properties can be used to move the element from its original position.

2. Absolute Position (position: absolute)

Useful for creating overlays, tooltips, or positioning elements inside a relative container.

3. Fixed Position (position: fixed)

Positioned relative to the viewport, meaning it stays fixed at a specific position even when the user scrolls the page.
Useful for creating fixed headers, footers, or navigation bars that remain visible while scrolling.

4. Sticky Position (position: sticky)

Behaves like position: relative until it reaches a specific scroll position, after which it becomes like position: fixed.
Sticks to its container or the viewport within its defined offset and scrolling range.

42. What is the "box model" in CSS?

The box model is a fundamental concept in CSS that defines how elements are displayed in rectangular boxes. It consists of content, padding, border, and margin. The total width and height of an element are calculated by adding the content width/height, padding, border, and margin.

43. What is the difference between margin and padding?

margin: It is used to create space around elements, outside of any defined borders.
padding: It is used to create space around an element's content, inside of any defined borders.

44. What are pseudo-elements?

Pseudo-elements target specific parts of an element's content, such as the first line, first letter, or even generated content. Examples of pseudo-elements are

::before
::after
::selection
::first-letter
::first-line

45. What are pseudo-classes?

Pseudo-classes select regular elements under specific conditions such as when a user is hovering over a link. Examples of pseudo-classes are:

:hover
:active
:link
:visited
:focus

46. What is z-index in CSS?

The z-index helps to specify the stack order of positioned elements that may overlap one another. The default value of z-index is zero and can take on either a positive or negative number. An element with a higher z-index is always stacked above a lower index.

47. Difference between visibility: hidden and display: none?

visibility: hidden hides the element, but it occupies space and affects the layout of the document.

display: none also hides the element but does not occupy space. It will not affect the layout of the document.

48. How is the border-box different from the content box?

In CSS, border-box and content-box are two different values for the box-sizing property, which determines how the total width and height of an element are calculated.

content-box: This is the default value for the box-sizing property. When an element has box-sizing: content-box, the width and height of the element are calculated based on the content's size, excluding the padding and border.

border-box: When an element has box-sizing: border-box, the width and height of the element include the content's size, padding, and border. In other words, the specified width and height will include the total space taken up by the element, including the padding and border.

49. Does margin-top or margin-bottom affect inline elements?

No, margin-top or margin-bottom does not affect the inline elements.

50. How to create a responsive layout using CSS?

CSS media queries play a crucial role in responsive design, as they allow you to apply different CSS styles based on the characteristics of the user's device or screen.
Here's how you can create a responsive layout using CSS:

Viewport Meta Tag: Start by including the viewport meta tag in the <head> section of your HTML document. This tag tells the browser how to control the page's dimensions and scaling.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS Media Queries: Media queries are conditional statements in CSS that evaluate the characteristics of the user's device or screen and apply specific styles based on the result. They allow you to target specific screen widths or devices.

/* Default styles for all screen sizes */
.element {
  background-color: blue;
}

/* Media query for screens with a maximum width of 768px (mobile devices) */
@media screen and (max-width: 768px) {
  .element {
    background-color: red;
  }
}

/* Media query for screens with a minimum width of 1200px (large desktops) */
@media screen and (min-width: 1200px) {
  .element {
    background-color: green;
  }
}

Flexbox and CSS Grid: Utilize Flexbox and CSS Grid to create flexible and dynamic layouts that automatically adjust their alignment and order based on the available space.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex: 0 0 calc(33.33% - 10px);
}

Topics

HTML & CSS Bootstrap JavaScript ES8 ReactJS SQL REST API