HTML/CSS MCQs

Question 1

What is the CSS box model made up of?

Accepted Answer

Content, padding, border, and margin, arranged from innermost to outermost

Answer

Content, header, footer, and margin

Answer

Border, background, color, and font

Answer

Padding, position, display, and float

Question 2

What does the CSS property 'display: flex' enable on a container element?

Accepted Answer

It turns the container into a flex container, allowing its child elements to be laid out flexibly in a row or column

Answer

It hides all child elements from view

Answer

It converts the container into a table layout

Answer

It forces child elements to overlap each other

Question 3

What is the purpose of the HTML 'alt' attribute on an image tag?

Accepted Answer

To provide alternative text describing the image, which is used by screen readers and shown if the image fails to load

Answer

To set the alignment of the image on the page

Answer

To define the image's file size in bytes

Answer

To create a clickable link around the image

Question 4

What is the difference between 'id' and 'class' attributes in HTML?

Accepted Answer

An 'id' should be unique to a single element on a page, while a 'class' can be applied to multiple elements

Answer

A 'class' must be unique to a single element, while an 'id' can be reused freely

Answer

Both attributes behave identically in CSS selectors

Answer

An 'id' can only be used with div elements

Question 5

What does CSS specificity determine?

Accepted Answer

Which CSS rule takes precedence when multiple rules target the same element

Answer

How quickly a CSS file loads in the browser

Answer

Whether a webpage is mobile responsive

Answer

The order in which HTML elements are rendered on the page

Question 6

What is the purpose of a CSS media query?

Accepted Answer

To apply different styles depending on characteristics of the device or viewport, such as screen width

Answer

To load a webpage faster by compressing images

Answer

To validate HTML code for errors

Answer

To define custom fonts for a webpage

Question 7

What is the difference between 'position: relative' and 'position: absolute' in CSS?

Accepted Answer

'relative' positions an element relative to its normal position, while 'absolute' positions it relative to its nearest positioned ancestor

Answer

'absolute' always positions an element relative to the whole document regardless of ancestors

Answer

'relative' removes an element from the normal document flow entirely

Answer

Both values behave identically in every layout

Question 8

What is the purpose of semantic HTML tags, such as

and

?

Accepted Answer

To describe the meaning and structure of content, improving accessibility and search engine understanding of the page

Answer

To automatically apply default CSS styling to a section

Answer

To make a webpage load faster than using generic div tags

Answer

To prevent a webpage from being indexed by search engines

Question 9

What does the CSS 'z-index' property control?

Accepted Answer

The stacking order of overlapping elements along the vertical axis, determining which appears in front

Answer

The horizontal position of an element on the page

Answer

The transparency level of an element

Answer

The font weight of text inside an element

Question 10

What is the purpose of CSS Grid layout?

Accepted Answer

To create two-dimensional layouts by arranging elements into rows and columns simultaneously

Answer

To apply animations to elements

Answer

To validate that HTML markup follows correct syntax

Answer

To style only the first letter of a paragraph

Question 11

What does the HTML5 <section> tag represent?

Accepted Answer

A thematic grouping of content, typically with its own heading

Answer

A single line break in text

Answer

An area reserved exclusively for advertisements

Answer

A container that hides its content by default

Question 12

What is the purpose of the CSS 'float' property?

Accepted Answer

To position an element to the left or right, allowing text and inline elements to wrap around it

Answer

To make an element completely transparent

Answer

To center an element horizontally on the page automatically

Answer

To animate an element's position over time

Question 13

What is the difference between an inline element and a block-level element in HTML?

Accepted Answer

A block-level element starts on a new line and takes up the full available width, while an inline element only takes up as much width as its content

Answer

An inline element always starts on a new line, while a block-level element does not

Answer

Both types of elements behave identically in terms of layout

Answer

Block-level elements cannot contain any text content

Question 14

What does the CSS 'em' unit represent?

Accepted Answer

A relative unit based on the font size of the element it is applied to, or its parent

Answer

A fixed unit always equal to 16 pixels

Answer

A unit used only for measuring image dimensions

Answer

A unit representing a percentage of the viewport height

Question 15

What is the purpose of the HTML <meta name='viewport'> tag?

Accepted Answer

To control how a webpage is scaled and displayed on mobile devices

Answer

To define keywords for search engine optimization

Answer

To set the character encoding of the document

Answer

To specify the page's title shown in the browser tab

Question 16

What is the effect of setting 'box-sizing: border-box' on an element in CSS?

Accepted Answer

The element's specified width and height include its padding and border, rather than adding them on top

Answer

The element's padding and border are removed entirely

Answer

The element automatically becomes a flex container

Answer

The element's content is hidden until scrolled into view

Question 17

What is the purpose of a CSS pseudo-class, such as ':hover'?

Accepted Answer

To apply styles to an element based on a specific state or condition, such as when the mouse is hovering over it

Answer

To create an entirely new HTML element

Answer

To permanently change an element's content

Answer

To validate form input before submission

Question 18

What does the CSS 'transition' property allow you to do?

Accepted Answer

Animate changes to a CSS property smoothly over a specified duration, rather than having the change happen instantly

Answer

Permanently disable animations on an element

Answer

Rearrange the order of elements on a page

Answer

Load a webpage's CSS file faster

Question 19

What is the purpose of the <form> element in HTML?

Accepted Answer

To collect user input and submit it to a server for processing

Answer

To display a table of data

Answer

To create a navigation menu

Answer

To embed a video on the page

Question 20

What does the CSS 'overflow: hidden' property do to an element?

Accepted Answer

It clips any content that extends beyond the element's box, hiding the overflowing part from view

Answer

It makes the element's background transparent

Answer

It automatically adds a scrollbar to the element

Answer

It hides the entire element, including its visible content

HTML/CSS MCQ Questions