MCQs on CSS Integration | HTML
Chapter 4: CSS Integration covers essential methods for incorporating CSS into HTML, including linking external stylesheets, using inline and internal styles, and understanding basic CSS selectors. Proper CSS integration is vital for creating visually appealing and well-structured websites. Below are 30 multiple-choice questions (MCQs) on these topics.
MCQs on CSS Integration
Linking External Stylesheets
- Which HTML tag is used to link an external CSS stylesheet to an HTML document?
a) <style>
b) <link>
c) <css>
d) <script> - Where should the <link> tag be placed in an HTML document?
a) In the <body> section
b) In the <head> section
c) At the end of the document
d) It can be placed anywhere - Which attribute of the <link> tag is used to specify the location of the external CSS file?
a) src
b) href
c) path
d) url - What file extension is commonly used for external CSS stylesheets?
a) .html
b) .css
c) .xml
d) .js - Can multiple external stylesheets be linked to a single HTML document?
a) No, only one stylesheet can be linked
b) Yes, but only if they are from the same directory
c) Yes, multiple stylesheets can be linked
d) No, external stylesheets are not allowed
Inline and Internal CSS Styles
- Which attribute is used to apply inline CSS to an HTML element?
a) style
b) class
c) id
d) css - Where is internal CSS written in an HTML document?
a) Inside the <body> tag
b) Inside the <head> tag
c) Directly inside the <html> tag
d) After the <body> tag - What is the correct syntax for writing inline CSS in an HTML element?
a) <element style=”property: value;”>
b) <element css=”property: value;”>
c) <element class=”property: value;”>
d) <element class=”value: property;”> - Which of the following is the correct way to include internal CSS in the <head> section of an HTML document?
a) <link rel=”stylesheet” href=”style.css”>
b) <style type=”text/css”>… </style>
c) <script>…</script>
d) <css>…</css> - Which of the following will override internal CSS?
a) Inline CSS
b) External CSS
c) Internal CSS cannot be overridden
d) None of the above
Basic CSS Selectors
- Which CSS selector is used to select an element by its id?
a) .id
b) #id
c) *id
d) &id - What is the correct syntax to select all elements with the class name “highlight”?
a) #highlight
b) .highlight
c) highlight
d) *highlight - Which CSS selector selects all elements on the page?
a) *
b) .all
c) *all
d) .everything - How do you select all <p> elements inside a <div> element?
a) div.p
b) p div
c) div > p
d) div p - How do you select an element by its tag name in CSS?
a) By using a class selector
b) By using a tag selector
c) By using an id selector
d) By using an attribute selector
Combinations of Selectors
- Which selector is used to select all elements that are children of a specific element?
a) >
b) +
c) ~
d) & - What does the selector “div p” represent in CSS?
a) All <p> elements inside a <div>
b) All <div> elements inside a <p>
c) A <div> element that directly follows a <p>
d) A <p> element directly inside a <div> - Which selector is used to select the first <li> element in every <ul>?
a) ul li
b) ulli
c) ul > li
d) ul li:first-child - How can you select a specific element with a specific class and id at the same time?
a) .class#id
b) #id.class
c) .class#id
d) .class #id - What is the syntax for selecting all <a> tags that are inside a <div> tag?
a) div a
b) div > a
c) a div
d) a div >
CSS Specificity and Cascade
- What determines which CSS rule is applied when multiple rules match the same element?
a) The order of the rules
b) The specificity of the selector
c) The number of stylesheets
d) The size of the element - Which of the following has the highest specificity in CSS?
a) Type selector
b) Class selector
c) ID selector
d) Universal selector - How is the “cascading” effect of CSS rules applied when there are conflicting styles?
a) The last declared rule wins
b) The first declared rule wins
c) The rule with the highest specificity wins
d) Cascading does not affect CSS - What is the default value of the “position” property in CSS?
a) absolute
b) relative
c) fixed
d) static - Which property is used to set the background color of an element in CSS?
a) background-color
b) color
c) bg-color
d) background-image
Advanced Selectors
- How do you select all <input> elements of type “text” in CSS?
a) input[type=”text”]
b) input(text)
c) input[type=text]
d) input.text - What does the selector “p + p” select in CSS?
a) All <p> elements
b) All <p> elements after another <p>
c) The first <p> element
d) The last <p> element - How do you select all elements that are not <p> elements?
a)(p)
b)(p)
c)(p)
d) *(p)
Answer Key
| Qno | Answer |
|---|---|
| 1 | b) <link> |
| 2 | b) In the <head> section |
| 3 | b) href |
| 4 | b) .css |
| 5 | c) Yes, multiple stylesheets can be linked |
| 6 | a) style |
| 7 | b) Inside the <head> tag |
| 8 | a) <element style=”property: value;”> |
| 9 | b) <style type=”text/css”>… </style> |
| 10 | a) Inline CSS |
| 11 | b) #id |
| 12 | b) .highlight |
| 13 | a) * |
| 14 | d) div p |
| 15 | b) By using a tag selector |
| 16 | a) > |
| 17 | a) All <p> elements inside a <div> |
| 18 | a) ul li |
| 19 | c) .class#id |
| 20 | a) div a |
| 21 | b) The specificity of the selector |
| 22 | c) ID selector |
| 23 | c) The rule with the highest specificity wins |
| 24 | d) static |
| 25 | a) background-color |
| 26 | a) input[type=”text”] |
| 27 | b) All <p> elements after another <p> |
| 28 | a)(p) |
| 29 | |
| 30 |