Junior HTML & CSS Interview Questions (50 MCQs)

Question 1

What is the main benefit of semantic tags like `

Accepted Answer

Meaning for a11y & SEO + clearer code

Answer

They only make rendering faster

Answer

They fully replace CSS

Answer

They only work in XHTML

Question 2

With `box-sizing: border-box`, width includes what?

Accepted Answer

content + padding + border

Answer

Content only

Answer

content + margin

Answer

Border only

Question 3

Main difference between Flexbox and Grid?

Accepted Answer

Flex is 1D; Grid is 2D

Answer

Grid is mobile-only

Answer

Flex cannot align items

Answer

There is no difference

Question 4

What is the main purpose of `alt` on `<img>`?

Accepted Answer

Text alternative for screen readers and failed loads

Answer

A hover tooltip

Answer

Image compression

Answer

Setting image size

Question 5

Difference between `display: none` and `visibility: hidden`?

Accepted Answer

`none` removes it from layout; `hidden` keeps its space

Answer

Both keep the element's space

Answer

`hidden` removes it from the DOM

Answer

No difference

Question 6

What is `rem` relative to?

Accepted Answer

The root (`html`) font-size

Answer

The parent's font-size

Answer

The viewport width

Answer

The parent's width

Question 7

An `position: absolute` element is positioned relative to what?

Accepted Answer

The nearest ancestor with non-static position

Answer

Always the viewport

Answer

Always the direct parent

Answer

The previous sibling

Question 8

What does linking `<label for="email">` to an input give?

Accepted Answer

Clicking focuses the input and screen readers announce its name

Answer

It only changes text styling

Answer

It enables email validation

Answer

It submits the form automatically

Question 9

Why is `<meta name="viewport" content="width=device-width">` needed?

Accepted Answer

So mobile renders at device width, not a desktop width

Answer

It's only a Google SEO requirement

Answer

It speeds up the network

Answer

It enables dark mode

Question 10

What is the purpose of `<!DOCTYPE html>` at the top of a document?

Accepted Answer

It puts the browser in standards mode

Answer

It loads the main CSS file

Answer

It sets the page language

Answer

It is an HTML tag required for SEO

Question 11

What is the main difference between `block` and `inline` elements?

Accepted Answer

Block starts on a new line and takes full width; inline flows within text

Answer

Inline always starts on a new line

Answer

Block elements cannot have padding

Answer

Inline is only used for images

Question 12

What characterizes `display: inline-block`?

Accepted Answer

Sits inline with others but accepts `width` and `height`

Answer

Starts on a new line like a block

Answer

Removes the element from normal flow

Answer

Ignores margin and padding

Question 13

When should you use `

Accepted Answer

For performing an action; `<a>` is for navigation

Answer

Always, because `<a>` can't be styled

Answer

Only inside forms; `<button>` doesn't work outside forms

Answer

Whenever the link goes to another site

Question 14

What is the best practice for using headings (`

` to `

`)?

Accepted Answer

A hierarchy without skipping levels, based on content not size

Answer

Choosing them by the font size you want

Answer

Using many `<h1>`s to boost SEO

Answer

Headings are decorative and order doesn't matter

Question 15

Two stacked `

`s: the first has `margin-bottom: 20px`, the second `margin-top: 30px`. What is the gap between them?

Accepted Answer

`30px`

Answer

`50px`

Answer

`20px`

Answer

`10px`

Question 16

What does `position: relative` with `top: 10px` do?

Accepted Answer

Shifts it 10px down while its original space is kept in layout

Answer

Removes it from the normal flow

Answer

Fixes it relative to the viewport

Answer

Nothing; `top` only works with absolute

Question 17

An element with `position: fixed` is normally positioned relative to what?

Accepted Answer

The browser viewport, and it doesn't move on scroll

Answer

The nearest positioned parent

Answer

The `<body>` element, scrolling with it

Answer

Its own normal position in the flow

Question 18

Why does `z-index: 10` have no effect on a plain `

`?

Accepted Answer

It's `position: static`; z-index applies to positioned elements or flex/grid items

Answer

Because z-index must be above 100

Answer

Because z-index only works on images

Answer

Because it needs a `px` unit

Question 19

What is the difference between `ul li` and `ul > li`?

Accepted Answer

The first matches all descendants; the second only direct children

Answer

The second matches all descendants

Answer

There is no difference

Answer

`>` means higher specificity

Question 20

What does the selector `h2 + p` match?

Accepted Answer

A `

` immediately following an `

`

Answer

All `

`s after an `

`

Answer

Every `

` and every `
`

Answer

`

`s inside an `

`

Question 21

Why is heavy use of `!important` discouraged?

Accepted Answer

It breaks the natural cascade and makes overriding hard

Answer

Modern browsers don't support it

Answer

It drastically slows JavaScript

Answer

It only works in inline styles

Question 22

Which property is inherited from parent to children by default?

Accepted Answer

`color`

Answer

`border`

Answer

`margin`

Answer

`background-color`

Question 23

What is a percentage in `padding-top: 10%` calculated against?

Accepted Answer

The containing block's width

Answer

The containing block's height

Answer

The element's font size

Answer

The viewport height

Question 24

What does `50vh` equal?

Accepted Answer

50% of the viewport height

Answer

50% of the parent's height

Answer

50 times the root font size

Answer

50% of the viewport width

Question 25

In a flex container with `flex-direction: row`, which axes do `justify-content` and `align-items` control?

Accepted Answer

`justify-content` horizontal (main), `align-items` vertical (cross)

Answer

Both work on the horizontal axis

Answer

`justify-content` vertical, `align-items` horizontal

Answer

Both only affect the text inside items

Question 26

If three items in a flex container all have `flex: 1`, what happens?

Accepted Answer

They share the available space equally

Answer

Only the first item grows

Answer

They all become 1px wide

Answer

The items stack vertically

Question 27

What is the default `flex-wrap` value and its effect?

Accepted Answer

`nowrap`; all items stay on one line and may shrink or overflow

Answer

`wrap`; items automatically move to the next line

Answer

`wrap-reverse`; items stack from the bottom

Answer

It has no default and must be set

Question 28

What is the advantage of `gap` over putting margins on items?

Accepted Answer

It adds space only between items, not on the outer edges

Answer

It only works in Grid, not Flexbox

Answer

It also adds to the container's padding

Answer

It causes margins to collapse

Question 29

What layout does `grid-template-columns: 1fr 2fr` create?

Accepted Answer

Two columns where the second gets twice the free space of the first

Answer

Three equal columns

Answer

Two rows of 1px and 2px height

Answer

A 1px column and a 2px column

Question 30

In a mobile-first approach, how are media queries usually written?

Accepted Answer

Base styles for mobile, with `min-width` for larger screens

Answer

Base styles for desktop, with `max-width` for mobile

Answer

Only with `orientation: portrait`

Answer

With a separate CSS file per phone

Question 31

What does `<input type="email">` offer over `type="text"`?

Accepted Answer

Built-in browser validation and a suitable mobile keyboard

Answer

Automatically emails the user

Answer

Encrypts the input value

Answer

Removes the need for server validation

Question 32

In a `<form>`, what's the difference between `method="get"` and `method="post"`?

Accepted Answer

GET sends data in the URL query string; POST in the request body

Answer

POST sends data in the URL

Answer

GET is safer because data is encrypted

Answer

There is no difference

Question 33

What are `

` and `` used for?

Accepted Answer

Grouping related controls (like radios) with an accessible caption

Answer

Building data tables

Answer

Showing a chart color legend

Answer

Disabling the whole page

Question 34

Why is `placeholder` not a good replacement for `<label>`?

Accepted Answer

It disappears when typing and usually has low contrast

Answer

Placeholder doesn't work on mobile browsers

Answer

Placeholder prevents form submission

Answer

Placeholder only works on `<textarea>`

Question 35

Why set `lang` on `<html>` (e.g. `lang="fa"`)?

Accepted Answer

So screen readers pronounce correctly and browsers apply language rules

