380 reads

6 Common HTML and CSS Interview Question and Answers

by MuriloRoqueSeptember 6th, 2020

Too Long; Didn't Read

There are four categories: Inline styles (1000), IDs (100), classes (10), and elements (1) The bigger the number, the higher the specificity, and it adds up. Progressive rendering is the act of slowly rendering the data in a webpage, in order to increase the user experience if their internet connection or device is too slow. If you don’t like reading, you can still watch myself answering the same questions in this YouTube playlist I prepared. If the webpage breaks, if the user has disabled Javascript, the styled content can still be seen.

Companies Mentioned

Coin Mentioned

featured image - 6 Common HTML and CSS Interview Question and Answers

In this article, I will present some of the most frequent questions and answers made by interviewers. There will be questions about HTML & CSS. If you like reading, go ahead. If you don’t, you can still watch myself answering the same questions in this YouTube playlist I prepared.

1. What is CSS selector specificity and how does it work?

When you are working with CSS selectors, there are many different ways you can select a certain element or group of elements, but there are four categories: Inline styles (1000), IDs (100), classes (10), and elements (1).

Did you notice the numbers? This is something few programmers know, but they represent the specificity of each category. The bigger the number, the higher the specificity, and it adds up! For example, if you use

#home h1

, the specificity would be

100 + 1 = 101

, which would be more than only

#home

2. What is accessibility? How do you make your web application the most accessible?

On a webpage, high accessibility means that all of your users will have the same experience, regardless if they are using different devices or have a vision impairment, for example.

There are multiple implementation details you should make in order to make your webpage the most accessible, let me give you some examples:

Use semantic HTML.
The content should be navigable by keyboard (mouseless users).
Provide text alternatives for the media content (images and videos).
Use accessible colors (you can check color contrast here).
Use accessible fonts (they must be readable).

3. What is progressive rendering?

Progressive rendering is the act of slowly rendering the data in a webpage, in order to increase the user experience if their internet connection or device is too slow. I can give you three examples of what can happen when a webpage is doing a progressive rendering:

An image starts loading, but instead of loading small high-quality bits at a time, it chooses to load the entire low-quality image and progressively improve its quality. This improves the users’ experience, as they can visualize the entire image faster.

A webpage contains multiple images, but the user can’t see some of them, because they need to scroll down. That image is not loaded yet, reducing the amount of data spent by the user. When the image reaches the user’s viewport, it can finally be loaded.

A webpage contains HTML, CSS, and Javascript content. When the page starts loading, it first loads the HTML content, which can be clearly read by the users in case their connection fails. Then, the CSS is loaded if everything is working properly and, finally, the Javascript.

4. What is progressive enhancement?

In the last example of the last answer, I mentioned that a webpage uses progressive rendering to load first the HTML, then the CSS, and finally the Javascript. This is the definition of progressive enhancement.

First, the programmer plans the project’s foundation and structure (HTML). If it is working properly on a webpage (the user can see the content properly), then an enhancement is made, the programmer adds CSS. After adding CSS, the programmer can add more complex features to the webpage by adding Javascript. If the webpage breaks, if the user has disabled Javascript, for example, the styled content can still be seen.

5. Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.

The box model represents the way elements behave on the webpage and interact with each other, regarding some of their properties, like width, height, margin, padding, and border. There are also different display types for each element, like block, inline-block, flex, grid, etc that will change their positioning on the page.

In terms of sizing, the elements’ standard behavior is given by the following equation:

total = width + padding + margin + border

If you don’t want to have issues with your layout when determining the real width of it, you can use

box-sizing: border-box

, this way the total width of your element will be the one you specify, regardless of the amount of border, margin, and padding.

In terms of positioning, the elements’ standard behavior depends on the type of it. For example, a

div

element has

display: block

if not specified in the code, and an

element has a standard

display: inline-block

. If you want to change these elements’ behavior, you need to specify it.

6. What are the various clearing techniques and which is appropriate for what context?

Let’s first understand what are floated elements. When you

float

elements, they will affect other elements’ positioning that is in the same container. For example, you have two images and some text between them, then you give the first image

float: left

, and the second one

float: right

. The text would flow around the images.

The

clear

property determines whether floated elements can’t exist besides the cleared element, it can clear left, right, or both sides. In the image above, we might not want the text to the right of the left image, or to the left of the right image. We have some techniques that could be used to fix this:

Empty
```
div
```
with
```
clear: both
```
: This technique is not the most semantic, but it solves our problem. What you need to do is to create a
```
div
```
element after the floated element, then give it
```
clear: both
```
, ensuring that it takes all of the remaining space beside the floated element, making all of the following elements position themselves below it.

Overflowing a parent element: You can use the
```
overflow: auto
```
property on a parent element containing your floats, this will make all of the next elements position themselves below it. This is also not the most semantic strategy, especially if you create the parent element only for that purpose.

The
```
.clearfix
```
method: This is the best method to solve this problem since you don’t need to create any non-semantic elements, and you will stick to CSS by using a pseudo-selector. Apply the following properties to your floats and you will see the magic:

.clearfix:after {
   content: '';
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

I hope you could learn something by reading this article. These are only some of the HTML & CSS questions out there, you can check this link for more examples.

This article is the 1st of a series of articles I will be writing. The next article will feature Ruby interview Q&As, I will update the links in this article when I finish the next ones.

If you liked this article, make sure to: