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

Question 21

What is the purpose of the HTML 'lang' attribute on the html tag?

Accepted Answer

It specifies the primary language of the page's content, helping browsers and screen readers process it correctly

Answer

It sets the font used across the entire page

Answer

It changes the direction text flows on the page

Answer

It defines the character encoding of the document

Question 22

What is the difference between CSS 'margin' and 'padding'?

Accepted Answer

Margin creates space outside an element's border, while padding creates space inside the border, between the border and the content

Answer

Margin only applies to text, while padding only applies to images

Answer

Padding always removes space, while margin always adds space

Answer

There is no functional difference between margin and padding

Question 23

What is the purpose of the HTML 'label' element when used with a form input?

Accepted Answer

It provides a descriptive, clickable caption for a form control, improving usability and accessibility

Answer

It defines the visual style of an input field

Answer

It validates the data entered into a form

Answer

It permanently disables a form input

Question 24

What does the CSS 'flex-wrap' property control within a flex container?

Accepted Answer

Whether flex items are forced onto a single line or allowed to wrap onto multiple lines

Answer

The direction in which flex items are laid out

Answer

The spacing between flex items only

Answer

The order in which flex items appear

Question 25

What is the purpose of the HTML5 <nav> tag?

Accepted Answer

It semantically marks a section of a page intended for navigation links

Answer

It creates a numbered list of items

Answer

It defines a section reserved only for advertisements

Answer

It embeds a video player on the page

Question 26

What does the CSS 'opacity' property control?

Accepted Answer

The transparency level of an entire element, including its content, where lower values make it more see through

Answer

Only the transparency of an element's background color, not its content

Answer

The brightness of an element's text color

Answer

The blur applied to an element's edges

Question 27

What is the purpose of the CSS ':nth-child()' pseudo-class?

Accepted Answer

It selects one or more elements based on their numeric position among sibling elements

Answer

It selects elements based only on their class name

Answer

It selects the very last element on the entire page

Answer

It selects elements that contain a specific attribute

Question 28

What is the difference between the HTML

tags?

Accepted Answer

creates an unordered list with bullet points

Answer

is used only for text

Answer

<ul> automatically numbers its items while <ol> does not

Answer

There is no visual or semantic difference between them

Question 29

What is the purpose of the CSS 'min-width' and 'max-width' properties?

Accepted Answer

They set lower and upper limits on how wide an element can become, regardless of other sizing rules

Answer

They set a fixed width that can never change under any circumstance

Answer

They control only the height of an element, not its width

Answer

They are used exclusively for images, never for text containers

Question 30

What does the HTML 'required' attribute do when added to a form input?

Accepted Answer

It prevents the form from being submitted until that field has a value

Answer

It automatically fills in a default value for the field

Answer

It hides the field from view until a button is clicked

Answer

It converts the field into a read only field

Question 31

What is the purpose of CSS custom properties, also known as CSS variables?

Accepted Answer

They let you define reusable values, such as colors or sizes, that can be referenced throughout a stylesheet

Answer

They allow JavaScript code to be embedded directly inside CSS files

Answer

They are used only to store text content for a page

Answer

They automatically generate a color palette for a website

Question 32

What is the difference between 'position: fixed' and 'position: sticky' in CSS?

Accepted Answer

'fixed' keeps an element in the same place relative to the browser window at all times, while 'sticky' toggles between relative and fixed behavior based on scroll position

Answer

'sticky' always stays in the exact center of the screen

Answer

'fixed' only works inside table elements

Answer

There is no meaningful difference between the two

Question 33

What is the purpose of the HTML

and

elements?

Accepted Answer

They group an image or illustration together with a caption that describes it semantically

Answer

They are used only to create tables

Answer

They create a popup window on the page

Answer

They define a navigation menu

Question 34

What does the CSS 'vw' unit represent?

Accepted Answer

One percent of the viewport's width

Answer

One percent of the viewport's height

Answer

A fixed pixel measurement that never changes

Answer

One percent of the parent element's font size

Question 35

What is the purpose of CSS Flexbox's 'justify-content' property?

Accepted Answer

It controls how flex items are distributed along the main axis of a flex container

Answer

It controls the spacing between individual letters in text

Answer

It controls the vertical alignment of text only

Answer

It sets the color of flex items

Question 36

What is the purpose of the HTML <iframe> element?

Accepted Answer

It embeds another HTML document within the current page

Answer

It creates a styled button

Answer

It defines a section of code comments

Answer

It links to an external stylesheet

Question 37

What does the CSS 'visibility: hidden' property do differently compared to 'display: none'?

Accepted Answer

'visibility: hidden' hides an element but still reserves its space in the layout, while 'display: none' removes it from the layout entirely

Answer

Both properties behave in exactly the same way

Answer

'display: none' keeps the element's space reserved while 'visibility: hidden' removes it completely

Answer

'visibility: hidden' permanently deletes the element from the page

Question 38

What is the purpose of the CSS 'aspect-ratio' property?

Accepted Answer

It sets a preferred width to height ratio for an element, helping it maintain proportions as its size changes

Answer

It sets a fixed rotation angle for an element

Answer

It controls the number of columns in a grid layout

Answer

It sets the exact pixel dimensions of an element

Question 39

What is the purpose of the HTML <script> tag's 'defer' attribute?

Accepted Answer

It tells the browser to download the script in the background but wait to execute it until the HTML has finished parsing

Answer

It prevents the script from ever running

Answer

It forces the script to run before the page even starts loading

Answer

It converts the script into a stylesheet

Question 40

What does the CSS 'text-overflow: ellipsis' property do when combined with 'overflow: hidden' and 'white-space: nowrap'?

Accepted Answer

It displays truncated text with three dots at the end when it does not fit within its container

Answer

It automatically wraps overflowing text onto a new line

Answer

It hides all text in the element completely

Answer

It increases the font size to fit the container

Question 41

What is the purpose of the HTML <button> element's 'type' attribute?

Accepted Answer

It specifies the button's behavior, such as submitting a form, resetting a form, or doing nothing by default

Answer

It sets the color of the button

Answer

It controls the size of the button in pixels

Answer

It determines which font the button text uses

Question 42

What is the purpose of CSS Grid's 'grid-template-columns' property?

Accepted Answer

It defines the number and size of columns in a grid container

Answer

It defines the number of rows in a grid container

Answer

It sets the spacing between grid items only

Answer

It defines the color of the grid lines

Question 43

What is the purpose of the HTML <noscript> tag?

Accepted Answer

It defines content to display if a browser does not support or has disabled JavaScript

Answer

It defines a section of code that always runs regardless of browser settings

Answer

It permanently disables all scripts on the page

Answer

It links to an external JavaScript file

Question 44

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

Accepted Answer

It changes the appearance of the mouse pointer when hovering over an element

Answer

It changes the color of text when clicked

Answer

It controls the speed at which a page scrolls

Answer

It hides the mouse pointer entirely on the page

Question 45

What is the difference between an HTML attribute and a CSS property?

Accepted Answer

An HTML attribute provides additional information directly on an element in the markup, while a CSS property defines how that element should be styled visually

Answer

They both refer to exactly the same concept

Answer

CSS properties can only be set inside HTML tags, never in a separate stylesheet

Answer

HTML attributes are used only for styling, never for behavior or metadata

Question 46

Which CSS property is used to control the alignment of flex items along the main axis?

Accepted Answer

justify-content

Answer

align-items

Answer

align-content

Answer

flex-direction

HTML/CSS MCQ Questions