Answer

So text direction becomes right-to-left automatically

Answer

So a Persian font gets downloaded

Answer

It's only needed for the HTML validator

Question 36

Why should `` be early in ``?

Accepted Answer

So the browser knows the encoding before parsing content and text isn't garbled

Answer

So fonts load faster

Answer

So the page becomes responsive on mobile

Answer

So search engines index the page

Question 37

How does `overflow: auto` differ from `overflow: scroll`?

Accepted Answer

`auto` shows scrollbars only when needed; `scroll` always does

Answer

`auto` hides the extra content

Answer

`scroll` only scrolls horizontally

Answer

They are exactly the same

Question 38

How do you horizontally center a `

` with `width: 600px` in its parent?

Accepted Answer

`margin: 0 auto`

Answer

`text-align: center` on the div itself

Answer

`vertical-align: middle`

Answer

`float: center`

Question 39

Why does `opacity: 0.5` on a card also fade its text?

Accepted Answer

Opacity applies to the element and all descendants; use `rgb(... / 0.5)` for a translucent background

Answer

Because opacity is inherited and children can reset it with `opacity: 1`

Answer

Because of a browser bug

Answer

Because text always doubles the parent's opacity

Question 40

Why does `::before` not render without a `content` property?

Accepted Answer

The pseudo-element is only generated when `content` is set (even `""`)

Answer

Because `::before` only works on images

Answer

Because it needs `display: none`

Answer

Because `::before` requires JavaScript

Question 41

Which rows does `tr:nth-child(2n)` match?

Accepted Answer

Even rows (2nd, 4th, ...)

Answer

Odd rows (1st, 3rd, ...)

Answer

Only the second row

Answer

The first two rows

Question 42

What is the difference between `` and ``?

Accepted Answer

`` conveys importance; `` is stylistic offset without extra importance

Answer

`<b>` is deprecated and must not be used

Answer

`<strong>` makes the font larger

Answer

There is no difference

Question 43

To make a data table accessible, what should column headers use?

Accepted Answer

`` (with `scope` if needed) instead of bold ``

Answer

`<td>` with a `header` class

Answer

A `

` with `display: table-cell`

Answer

An `<h3>` above each column

Question 44

What does `tabindex="0"` do on an element?

Accepted Answer

Adds it to the natural Tab order following the DOM

Answer

Makes it the first element in Tab order

Answer

Removes it from Tab order

Answer

Disables it

Question 45

What is the WCAG AA minimum contrast ratio for normal text?

Accepted Answer

`4.5:1`

Answer

`2:1`

Answer

`10:1`

Answer

`1.5:1`

Question 46

What does `object-fit: cover` do on an `<img>` with fixed dimensions?

Accepted Answer

Fills the box keeping aspect ratio, cropping the overflow

Answer

Stretches the image to exactly fill the box

Answer

Shows the whole image uncropped with empty space

Answer

Puts the image behind the content

Question 47

What are `

` and `

` used for?

Accepted Answer

Grouping self-contained content (image, chart, code) with its caption

Answer

Creating an automatic slider gallery

Answer

Replacing `alt` on images

Answer

Displaying numbers in forms

Question 48

How does adding `box-shadow` to an element affect layout?

Accepted Answer

None; the shadow takes no space in layout

Answer

It grows the element's size like a border

Answer

It increases the element's margin

Answer

It pushes neighboring elements

Question 49

Why is `line-height: 1.5` (unitless) usually better than `line-height: 1.5em`?

Accepted Answer

Children inherit the factor and compute it from their own font size

Answer

Unitless values render faster

Answer

`em` isn't allowed in `line-height`

Answer

A unitless value always equals 1.5px

Question 50

What does the `hidden` attribute do on an HTML element?

Accepted Answer

Hides it and removes it from the accessibility tree (like `display: none`)

Answer

Hides it only from screen readers

Answer

Makes it transparent but still clickable

Answer

Removes it from the DOM

HTML & CSS · Junior · 50

What is the main benefit of semantic tags like `<nav>` and `<main>`?