Let's Code

Posted on May 11, 2021 • Edited on Nov 4, 2021

CSS and HTML Interview Questions and Answers [2022]

#html #css #tutorial #career

My last post 📮 on JavaScript Interview Questions and Answers (Junior and Senior) got good feedback from dev.to community so I decided to complete the entire package.

I have been interviewed and also interviewed engineers numerous 💯 times. Below are the most commonly asked HTML and CSS questions and answers that I have shortlisted that often come up that may be asked on your next front-end interview.

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

CSS Interview Questions

What is CSS Box model?

The box model is a box that wraps around every HTML element.
The box contains content, padding, border, and margin.

Content of the box is where text and images appear
Padding is the area around the content. The padding is transparent
Border is the border that goes around the padding and content
Margin is the area outside the border. The margin is transparent

What is a CSS sprite?

CSS sprites combine multiple images into one single larger image. This would only require one server request resulting in a faster loading time. Without CSS sprites, each image will send out individual server requests.

What is a CSS preprocessor?

A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from and each one will add some features that don’t exist in pure CSS such as variables, mixin, nesting selector, and many more. These features make the CSS structure more readable and easier to maintain.

Explain the concept of specificity in CSS.

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element that will be applied. Specificity applies a weight to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.

What is !important?

Important is used to provide more weight (importance) than normal property.
It is used for overriding other styles that are declared elsewhere in order to achieve a certain design.
We can think of important as the main priority so it needs to be applied and ignore other rules.

Explain the 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 not occupy space. It will not affect the layout of the document.

What are the different ways to position a certain element in CSS?

Position can be static, relative, absolute, fixed, and sticky

Static  is the default position value. The element will flow into the page as it normally would. The top, right, bottom, left and z-index properties do not work with static positioning.
Relative element is adjusted relative to itself, without changing the layout
Absolute element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block.
Fixed element is also removed from the flow of the page. It is positioned relative to the viewport and doesn’t move when scrolled.
Sticky element is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

What does box-sizing: border-box do?

This tells the browser to account for any border and padding with the element's width and height. This makes dealing with the sizes of elements much easier. It will also eliminate a number of pitfalls you can stumble while laying out your content.

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

Block elements always start on a new line. They will also take space of an entire row.

Inline elements don't start on a new line, These elements appear on the same line with the content and tags beside them.

Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.

What is pseudo-element?

A pseudo-element allows you to manipulate parts of an element in a special way. You can use only one pseudo-element in a selector but It must appear after the simple selectors in the statement.

   p::first-letter {
     color: #ff0000;
   }

What is pseudo-class?

A pseudo-class is a selector that selects elements that are in a specific state. Like regular classes, you can chain together as many pseudo-classes as you want in a selector.

   a:hover {   
     color: red;      
   }

What is the difference between Flexbox and Grid?

flexbox is a one-dimensional layout to create either a row or a column layout while grid Is a two-dimensional layout that can handle both row and column layout.

Both approaches make it easy to design and build a layout on web pages without writing a lot of CSS.

A general rule to follow is to use flexbox if you need to define a layout as a row or a column.

Use a grid If you want to define a grid and place the content into it.

You can also mix these two together.

Don't like reading and prefer a video? No problem, got you covered -

HTML Interview Questions

What are HTML Entities?

HTML entities are a piece of text ("string") that begins with an ampersand ( & ) and ends with a semicolon ( ; ) . They are frequently used to display reserved (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces).

What are semantic elements in HTML?

Semantic elements are HTML elements that represent its meaning to the browser and developer about its contents. Elements like , , and

are semantic elements.

What are meta tags?

Meta tags are HTML tags that can be included in webpages that describe what the web page is about. These tags are not displayed on the page itself but are read by search engines like google.com and web crawlers.

What are two types of Web Storage in HTML5?

Session Storage stores data of the current session. Data stored in session storage is cleared automatically when the browser is closed.
Local Storage data is not deleted automatically when the current browser window is closed.

What are web workers?

A web worker is a JavaScript code that runs on a separate thread. It is used to compute long and heavy tasks as it doesn’t affect the performance of the page.

What is HTML?

HTML or HyperText Markup Language is the standard markup language for creating web pages. It is used to structure a web page and its content.

What are HTML attributes?

HTML attributes are additional information on html tags that change the way the html element behaves or is displayed. Attributes are specified directly after the opening name of the tag, inside the two angled brackets.

What are data-attributes good for?

Data attribute lets you assign custom data to an element to store more information or data when no suitable HTML5 element or attribute exists.

What is the difference between ‘id’ and the ‘class’ attribute?

ID is only used to identify one single element. Class can be used to identify more than one HTML element.

What is the purpose of the alt attribute on images?

The alt attribute provides alternative information in case the user cannot view the image. This attribute can be also used for accessibility.

What are the differences between inline and block-level elements?

Inline elements just take up the space that is absolutely necessary for the content and does not start from a new line. Block elements start on a new line and consume the full width of the page available.

How can we create a hyperlink in HTML?

An anchor tag or tag is used to create hyperlinks. This creates a path between two different HTML web pages.

Name the three list types in HTML

Ordered list displays elements in a numbered format where order of items matter
Unordered list displays elements in a bulleted format where order of items does not matter
Definition list displays elements in definition form like in a dictionary. It contains key-value pairs.

Don't like reading and prefer a video? No problem, got you covered -

Besides the list of HTML and CSS questions I have, are there any more questions you asked or you have been asked that you may want to add? Please add it to the discussion below.

Thank you and happy coding!

If you want to support me - Buy Me A Coffee