HTML & CSS MCQs with Answers
Question 1
You are designing a website layout using CSS. You want to ensure that the container of a section takes up 50% of the screen width, regardless of the user's screen size. Which of the following is the correct CSS property to achieve this?
A) width: 50px;
B) width: 50%;
C) max-width: 50%;
D) min-width: 50%;
Answer: B) width: 50%;
Explanation:
Setting the width: 50%; makes the container width responsive, adjusting to 50% of the parent container’s width. Option A (50px) sets a fixed width, while options C and D control the maximum and minimum width, but won't guarantee exactly 50% width.
Question 2
Which HTML element is used to create a hyperlink?
A) <link>
B) <a>
C) <href>
D) <button>
Answer: B) <a>
Explanation:
The <a> tag is used to create hyperlinks in HTML, while the <link> tag is for linking external resources like stylesheets. <href> is an attribute within the <a> tag, and <button> creates a clickable button.
Question 3
What CSS property is used to change the text color of an element?
A) font-size
B) background-color
C) color
D) text-color
Answer: C) color
Explanation:
The color property in CSS is used to change the text color. The background-color changes the background of an element, and font-size changes the size of the text. There is no text-color property in CSS.
Question 4
You want to create a form in HTML. Which of the following tags is used to group together form controls such as inputs and labels?
A) <div>
B) <form>
C) <fieldset>
D) <section>
Answer: C) <fieldset>
Explanation:
The <fieldset> tag is used to group form controls together, typically within a <form>. The <form> tag wraps the entire form, while <div> and <section> are general-purpose containers not specific to forms.
Question 5
In CSS, how would you center a block-level element horizontally within its parent container?
A) margin: auto;
B) text-align: center;
C) position: center;
D) align: middle;
Answer: A) margin: auto;
Explanation:
Using margin: auto; for block-level elements ensures the element is centered horizontally within its parent. Option B (text-align: center) centers inline elements, not block-level ones.
Question 6
Which of the following CSS properties will remove the default bullet points from an unordered list?
A) list-style: none;
B) display: block;
C) text-decoration: none;
D) remove-bullets: true;
Answer: A) list-style: none;
Explanation:list-style: none; removes the default bullets from an unordered list. The other options either do not exist or serve different purposes (e.g., text-decoration: none removes text underlines).
Question 7
Which HTML tag is used for the largest heading?
A) <heading>
B) <h1>
C) <h6>
D) <head>
Answer: B) <h1>
Explanation:
The <h1> tag defines the most important (largest) heading, while <h6> is the smallest. The <head> tag contains meta-information for the document, and <heading> is not a valid HTML tag.
Question 8
How do you add a comment in CSS?
A) // This is a comment
B) <!-- This is a comment -->
C) /* This is a comment */
D) # This is a comment
Answer: C) /* This is a comment */
Explanation:
In CSS, comments are added using the /* ... */ syntax. Option B is for HTML, and options A and D are comment formats for other languages like JavaScript or Python.
Question 9
Which HTML attribute is used to define inline styles directly on an element?
A) class
B) id
C) style
D) css
Answer: C) style
Explanation:
The style attribute is used to define inline CSS directly on an HTML element. The class and id attributes are used for applying external or internal styles via CSS selectors.
Question 10
What is the correct syntax for including an external CSS file in an HTML document?
A) <link rel="stylesheet" href="style.css">
B) <css href="style.css">
C) <style src="style.css">
D) <stylesheet link="style.css">
Answer: A) <link rel="stylesheet" href="style.css">
Explanation:
The correct syntax for linking an external CSS file is <link rel="stylesheet" href="style.css">, placed inside the <head> tag of the HTML document.
Question 11
Which of the following is the correct HTML5 doctype declaration?
A) <!DOCTYPE html>
B) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
C) <!DOCTYPE h5>
D) <DOCTYPE html>
Answer: A) <!DOCTYPE html>
Explanation:
HTML5 uses a simplified doctype declaration: <!DOCTYPE html>. Older versions of HTML had more complex declarations like option B.
Question 12
What is the default value of the position property in CSS?
A) relative
B) absolute
C) fixed
D) static
Answer: D) static
Explanation:
By default, all elements have position: static, meaning they follow the normal document flow.
Question 13
Which CSS property is used to control the space between lines of text?
A) line-height
B) text-indent
C) font-spacing
D) letter-spacing
Answer: A) line-height
Explanation:line-height controls the space between lines of text, while letter-spacing adjusts the space between characters, and text-indent changes the indentation of the first line.
Question 14
In HTML, which attribute is used to specify that an input field must be filled out before submitting the form?
A) placeholder
B) required
C) value
D) validate
Answer: B) required
Explanation:
The required attribute ensures the user cannot submit the form without filling out the field.
Question 15
Which CSS property specifies whether an element should be visible or hidden?
A) visibility
B) display
C) opacity
D) hide
Answer: A) visibility
Explanation:
The visibility property can toggle between visible and hidden, while display: none removes the element from the document flow.
Question 16
What HTML attribute is used to define inline JavaScript?
A) onclick
B) onload
C) script
D) href
Answer: A) onclick
Explanation:onclick is an event attribute used to trigger JavaScript code when an element is clicked. onload is for page load events, and href is for hyperlinks.
Question 17
In CSS, what does the z-index property control?
A) The transparency of an element
B) The horizontal position of an element
C) The stacking order of elements
D) The width of an element
Answer: C) The stacking order of elements
Explanation:
The z-index property controls the vertical stacking order of elements, with higher values appearing on top of lower values.
Question 18
Which of the following is NOT a valid HTML tag?
A) <em>
B) <strong>
C) <break>
D) <br>
Answer: C) <break>
Explanation:<break> is not a valid tag. The correct tag for line breaks is <br>.
Question 19
What is the default display value of an HTML <div> element?
A) inline
B) block
C) inline-block
D) flex
Answer: B) block
Explanation:
By default, <div> elements are block-level elements, meaning they take up the full width available.
Question 20
Which property is used to specify the background color of an element in CSS?
A) color
B) background-color
C) bg-color
D) fill
Answer: B) background-color
Explanation:
The background-color property specifies the background color of an element, while color controls the text color.
Question 21
How can you include a comment in HTML?
A) <!-- This is a comment -->
B) // This is a comment
C) /* This is a comment */
D) # This is a comment
Answer: A) <!-- This is a comment -->
Explanation:
HTML comments are enclosed in <!-- ... -->. Other options are syntax for comments in different programming languages.
Question 22
Which CSS property is used to create space between the content of an element and its border?
A) padding
B) margin
C) border-spacing
D) spacing
Answer: A) padding
Explanation:padding controls the space between an element’s content and its border. margin controls the space outside the border.
Question 23
What is the result of the following CSS: p { color: blue; }?
A) It sets the background color of all paragraphs to blue.
B) It sets the font color of all paragraphs to blue.
C) It sets the border color of all paragraphs to blue.
D) It changes the link color in paragraphs to blue.
Answer: B) It sets the font color of all paragraphs to blue.
Explanation:
The color property in CSS affects the text color, not the background or border.
Question 24
Which HTML element is used to define a division or a section in an HTML document?
A) <section>
B) <div>
C) <article>
D) <span>
Answer: B) <div>
Explanation:
The <div> tag is a generic container used to group other elements for styling or layout purposes.
Question 25
In CSS, what does opacity: 0.5; do to an element?
A) It makes the element completely transparent.
B) It makes the element 50% opaque.
C) It makes the element 50% wider.
D) It removes the element from the document flow.
Answer: B) It makes the element 50% opaque.
Explanation:
The opacity property controls the transparency level of an element, with 1 being fully opaque and 0 being fully transparent.
Question 26
Which HTML tag is used to embed an image in a web page?
A) <img>
B) <image>
C) <picture>
D) <src>
Answer: A) <img>
Explanation:
The <img> tag is used to embed images in HTML documents. It requires a src attribute to specify the image file.
Question 27
In CSS, what does float: left; do to an element?
A) It centers the element horizontally.
B) It moves the element to the left of its container and allows text to wrap around it.
C) It hides the element.
D) It aligns the element to the top left corner of the page.
Answer: B) It moves the element to the left of its container and allows text to wrap around it.
Explanation:
The float property allows elements to be positioned to the left (or right), with other content flowing around them.
Question 28
Which of the following units is relative to the size of the root element in CSS?
A) em
B) px
C) rem
D) %
Answer: C) rem
Explanation:
The rem unit is relative to the root element’s font size, while em is relative to the parent element’s font size.
Question 29
Which CSS rule will select all elements with the class "header"?
A) #header {}
B) .header {}
C) header {}
D) *header {}
Answer: B) .header {}
Explanation:
The dot . selector is used to target class attributes in CSS. Option A targets an id, and option C targets an HTML tag.
Question 30
Which HTML attribute is used to define the path of an image file in the <img> tag?
A) href
B) src
C) alt
D) link
Answer: B) src
Explanation:
The src attribute in the <img> tag defines the path to the image file.
Question 31
Which of the following CSS properties will make an element invisible but still take up space on the page?
A) display: none;
B) visibility: hidden;
C) opacity: 0;
D) float: none;
Answer: B) visibility: hidden;
Explanation:visibility: hidden hides the element but still takes up space, unlike display: none, which removes it from the document flow.
Question 32
How do you create an ordered list in HTML?
A) <ul>
B) <ol>
C) <li>
D) <list>
Answer: B) <ol>
Explanation:
An ordered list is created using the <ol> tag, while <ul> is for unordered lists.
Question 33
Which of the following values of the position property will position an element relative to its nearest positioned ancestor?
A) absolute
B) relative
C) fixed
D) static
Answer: A) absolute
Explanation:position: absolute; positions the element relative to its nearest positioned ancestor. If none is present, it will be positioned relative to the initial containing block.
Question 34
What is the correct syntax for creating a table in HTML?
A) <table><tr><td>Data</td></tr></table>
B) <table><row><data>Data</data></row></table>
C) <table><tr><th>Data</th></tr></table>
D) <table><tr><td><td>Data</td></tr></table>
Answer: A) <table><tr><td>Data</td></tr></table>
Explanation:
The correct syntax for creating a table involves using the <table>, <tr>, and <td> tags for the table, row, and data cells respectively.
Question 35
Which of the following properties is used to specify the thickness of a border?
A) border-width
B) border-height
C) border-thickness
D) border-style
Answer: A) border-width
Explanation:border-width defines the thickness of the border. The border-style property sets the type of border, such as solid or dashed.
Question 36
Which HTML element is used to define metadata about an HTML document?
A) <meta>
B) <head>
C) <header>
D) <info>
Answer: A) <meta>
Explanation:
The <meta> tag is used for metadata, such as specifying character set, viewport settings, or SEO-related information.
Question 37
In CSS, how would you select all <p> elements inside a <div>?
A) p div {}
B) div p {}
C) .div p {}
D) div + p {}
Answer: B) div p {}
Explanation:div p {} targets all <p> elements inside <div> elements. The other options are incorrect or specify different relationships between elements.
Question 38
Which of the following CSS properties is used to control the order of flexible items in a flex container?
A) flex-direction
B) order
C) align-items
D) flex-grow
Answer: B) order
Explanation:
The order property specifies the order of flexible items in a flex container. By default, all items have a value of 0.
Question 39
Which of the following is a valid HTML5 semantic element?
A) <span>
B) <article>
C) <div>
D) <section>
Answer: B) <article>
Explanation:<article> is a semantic element that defines independent, self-contained content. <span> and <div> are not semantic elements, while <section> is also semantic, but article is more specific.
Question 40
Which property in CSS is used to define the space between a border and the surrounding elements?
A) padding
B) border-spacing
C) margin
D) border-width
Answer: C) margin
Explanation:
The margin property defines the space outside the border, separating an element from surrounding elements.
Question 41
Which HTML tag is used to play a video file in a webpage?
A) <media>
B) <video>
C) <embed>
D) <movie>
Answer: B) <video>
Explanation:
The <video> tag is used to embed video content in an HTML page.
Question 42
In CSS, what is the purpose of the calc() function?
A) To apply dynamic styling based on user input.
B) To calculate mathematical expressions for property values.
C) To animate elements based on time values.
D) To control the order of execution in the browser.
Answer: B) To calculate mathematical expressions for property values.
Explanation:
The calc() function allows you to perform calculations within CSS properties, such as dynamically determining widths or margins.
Question 43
What is the correct way to reference an external JavaScript file in an HTML document?
A) <script src="script.js"></script>
B) <js href="script.js"></js>
C) <script link="script.js"></script>
D) <link rel="javascript" href="script.js">
Answer: A) <script src="script.js"></script>
Explanation:
The correct way to include an external JavaScript file is using the <script> tag with the src attribute.
Question 44
What does the CSS box-shadow property do?
A) Adds a shadow inside the border of an element.
B) Adds a shadow outside the border of an element.
C) Increases the width of the border.
D) Controls the visibility of the element.
Answer: B) Adds a shadow outside the border of an element.
Explanation:
The box-shadow property adds a shadow outside the border of an element, giving it a 3D effect.
Question 45
Which tag is used in HTML5 to define a footer for a document or section?
A) <footer>
B) <bottom>
C) <section>
D) <end>
Answer: A) <footer>
Explanation:
The <footer> tag defines the footer section of a document or section in HTML5.
Question 46
What CSS property allows an element to expand in proportion to its sibling elements in a flex container?
A) flex-grow
B) flex-wrap
C) align-content
D) justify-content
Answer: A) flex-grow
Explanation:
The flex-grow property determines how much an element should grow relative to its siblings inside a flex container.
Question 47
Which attribute is used in the <a> tag to specify the destination URL of a link?
A) target
B) href
C) rel
D) src
Answer: B) href
Explanation:
The href attribute defines the URL or resource that the hyperlink will point to.
Question 48
Which HTML element is used to display a clickable button?
A) <input>
B) <button>
C) <a>
D) <div>
Answer: B) <button>
Explanation:
The <button> tag is used to create clickable buttons. <input> with type="button" can also be used, but <button> is the more flexible and recommended option.
Question 49
Which of the following properties is used to create rounded corners in CSS?
A) border-radius
B) border-corner
C) corner-radius
D) border-style
Answer: A) border-radius
Explanation:
The border-radius property in CSS is used to create rounded corners for elements.
Question 50
In HTML5, which tag is used to represent the navigation links of a website?
A) <nav>
B) <header>
C) <aside>
D) <menu>
Answer: A) <nav>
Explanation:
The <nav> tag is used to define a section of a page that contains navigation links, such as a website’s main menu.
