MCQs Of Class 22
Introduction to HTML and CSS Integration
MCQ 1:Which of the following is the correct way to add a CSS
rule to an HTML element?
A) <style>p { color:
red; }</style>
B) <css>p { color:
red; }</css>
C) <link
href="styles.css">
D) <script>p {
color: red; }</script>
A)
<style>p { color:
red; }</style>B)
<css>p { color:
red; }</css>C)
<link
href="styles.css">D)
<script>p {
color: red; }</script>Answer: A
Explanation: The
correct way to add a CSS rule to an HTML element is by using the <style> tag in
the <head> section.
MCQ 2:What is
the purpose of the id attribute
in HTML?
A) To select elements in CSS
B) To identify a unique element on the page
C) To add a background color
D) To create inline elements
id attribute
in HTML?A) To select elements in CSS
B) To identify a unique element on the page
C) To add a background color
D) To create inline elements
Answer: B
Explanation: The id attribute is used
to uniquely identify an element on a page. It allows for unique styling and
JavaScript targeting.
MCQ 3:Which
CSS selector is used to select an HTML element with a specific class?
A) #classname
B) .classname
C) classname
D) *classname
A)
#classnameB)
.classnameC)
classnameD)
*classnameAnswer: B
Explanation: The . (dot) is used to select
elements with a specific class in CSS.
MCQ 4:Which of
the following is NOT a valid CSS color property value?
A) #FF5733
B) rgb(255, 0, 0)
C) blue
D) border-color
A)
#FF5733B)
rgb(255, 0, 0)C)
blueD)
border-colorAnswer: D
Explanation: border-color is a
property, not a color value. #FF5733, rgb(255, 0, 0), and blue are valid CSS
color values.
MCQ 5:What is
the default value of the position property
in CSS?
A) relative
B) absolute
C) static
D) fixed
position property
in CSS?A)
relativeB)
absoluteC)
staticD)
fixedAnswer: C
Explanation: The
default value of the position property
is static,
meaning elements are positioned based on the normal document flow.
MCQ 6:Which of
the following properties is used to change the font size in CSS?
A) font-size
B) font-style
C) text-align
D) font-weight
A)
font-sizeB)
font-styleC)
text-alignD)
font-weightAnswer: A
Explanation: The font-size property is
used to change the font size of text in CSS.
MCQ 7:Which
method of CSS integration applies styles directly to individual HTML elements?
A) External CSS
B) Internal CSS
C) Inline CSS
D) Both A and B
A) External CSS
B) Internal CSS
C) Inline CSS
D) Both A and B
Answer: C
Explanation: Inline
CSS is used to apply styles directly to individual HTML elements using the style attribute.
MCQ 8:Which of
the following is the correct way to link an external CSS file to an HTML
document?
A) <link
rel="stylesheet" href="styles.css">
B) <style
src="styles.css">
C) <css
href="styles.css">
D) <link
src="styles.css">
A)
<link
rel="stylesheet" href="styles.css">B)
<style
src="styles.css">C)
<css
href="styles.css">D)
<link
src="styles.css">Answer: A
Explanation: The <link> tag is
used to link external CSS files, and the rel="stylesheet" specifies
the relationship.
MCQ 9:Which
CSS property is used to change the background color of an element?
A) color
B) background-color
C) background-image
D) color-background
A)
colorB)
background-colorC)
background-imageD)
color-backgroundAnswer: B
Explanation: The background-color property
is used to set the background color of an element.
MCQ 10:Which
tag is used to define an internal CSS style in an HTML document?
A) <style>
B) <script>
C) <css>
D) <head>
A)
<style>B)
<script>C)
<css>D)
<head>Answer: A
Explanation: The <style> tag is
used to define internal CSS within an HTML document, typically placed inside
the <head> section.
MCQ 11:What is
the correct syntax for changing the font color of a paragraph to blue using
CSS?
A) p { color: blue; }
B) color: p blue;
C) p: color blue;
D) p { text-color: blue; }
A)
p { color: blue; }B)
color: p blue;C)
p: color blue;D)
p { text-color: blue; }Answer: A
Explanation: The
correct syntax for changing the font color of a paragraph is p { color: blue; }.
MCQ 12:Which of
the following selectors targets an HTML element with a specific id in CSS?
A) .idname
B) #idname
C) idname
D) *idname
id in CSS?A)
.idnameB)
#idnameC)
idnameD)
*idnameAnswer: B
Explanation: The # (hash) symbol is
used to target an element with a specific id in
CSS.
MCQ 13:Which
property is used to change the spacing between lines of text in CSS?
A) letter-spacing
B) line-height
C) word-spacing
D) text-spacing
A)
letter-spacingB)
line-heightC)
word-spacingD)
text-spacingAnswer: B
Explanation: The line-height property
is used to adjust the space between lines of text.
MCQ 14:How can
you select all paragraphs in an HTML document using CSS?
A) p {}
B) .p {}
C) #p {}
D) *p {}
A)
p {}B)
.p {}C)
#p {}D)
*p {}Answer: A
Explanation: The p {} selector targets
all <p> elements
in the HTML document.
MCQ 15:What
does the display: none property
do in CSS?
A) Hides the element but keeps it in the document flow
B) Removes the element from the document flow entirely
C) Makes the element invisible but still takes up space
D) Makes the element's text hidden
display: none property
do in CSS?A) Hides the element but keeps it in the document flow
B) Removes the element from the document flow entirely
C) Makes the element invisible but still takes up space
D) Makes the element's text hidden
Answer: B
Explanation: The display: none property
removes the element from the document flow entirely, so it no longer takes up
space.
MCQ 16:What is
the correct syntax for adding a comment in CSS?
A) <!-- This is a
comment -->
B) // This is a comment
C) /* This is a comment */
D) # This is a comment
A)
<!-- This is a
comment -->B)
// This is a commentC)
/* This is a comment */D)
# This is a commentAnswer: C
Explanation: The
correct syntax for comments in CSS is /*
This is a comment */.
MCQ 17:How do
you make an HTML element's text bold using CSS?
A) text-weight: bold;
B) font-weight: bold;
C) font-style: bold;
D) font-family: bold;
A)
text-weight: bold;B)
font-weight: bold;C)
font-style: bold;D)
font-family: bold;Answer: B
Explanation: The font-weight property
is used to make text bold in CSS.
MCQ 18:Which of
the following is the correct syntax for using a CSS class selector?
A) #class-name {}
B) .class-name {}
C) class-name {}
D) *class-name {}
A)
#class-name {}B)
.class-name {}C)
class-name {}D)
*class-name {}Answer: B
Explanation: The . (dot) is used to
select elements with a specific class in CSS.
MCQ 19:What
does the margin property
in CSS do?
A) Creates space inside an element
B) Creates space between two elements
C) Changes the color of the element
D) Aligns the content of an element
margin property
in CSS do?A) Creates space inside an element
B) Creates space between two elements
C) Changes the color of the element
D) Aligns the content of an element
Answer: B
Explanation: The margin property
creates space outside an element, between it and other elements.
MCQ 20:Which of
the following is the correct way to apply CSS using an external file?
A) <link
href="styles.css">
B) <style
src="styles.css">
C) <link
rel="stylesheet" href="styles.css">
D) <css
src="styles.css">
A)
<link
href="styles.css">B)
<style
src="styles.css">C)
<link
rel="stylesheet" href="styles.css">D)
<css
src="styles.css">Answer: C
Explanation: The <link> tag with rel="stylesheet" is
the correct way to apply an external CSS file.
MCQ 21:How do
you change the text alignment of an HTML element to the center using CSS?
A) text-align: center;
B) text-align: middle;
C) align-text: center;
D) center-align: true;
A)
text-align: center;B)
text-align: middle;C)
align-text: center;D)
center-align: true;Answer: A
Explanation: The text-align: center; property
is used to center-align the text within an element.
MCQ 22:What is
the correct CSS syntax for changing the background color of a div element to red?
A) div { background-color:
red; }
B) div { color: red;
background: red; }
C) div { color: red;
background-color: red; }
D) div { background: red
color; }
div element to red?A)
div { background-color:
red; }B)
div { color: red;
background: red; }C)
div { color: red;
background-color: red; }D)
div { background: red
color; }Answer: A
Explanation: The
correct CSS syntax to change the background color of a div is div { background-color: red; }.
MCQ 23:Which of
the following is a valid CSS border shorthand?
A) border: 1px solid blue;
B) border: 1px dashed;
C) border: solid 1px blue;
D) border: blue 1px solid;
A)
border: 1px solid blue;B)
border: 1px dashed;C)
border: solid 1px blue;D)
border: blue 1px solid;Answer: A
Explanation: The
correct syntax for a CSS border shorthand is border:
width style color;.
MCQ 24:Which
HTML element is used to define an internal CSS style?
A) <link>
B) <style>
C) <script>
D) <css>
A)
<link>B)
<style>C)
<script>D)
<css>Answer: B
Explanation: The <style> tag is
used to define internal CSS in an HTML document.
MCQ 25:Which of
the following is a valid CSS comment?
A) <!-- This is a
comment -->
B) // This is a comment
C) /* This is a comment */
D) # This is a comment
A)
<!-- This is a
comment -->B)
// This is a commentC)
/* This is a comment */D)
# This is a commentAnswer: C
Explanation: CSS
comments are enclosed in /*
comment */.
MCQ 26:Which of
the following CSS properties is used to control the text color of an element?
A) color
B) background-color
C) font-color
D) text-color
A)
colorB)
background-colorC)
font-colorD)
text-colorAnswer: A
Explanation: The color property is
used to control the text color of an element.
MCQ 27:What is
the default value of the display property
in CSS?
A) block
B) inline
C) none
D) static
display property
in CSS?A)
blockB)
inlineC)
noneD)
staticAnswer: A
Explanation: By
default, most elements have display:
block unless specified otherwise.
MCQ 28:Which of
the following properties is used to set the space between words in CSS?
A) letter-spacing
B) line-height
C) word-spacing
D) text-spacing
A)
letter-spacingB)
line-heightC)
word-spacingD)
text-spacingAnswer: C
Explanation: The word-spacing property
is used to set the space between words.
MCQ 29:Which of
the following is a valid HTML5 doctype declaration?
A) <!DOCTYPE html>
B) <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 5.0//EN">
C) <!DOCTYPE HTML 5>
D) <!DOCTYPE HTML5>
A)
<!DOCTYPE html>B)
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 5.0//EN">C)
<!DOCTYPE HTML 5>D)
<!DOCTYPE HTML5>Answer: A
Explanation: The
correct and simplified doctype declaration for HTML5 is <!DOCTYPE html>.
MCQ 30:What
does the float property
in CSS do?
A) Removes an element from the document flow
B) Floats an element to the left or right of its container
C) Aligns the text in a paragraph
D) Changes the layout of elements
float property
in CSS do?A) Removes an element from the document flow
B) Floats an element to the left or right of its container
C) Aligns the text in a paragraph
D) Changes the layout of elements
Answer: B
Explanation: The float property in CSS
is used to float an element to the left or right, allowing content to flow
around it.
MCQ 31:Which of the following properties is used to set the
width of an element in CSS?
A) width
B) height
C) border-width
D) padding
A)
widthB)
heightC)
border-widthD)
paddingAnswer: A
Explanation: The width property in CSS
is used to define the width of an element.
MCQ 32:Which
CSS property is used to set the size of the text?
A) text-size
B) font-size
C) size
D) text-height
A)
text-sizeB)
font-sizeC)
sizeD)
text-heightAnswer: B
Explanation: The font-size property is
used to set the size of the text in CSS.
MCQ 33:Which of
the following is the correct syntax for adding a background image in CSS?
A) background-image:
url('image.jpg');
B) background:
image('image.jpg');
C) background:
url('image.jpg');
D) bg-image:
url('image.jpg');
A)
background-image:
url('image.jpg');B)
background:
image('image.jpg');C)
background:
url('image.jpg');D)
bg-image:
url('image.jpg');Answer: A
Explanation: The
correct syntax for adding a background image is background-image: url('image.jpg');.
MCQ 34:Which of
the following tags is used to define a hyperlink in HTML?
A) <link>
B) <a>
C) <href>
D) <hyperlink>
A)
<link>B)
<a>C)
<href>D)
<hyperlink>Answer: B
Explanation: The <a> tag is used
to define a hyperlink in HTML.
MCQ 35:Which of
the following is a valid HTML tag for creating an unordered list?
A) <ul>
B) <ol>
C) <list>
D) <ulist>
A)
<ul>B)
<ol>C)
<list>D)
<ulist>Answer: A
Explanation: The <ul> tag is
used to create an unordered list in HTML.
MCQ 36:Which of
the following properties is used to change the font style in CSS?
A) font-style
B) font-weight
C) text-decoration
D) font-family
A)
font-styleB)
font-weightC)
text-decorationD)
font-familyAnswer: A
Explanation: The font-style property
is used to set the style of the font (e.g., italic, normal).
MCQ 37:Which
HTML tag is used to create a table?
A) <table>
B) <td>
C) <th>
D) <tr>
A)
<table>B)
<td>C)
<th>D)
<tr>Answer: A
Explanation: The <table> tag is
used to create a table in HTML.
MCQ 38:Which of
the following properties is used to control the alignment of an element in CSS?
A) text-align
B) align
C) vertical-align
D) align-items
A)
text-alignB)
alignC)
vertical-alignD)
align-itemsAnswer: A
Explanation: The text-align property
is used to align text inside an element (left, center, right).
MCQ 39:Which of
the following HTML tags is used to insert an image into a webpage?
A) <src>
B) <image>
C) <img>
D) <picture>
A)
<src>B)
<image>C)
<img>D)
<picture>Answer: C
Explanation: The <img> tag is
used to insert an image into a webpage in HTML.
MCQ 40:Which of
the following properties in CSS is used to create space between the element's
content and its border?
A) padding
B) margin
C) border-spacing
D) width
A)
paddingB)
marginC)
border-spacingD)
widthAnswer: A
Explanation: The padding property
creates space between the element's content and its border.
MCQ 41:Which of
the following is the correct syntax for applying a CSS rule to a class named
"button"?
A) #button {}
B) .button {}
C) button {}
D) *button {}
A)
#button {}B)
.button {}C)
button {}D)
*button {}Answer: B
Explanation: To
apply a CSS rule to a class named "button", use .button {}.
MCQ 42:What
does the position: absolute; property
do in CSS?
A) Positions an element relative to its parent element
B) Positions an element based on the document's flow
C) Positions an element at the top-left corner of the page
D) Positions an element relative to the viewport
position: absolute; property
do in CSS?A) Positions an element relative to its parent element
B) Positions an element based on the document's flow
C) Positions an element at the top-left corner of the page
D) Positions an element relative to the viewport
Answer: A
Explanation: position: absolute; positions
an element relative to its nearest positioned ancestor (non-static).
MCQ 43:Which of
the following CSS properties controls the space between content and the border
of an element?
A) padding
B) margin
C) border-radius
D) width
A)
paddingB)
marginC)
border-radiusD)
widthAnswer: A
Explanation: The padding property
controls the space between the content of an element and its border.
MCQ 44:Which of
the following is the correct syntax for including a comment in an HTML
document?
A) <!-- This is a
comment -->
B) // This is a comment
C) /* This is a comment */
D) # This is a comment
A)
<!-- This is a
comment -->B)
// This is a commentC)
/* This is a comment */D)
# This is a commentAnswer: A
Explanation: The
correct syntax for HTML comments is <!--
comment -->.
MCQ 45:Which of
the following properties is used to set the spacing between elements in a flex
container?
A) gap
B) space-between
C) align-items
D) justify-content
A)
gapB)
space-betweenC)
align-itemsD)
justify-contentAnswer: A
Explanation: The gap property is used
to set the spacing between elements in a flex container in CSS.
MCQ 46:How do
you specify the font family of an element in CSS?
A) font: Arial,
sans-serif;
B) font-family: Arial;
C) font-type: Arial;
D) text-font: Arial;
A)
font: Arial,
sans-serif;B)
font-family: Arial;C)
font-type: Arial;D)
text-font: Arial;Answer: B
Explanation: The font-family property
is used to specify the font of an element in CSS.
MCQ 47:Which of
the following is used to specify the number of columns in a CSS grid layout?
A) columns
B) column-count
C) grid-template-columns
D) column-width
A)
columnsB)
column-countC)
grid-template-columnsD)
column-widthAnswer: C
Explanation: The grid-template-columns property
specifies the number of columns and their sizes in a CSS grid layout.
MCQ 48:Which of
the following HTML tags is used to create a definition list?
A) <dl>
B) <ul>
C) <ol>
D) <list>
A)
<dl>B)
<ul>C)
<ol>D)
<list>Answer: A
Explanation: The <dl> tag is
used to create a definition list in HTML.
MCQ 49:Which
CSS property is used to make text italic?
A) font-style
B) text-decoration
C) font-weight
D) text-transform
A)
font-styleB)
text-decorationC)
font-weightD)
text-transformAnswer: A
Explanation: The font-style property
is used to set the font to italic.
MCQ 50:Which of
the following is the correct way to apply a style to a class called
"menu" in an external CSS file?
A) .menu {}
B) #menu {}
C) menu {}
D) *menu {}
A)
.menu {}B)
#menu {}C)
menu {}D)
*menu {}Answer: A
Explanation: To
apply a style to a class called "menu", use .menu {}.