CSS for Styling and Layout: Master the Art of Web Design

Question 1

Which CSS property is used to specify the font size of an element?

Accepted Answer

font-size

Answer

font-family

Answer

font-weight

Answer

font-style

Question 2

What is the primary purpose of the "!important" declaration in CSS?

Accepted Answer

To override inherited styles

Answer

To improve page performance

Answer

To prevent style conflicts

Answer

To increase the specificity of a selector

Question 3

What is the key difference between a "class" and an "id" selector in CSS?

Accepted Answer

A class selector can be applied to multiple elements, while an id selector is unique.

Answer

An id selector has higher specificity than a class selector.

Answer

A class selector can only be used to style elements, while an id selector can also be used to target scripts.

Answer

There is no difference between a class selector and an id selector.

Question 4

Which CSS property controls the transparency level of an element?

Accepted Answer

opacity

Answer

transparency

Answer

alpha

Answer

fade

Question 5

What is the main purpose of the "z-index" property in CSS?

Accepted Answer

To control the stacking order of overlapping elements

Answer

To set the transparency of an element

Answer

To define the position of an element

Answer

To rotate an element

Question 6

Which CSS rule will apply styles to the HTML element with the ID attribute set to "my-element"?

Accepted Answer

#my-element {}

Answer

body {}

Answer

.my-class {}

Answer

h1 {}

Question 7

Define the box model in CSS and explain its components and significance in determining the layout and visual presentation of web elements.

Accepted Answer

The box model is a CSS framework that defines the size and positioning of elements. It comprises content, padding, border, and margin.

Answer

The box model is primarily used to create responsive layouts that adapt to various screen sizes.

Answer

The box model is a method for grouping elements in CSS for styling purposes.

Question 8

In responsive design, what's the primary purpose of using CSS media queries?

Accepted Answer

To show or hide elements based on screen size

Answer

To set the text font size

Answer

To create animations

Answer

To check HTML code

Question 9

Which CSS property is used to specify the vertical space between lines of text?

Accepted Answer

line-height

Answer

line-spacing

Answer

text-spacing

Answer

text-height

Question 10

What is the correct syntax to select all HTML elements with the class 'container'?

Accepted Answer

div.container

Answer

div#container

Answer

#container.div

Answer

.container div

Question 11

What CSS property defines the background color of an element?

Accepted Answer

background-color

Answer

background

Answer

color-background

Answer

bg-color

Question 12

Which CSS unit is used to specify a fixed width?

Accepted Answer

px

Answer

em

Answer

rem

Answer

in

Question 13

What is the purpose of the 'display' property in CSS?

Accepted Answer

To specify the layout type of an element

Answer

To control the visibility of an element

Answer

To define the font of an element

Answer

To set the background color of an element

Question 14

Which CSS property is used to align text horizontally within a block element?

Accepted Answer

text-align

Answer

text-justify

Answer

text-indent

Answer

align-text

Question 15

Explain the difference between 'block' and 'inline' display types in CSS.

Accepted Answer

Block elements start on a new line and take the full width, while inline elements flow within the line.

Answer

Inline elements start on a new line and take the full width, while block elements flow within the line.

Answer

Block elements have a fixed width and height, while inline elements have no defined width or height.

Answer

Inline elements have a fixed width and height, while block elements have no defined width or height.

Question 16

Which CSS property allows you to set the spacing between elements in a horizontal direction?

Accepted Answer

margin

Answer

padding

Answer

spacing

Answer

gap

Question 17

What is the main advantage of using a CSS preprocessor?

Accepted Answer

To make CSS code more concise and maintainable

Answer

To enhance website performance and security

Answer

To create dynamic CSS stylesheets

Answer

To provide support for older browsers

Question 18

Which CSS property is explicitly used to set the background color of an element?

Accepted Answer

background-color

Answer

color

Answer

background

Answer

fill

Question 19

In CSS, which selector is used to select all HTML elements with the class name 'container'?

Accepted Answer

.container

Answer

#container

Answer

container

Answer

div.container

Question 20

What is the primary function of the 'float' property in CSS?

Accepted Answer

To achieve horizontal alignment of elements

Answer

To establish a new block-level layout

Answer

To remove an element from the flow of the document

Answer

To set a background image for an element

Question 21

To create a drop shadow effect around an element, which CSS property should be used?

Accepted Answer

box-shadow

Answer

shadow

Answer

outline

Answer

border

Question 22

What is the key difference between inline and external CSS?

Accepted Answer

Inline CSS is embedded within the HTML document, while external CSS is stored in a separate file

Answer

Inline CSS is applied to numerous elements, while external CSS is limited to one element

Answer

External CSS offers better efficiency compared to inline CSS

Answer

Inline CSS takes precedence over external CSS

Question 23

In CSS, which property is used to set the width of an element to half of its parent container's width?

Accepted Answer

width: 50%

Answer

width: 50px

Answer

width: 0.5

Answer

width: 50em

Question 24

What is the primary purpose of the 'display' property in CSS?

Accepted Answer

To define the layout type of an element

Answer

To control the visibility of an element

Answer

To specify the background color of an element

Answer

To adjust the font size of an element

Question 25

Which CSS selector is used to select all elements that are descendants of an element with the ID 'header'?

Accepted Answer

#header *

Answer

#header > *

Answer

*#header

Answer

header > *

Question 26

What is the primary distinction between a 'class' and an 'ID' in CSS?

Accepted Answer

Classes can be assigned to multiple elements, while IDs are unique to each element

Answer

IDs have a higher priority than classes

Answer

Classes are used for styling, while IDs are used for layout

Answer

There is no difference between a class and an ID

