Preparing for a frontend or web designing interview? This guide covers latest html and css interview questions and answers to help you succeed.
Here’s a list of the frequently asked questions with answers on the technical concept which you can expect to face during an interview.
HTML stands for HyperText Markup Language. It is the standard markup language for creating web pages and web applications.
A tag is a keyword enclosed in angle brackets, like <tag>. Tags usually come in pairs, with an opening tag and a closing tag (e.g., <p> and </p>).
The <head> tag contains meta-information about the document, such as the title, links to stylesheets, and meta tags.
The <body> tag contains the content of an HTML document, such as text, images, links, and other media.
An attribute provides additional information about an element and is always included in the opening tag. Examples include href for <a> and src for <img>.
Semantic HTML uses HTML5 elements that clearly describe their meaning and purpose, such as <article>, <section>, <header>, and <footer>.
The <div> tag is a block-level container used to group other elements for styling or scripting purposes.
You insert an image using the <img> tag with the src attribute. Example:

<ul> defines an unordered list (bulleted list), while <ol> defines an ordered list (numbered list).
You create a table using the <table> tag along with <tr> for table rows, <th> for table headers, and <td> for table data cells. Example :
Simple HTML Table
Simple HTML Table
Name
Age
City
Alice
28
New York
Bob
34
Los Angeles
Charlie
25
Chicago
You create a form using the <form> tag, with nested input elements like <input>, <textarea>, <button>, etc. Example:
.
<iframe> is used to embed another HTML page within the current page, while <embed> is used to embed external content like multimedia.
<iframe>
and <embed>
tagsFeature | <iframe> | <embed> |
Purpose | Used to embed another HTML page within the current page. | Used to embed external content such as multimedia (videos, audio) within the page. |
HTML5 Support | Supported in HTML5. | Supported in HTML5. |
Attributes | Allows attributes like width, height, src, name, etc. | Allows attributes like src, type, width, height, etc. |
Content | Can contain interactive content and supports user interaction. | Embeds content directly without user interaction. |
Use Case | Ideal for embedding web pages or content that requires interaction. | Ideal for embedding media like videos, music, or Flash content. |
CSS stands for Cascading Style Sheets. It is used to style and layout web pages.
CSS can be included using an external stylesheet (<link> tag), an internal stylesheet (<style> tag), or inline styles (style attribute).
External Stylesheet Example
Hello, World!
This is an example of using an external stylesheet.
/* styles.css */
h1 {
color: blue;
}
p {
font-size: 16px;
color: green;
}
<style>
tag inside the <head>
section of an HTML document.
Internal Stylesheet Example
Hello, World!
This is an example of using an internal stylesheet.
Inline Styles Example
Hello, World!
This is an example of using inline styles.
The class attribute is used to apply CSS styles to multiple elements with the same class name.
CSS selectors are patterns used to select and style HTML elements. Examples include element selectors, class selectors, and ID selectors.
The CSS Box Model describes the rectangular boxes generated for elements, consisting of margins, borders, padding, and the content area.
You create a flexbox layout by setting the display property to flex on a container element and using various flex properties on child elements.
Flexbox Layout Example
Item 1
Item 2
Item 3
You create a responsive design by using media queries, flexible grid layouts, and relative units like percentages or em/rem.
Inline elements do not start on a new line and do not accept width and height, while inline-block elements do not start on a new line but accept width and height.
CSS Grid Layout is a two-dimensional layout system that allows you to create complex grid-based layouts using rows and columns.
The position property specifies the positioning method for an element (static, relative, absolute, fixed, or sticky).
CSS Position Property Example
Static Position
Relative Position
Absolute Position
Fixed Position
Sticky Position
Scroll down to see the sticky effect in action.
You use a selector to target the element and apply styles within curly braces. Example: p { color: red; }
A pseudo-class is a keyword added to selectors that specifies a special state of the selected elements,
You create animations using the @keyframes rule and applying the animation properties like animation-name and animation-duration to elements
You create a transition by specifying the transition property with the duration, property, and timing function. Example:
transition: all 0.3s ease-in-out;
CSS preprocessors, like Sass or LESS, allow you to write CSS in a more dynamic way using variables, nesting, and mixins. They are used to simplify and enhance CSS code management.
A CSS variable is a custom property that can be reused throughout a document, defined using the — prefix and accessed using the var() function.
The calc() function performs calculations to determine CSS property values. Example:
width: calc(100% - 20px);
The z-index property specifies the stack order of elements. Higher z-index values are displayed in front of lower values.
To make a website mobile-friendly, use responsive design techniques such as media queries, flexible grid layouts, and ensuring touch-friendly elements.
::before and ::after pseudo-elements are used to insert content before or after the element.
::before
and ::after
pseudo-elementsFeature | ::before | ::after |
Insertion Point | Content is inserted before the content of the element. | Content is inserted after the content of the element. |
Common Use Cases | Used for adding decorative content or icons before the actual content, such as icons or quotes. | Used for adding decorative content or elements after the actual content, such as badges or additional text. |
Styling Content | Content is styled before the main content is rendered, which can affect layout and spacing. | Content is styled after the main content is rendered, typically used for additional decorative elements. |
Content Generation | Content is generated before the actual content, using the `content` property. | Content is generated after the actual content, using the `content` property. |
Common CSS Properties | `content`, `position`, `display`, `margin`, `padding`, etc. | `content`, `position`, `display`, `margin`, `padding`, etc. |
Padding is the space inside the element’s border, while margin is the space outside the element’s border.
Em units are relative to the font size of the parent element, while rem units are relative to the root element’s font size.
The box-sizing property defines how the width and height of an element are calculated, either including (border-box) or excluding (content-box) padding and borders.
Centering can be achieved using various methods, such as flexbox
display: flex; justify-content: center; align-items: center;
or absolute positioning with transforms.
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);