CSS (Cascading Style Sheets) Learning Quizzes: Master Web Page Styling

Question 1

Which of the following is the correct CSS syntax to define the font color?

Accepted Answer

color: #rrggbb;

Answer

font-color: #rrggbb;

Answer

text-color: #rrggbb;

Answer

color: rgb(#rrggbb);

Question 2

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

Accepted Answer

To control the layout of an element.

Answer

To position an element on the page.

Answer

To change the appearance of an element.

Answer

To define the spacing around an element.

Question 3

Which CSS selector matches all elements with the class "highlight"?

Accepted Answer

.highlight

Answer

highlight

Answer

#highlight

Question 4

What is the function of the "!important" declaration in CSS?

Accepted Answer

To override any conflicting style declarations.

Answer

To apply a style to all elements on the page.

Answer

To mark a style declaration as mandatory.

Answer

To prevent a style declaration from being inherited.

Question 5

What is the purpose of the "overflow-x" property in CSS?

Accepted Answer

To control the behavior of content that overflows horizontally.

Answer

To hide overflowing content.

Answer

To create a scrollbar for overflowing content.

Question 6

Which CSS value is used to align text to the right?

Accepted Answer

right

Answer

justify

Answer

center

Answer

left

Question 7

What is the key difference between a CSS class and a CSS ID?

Accepted Answer

A class can be applied to multiple elements, while an ID must be unique.

Answer

A class can be inherited, while an ID cannot.

Answer

A class is used for styling elements, while an ID is used for identifying elements.

Question 8

Which CSS property defines the vertical space between lines of text?

Accepted Answer

line-height

Answer

letter-spacing

Answer

text-spacing

Question 9

What type of CSS selector selects all elements with a particular class name?

Accepted Answer

.class-name

Answer

#id-name

Answer

* element-name

Answer

div element

Question 10

Which CSS property sets the background color of an element?

Accepted Answer

background-color

Answer

background-image

Answer

fill

Answer

color

Question 11

Write the correct CSS rule that sets the font size to 16px for elements with the class 'heading'.

Accepted Answer

.heading { font-size: 16px; }

Answer

class: heading; { font-size: 16px; }

Answer

heading { font-size: 16; }

Answer

heading font: 16px;

Question 12

Which CSS property is used to create rounded corners for an element?

Accepted Answer

border-radius

Answer

round-corners

Answer

corner-radius

Answer

radius

Question 13

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

Accepted Answer

To control how an element is displayed and laid out on the page

Answer

To specify the background color

Answer

To set the font family

Question 14

Which CSS selector selects the first direct child element of a parent with the class 'container'?

Accepted Answer

.container > *:first-child

Answer

.container *:first

Answer

container.first-child

Answer

.container *:first-child()

Question 15

What is the proper method to import an external CSS file into an HTML document?

Accepted Answer

Answer

Answer

Question 16

Which CSS property sets the level of transparency for an element?

Accepted Answer

opacity

Answer

alpha

Answer

transparency

Answer

fade

Question 17

What is the order of precedence in CSS when multiple rules apply to the same element (from highest to lowest)?

Accepted Answer

Inline > Internal > External > Browser Default

Answer

Inline > External > Browser Default > Internal

Answer

Browser Default > Internal > External > Inline

Answer

External > Internal > Browser Default > Inline

Question 18

Which of the following is the correct CSS syntax to set the font color to red?

Accepted Answer

color: red;

Answer

color: #FF0000;

Answer

text-color: red;

Answer

font-color: red;

Question 19

What is the purpose of the exclamation mark (!) in a CSS rule?

Accepted Answer

To increase the specificity of the rule, overriding any conflicting rules.

Answer

To indicate an important rule that should be prioritized.

Answer

To negate the rule, making it inactive.

Answer

To mark the rule as a comment, excluding it from being applied.

Question 20

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

Accepted Answer

width

Answer

size

Answer

length

Answer

dimension

Question 21

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

Accepted Answer

To position an element to the left or right of the normal document flow, allowing text and other elements to wrap around it.

Answer

To align text within an element.

Answer

To create a border around an element.

Question 22

Which CSS selector is used to select all elements with the class name 'container'?

Accepted Answer

.container

Answer

#container

Answer

container

Question 23

What is the key difference between the 'display: inline' and 'display: block' properties in CSS?

Accepted Answer

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

Answer

Inline elements can only contain text, while block elements can contain any content.

Answer

Inline elements are always visible on the same line as text, while block elements can be placed on separate lines.

Question 24

Which CSS property controls the vertical space between lines of text?

Accepted Answer

line-height

Answer

line-spacing

Answer

leading

Answer

text-spacing

Question 25

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

Accepted Answer

To control the stacking order of overlapping elements, determining which element appears in front or behind others.

Answer

To create a drop shadow effect around an element.

Answer

To animate an element's position or appearance.

Question 26

Which of the following is an example of a valid CSS media query?

Accepted Answer

@media (max-width: 768px)

Answer

(max-width: 768px)

Answer

@media width < 768px

Answer

media (max-width: 768px)

Question 27

What is the effect of using the '!important' declaration in a CSS rule?

Accepted Answer

It overrides all other declarations for the same property, ensuring that the rule takes precedence.

Answer

It increases the specificity of the rule, making it more targeted.

Answer

It adds emphasis to the rule, making it more likely to be applied.

Question 28

Which CSS property sets the background color of an element?

Accepted Answer

background-color

Answer

bgcolor

Answer

bg-color

Answer

background

Question 29

What is the function of the CSS selector '* selector *'?

Accepted Answer

Applies style to all elements in the document

Answer

Applies style to an id

Answer

Applies style to a class

Answer

Applies style to a specific element

Question 30

What is the primary distinction between an 'id' and 'class' in CSS coding?

Accepted Answer

An 'id' is unique and can only be used once in the document, whereas a 'class' can be reused multiple times.

Answer

An 'id' can be used multiple times, while a 'class' can only be used once.

Answer

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

Answer

A 'class' is unique and can only be used once in the document, whereas an 'id' can be reused multiple times.

Question 31

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

Accepted Answer

To control the stacking order of elements on a web page

Answer

To set the background color of an element

Answer

To specify the width of an element

Answer

To define the font size of an element

Question 32

Which CSS selector is used to target an element with a specific class?

Accepted Answer

.class-name

Answer

element-name

Answer

#id-name

Answer

* selector *

Question 33

What is the default value assigned to the 'display' CSS property?

Accepted Answer

block

Answer

grid

Answer

flex

Answer

inline

Question 34

What is the fundamental purpose of a CSS stylesheet?

Accepted Answer

To separate the presentation of a web page from its content and structure

Answer

To define the markup of a web page

Answer

To create interactive elements on a web page

Question 35

Which CSS property sets the background color of an element?

Accepted Answer

background-color

Answer

color

Answer

background

Answer

bg-color

Question 36

What is the correct CSS syntax for selecting all elements with the class 'container'?

Accepted Answer

.container

Answer

^container

Answer

#container

Answer

.container{}

Question 37

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

Accepted Answer

To specify the type of display element, such as block, inline, or flex.

Answer

To define the padding of an element.

Answer

To change the size of the text.

Answer

To set the color of an element.

Question 38

Which CSS property adjusts the space between lines of text?

Accepted Answer

line-height

Answer

text-spacing

Answer

line-spacing

Answer

height

Question 39

What is the primary benefit of using a CSS reset?

Accepted Answer

It standardizes the default styling of HTML elements across different browsers.

Answer

It optimizes CSS code efficiency.

Answer

It improves the performance of a website.

Question 40

Which CSS selector targets all elements on a web page?

Accepted Answer

*

Answer

~

Answer

+

Answer

&

Question 41

Describe the result of the following CSS code: h1 { color: red; font-size: 24px; }

Accepted Answer

All h1 elements will have red text and a font size of 24 pixels.

Answer

All elements will have red text and a font size of 24 pixels.

Answer

The code will cause an error.

Question 42

Which CSS property determines the width of an element?

Accepted Answer

width

Answer

height

Answer

length

Question 43

What is the purpose of using an ID selector in CSS?

Accepted Answer

To apply styles to a specific element with a unique identifier.

Answer

To apply styles to all elements of a particular type.

Answer

To apply styles to elements with a shared class.

Question 44

Which CSS property controls the level of transparency for an element?

Accepted Answer

opacity

Answer

transparency

Answer

alpha

Question 45

What is the proper syntax for a CSS rule?

Accepted Answer

selector { property: value; }

Answer

{ selector: property; value: }

Answer

selector { value: property; }

Question 46

Which CSS property specifies the space between an element's border and its content?

Accepted Answer

padding

Answer

margin

Answer

spacing

Question 47

What is the function of the CSS cascade?

Accepted Answer

To prioritize and apply CSS rules to elements based on their specificity and order.

Answer

To enforce a strict hierarchy in CSS rules.

Answer

To prevent conflicts between CSS rules.

Question 48

What is a primary benefit of utilizing a CSS preprocessor?

Accepted Answer

Extends the capabilities of CSS through additional features and functions.

Answer

Improves the readability of CSS code.

Answer

Enhances the performance of web pages.

Question 49

Which of the following is NOT a valid value for the CSS position property?

Accepted Answer

inline

Answer

relative

Answer

absolute

Answer

static

Question 50

What is the advantage of using a CSS reset?

Accepted Answer

Establishes a consistent baseline for styling by eliminating default browser styles.

Answer

Simplifies the readability of CSS code.

Answer

Improves the speed of loading web pages.