Question 27

Which CSS unit specifies the exact physical size of an element in relation to the screen?

Accepted Answer

px

Answer

em

Answer

rem

Answer

%

Question 28

In CSS, which property determines if the background image moves with the element or stays in place?

Accepted Answer

background-attachment

Answer

background-scroll

Answer

background-position

Answer

background-size

Question 29

In CSS, which property determines how many times an animation should repeat?

Accepted Answer

animation-iteration-count

Answer

animation-duration

Answer

animation-delay

Question 30

Which CSS selector targets all elements that are direct children of an element with the class 'container'?

Accepted Answer

.container > *

Answer

container *

Answer

*.container

Question 31

In CSS, which property defines the space outside the border of an element?

Accepted Answer

margin

Answer

padding

Answer

border-spacing

Question 32

Which CSS selector selects all elements with the class name 'my-class'?

Accepted Answer

.my-class

Answer

my-class

Answer

#my-class

Answer

.myclass

Question 33

Which CSS property sets the background color of an element?

Accepted Answer

background-color

Answer

bg-color

Answer

background

Answer

color

Question 34

What is the primary purpose of the 'display' property in CSS?

Accepted Answer

To define how an element is displayed on the page

Answer

To align the element within its parent container

Answer

To define the element's size and shape

Answer

To set the element's background color

Question 35

Which of the following is a key benefit of using a CSS preprocessor?

Accepted Answer

It makes CSS code more maintainable and extendable

Answer

It speeds up the loading time of web pages

Answer

It reduces the number of CSS rules required

Answer

It provides better browser compatibility

Question 36

What is the purpose of the 'float' property in CSS?

Accepted Answer

To allow an element to be positioned next to other elements

Answer

A method for clearing floating elements

Answer

A unit of measurement in CSS

Question 37

Which CSS property is used to create transparent backgrounds?

Accepted Answer

opacity

Answer

alpha

Answer

background-transparency

Answer

transparency

Question 38

What is the main difference between a block and an inline element in CSS?

Accepted Answer

Block elements take up the full width available, while inline elements only take up as much space as needed for the content

Answer

Block elements can be positioned absolutely, while inline elements cannot

Question 39

What is a primary purpose of a CSS reset stylesheet?

Accepted Answer

To normalize the default styles applied by different browsers, providing a consistent starting point for styling

Answer

To override all browser-specific styles

Answer

To set universal styles for all elements

Question 40

Select the option that is NOT a valid CSS selector:

Accepted Answer

.#element

Answer

.element

Answer

element#id

Answer

element

Question 41

Which CSS property specifies the spacing between lines of text?

Accepted Answer

line-height

Answer

letter-spacing

Answer

text-spacing

Question 42

What is the primary purpose of the 'display' CSS property?

Accepted Answer

To specify the display type of an element (e.g., block, inline)

Answer

To control the font size of an element

Answer

To set the background color of an element

Question 43

Select the correct CSS selector that targets all elements with a specific class:

Accepted Answer

.class-name

Answer

#class-name

Answer

&.class-name

Answer

element.class-name

Question 44

Which CSS property is used to control the transparency of an element?

Accepted Answer

opacity

Answer

visible

Answer

transparency

Answer

alpha

Question 45

Explain the difference between the CSS properties 'margin' and 'padding':

Accepted Answer

Margin adds space outside an element's borders, while padding adds space inside them.

Answer

Margin is used for horizontal spacing, while padding is used for vertical spacing.

Answer

Padding is only applicable to text elements, while margin can be applied to any element.

Question 46

Which CSS layout technique offers precise control over element positioning?

Accepted Answer

Grid

Answer

Flexbox

Answer

Table

Answer

Float

Question 47

What is the purpose of the CSS 'z-index' property?

Accepted Answer

To control the stacking order of overlapping elements

Answer

To specify the opacity of an element

Answer

To set the position of an element on the page

Question 48

Which CSS selector targets all elements that have the class attribute value set to 'highlight'?

Accepted Answer

.highlight

Answer

highlight

Answer

#highlight

Answer

*highlight

Question 49

In CSS, which property is used to define the background color of an element?

Accepted Answer

background-color

Answer

fill

Answer

color

Answer

background

Question 50

Which CSS property controls the spacing between letters in a text?

Accepted Answer

letter-spacing

Answer

text-spacing

Answer

line-height

Answer

word-spacing

Question 51

What does the 'box-sizing' CSS property control?

Accepted Answer

The calculation of an element's total width and height, including padding and border

Answer

The visibility of an element

Answer

The position of an element on the page

Answer

The background color of an element

Question 52

Which value of the 'display' property will make an element invisible on the page?

Accepted Answer

none

Answer

hidden

Answer

inline

Answer

block

Question 53

In a flexbox layout, which property controls the distribution of items along the primary axis?

Accepted Answer

justify-content

Answer

flex-direction

Answer

align-items

Answer

flex-wrap

Question 54

What is the primary purpose of CSS pseudo-classes, such as ':hover'?

Accepted Answer

To apply styles to elements when they are interacted with by the user, like hovering or clicking

Answer

To define styles for a specific element with a unique ID

Answer

To target all elements of a certain type

Question 55

What is the distinction between 'margin' and 'padding' in CSS?

Accepted Answer

Margin is the space surrounding an element, while padding is the space within an element

Answer

Margin affects background color, while padding affects text color

Answer

Margin is used for positioning, while padding is used for sizing

Question 56

How can you align a block-level element horizontally to the center of its containing element using CSS?

Accepted Answer

margin: 0 auto;

Answer

float: center;

Answer

text-align: center;

Answer

align: center;