CSS Questions & Answers – CSS and (X)HTML Elements Fundamentals

CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS and (X)HTML Elements Fundamentals”.

What is the fundamental purpose of CSS in relation to (X)HTML ?

Answer: The fundamental purpose of CSS (Cascading Style Sheets) is to separate the presentation (style) of a web page from its structure and content (HTML/XHTML). Before CSS, styling was often mixed directly within HTML tags using attributes like bgcolor, font, etc. This made websites difficult to maintain, update, and scale. CSS allows developers to control the layout, colors, fonts, and overall visual appearance of multiple web pages from a single, centralized stylesheet, promoting consistency and efficiency.

How does CSS “select” (X)HTML elements to apply styles? Name and briefly explain the most common types of selectors.

Answer: CSS uses selectors to target specific (X)HTML elements (or groups of elements) to which styles should be applied. The most common types of selectors are:

1. Type (Element) Selector: Targets all instances of a specific HTML element.
   • Example: p { color: blue; } (targets all paragraph elements)
2. Class Selector: Targets elements that have a specific class attribute. An element can have multiple classes, and multiple elements can share the same class.
   • Example: .highlight { background-color: yellow; } (targets any element with class="highlight")
3. ID Selector: Targets a single, unique element that has a specific id attribute. An idmust be unique within a document.
   • Example: #header { font-size: 2em; } (targets the element with id="header")
4. Descendant Selector (Combinator): Selects an element that is a descendant of another specified element.
   • Example: ul li { list-style-type: square; } (targets all <li> elements that are inside a <ul> element)
5. Child Selector (Combinator): Selects an element that is a direct child of another specified element.
   • Example: div > p { margin-bottom: 10px; } (targets all p elements that are direct children of a div)

Q 1. Which of the following elements are block and inline elements, respectively, that have no particular rendering?
A. div
B. span
C. box-model
D. both div and span

Show Answer

Answer:-D. both div and span

Explanation

The div element and span element are block and inline elements, respectively, that have no particular rendering. You might call them generic tags. Because these tags don’t have any predefined meaning or rendering, they are very useful for arbitrary style duties.

Q 2. The _____________ property specifies the background color of an element.
A. color
B. border
C. background-color
D. display

Show Answer

Answer:-C. background-color

Explanation

Example: body { background-image: url(“img_tree.png”); background-repeat: no-repeat; }

Q 3. The ___________ property specifies if/how an element is displayed.
A. background-color
B. display
C. color
D. border

Show Answer

Answer:-B. display

Explanation

Example: h1.hidden { display: none; }

Q 4. The _____________ property allows us to include the padding and border in an element’s total width and height.
A. margin
B. padding
C. box-sizing
D. none of the mentioned

Show Answer

Answer:-C. box-sizing

Explanation

Example: .div1 { box-sizing: border-box; }

Q 5. ____________ property sets the coordinates of the clipping shape that exposes or hides the content of absolutely positioned elements
A. clammper
B. clip
C. clear
D. none of the mentioned

Show Answer

Answer:-B. clip

Explanation

clip: rect(coordinates) | auto | inherit

Q 6. _____________ property defines the space between cells in a table.
A. border-spacing
B. border
C. border-style
D. none of the mentioned

Show Answer

Answer:-A. border-spacing

Explanation

border-spacing: non-negative length(s) | inherit

Q 7. ____________ property defines whether table cell borders are connected or separate.
A. border-color
B. border
C. border-style
D. none of the mentioned

Show Answer

Answer:-D. none of the mentioned

Explanation

border-collapse roperty defines whether table cell borders are connected or separate.

Q 8. ________________ property sets the background image to scroll or not to scroll with its associated element’s content
A. background
B. background-position
C. background-attachment
D. none of the mentioned

Show Answer

Answer:-C. background-attachment Z

Explanation

Example: background-attachment: scroll | fixed | inherit

Q 9. ____________ property associates a background image with an element.
A. image
B. float
C. background-image
D. none of the mentioned

Show Answer

Answer:-C. background-image

Explanation

Example: background-image: url(image-file) | none | inherit

Q 10. ______________ property defines whether table cell borders are connected or separate.
A. pre
B. border-color
C. border-collapse
D. table

Show Answer

Answer:-C. border-collapse

Explanation

Example: border-collapse: collapse | separate | inherit

Explain the concept of the “Box Model” in CSS and how it relates to (X)HTML elements.

Answer: The CSS Box Model is a fundamental concept that describes how every (X)HTML element on a web page is rendered as a rectangular box. This model defines four distinct layers that make up the total space an element occupies:

1. Content: The actual content of the element (text, images, video, etc.). Its dimensions are defined by width and height properties.
2. Padding: The transparent space between the content and the border. It adds space inside the element.
3. Border: A line that goes around the padding and content. Its style, width, and color can be customized.
4. Margin: The transparent space outside the border, separating the element from other elements. It adds space around the element.

Relationship to (X)HTML Elements: Every (X)HTML element, whether it’s a <div>, <p>, <img>, or <span>, inherently adheres to the box model. When you apply CSS properties like width, height, padding, border, and margin, you are directly manipulating these components of an element’s box. Understanding the box model is crucial for controlling layout, spacing, and element positioning accurately.