Master CSS: A Comprehensive Guide to Styling Web Pages

Question 1

What is the correct syntax for a CSS class selector?

Accepted Answer

.class-name

Answer

#class-name

Answer

class-name

Question 2

In CSS, which property is responsible for setting the background color of an element?

Accepted Answer

background-color

Answer

color

Answer

background

Answer

bg-color

Question 3

In CSS, what's the key difference between using 'em' and 'rem' to set font sizes?

Accepted Answer

'em' is relative to the parent element, while 'rem' is relative to the root element.

Answer

'rem' is relative to the parent element, while 'em' is relative to the root element.

Answer

'em' and 'rem' both set font sizes relative to the root element.

Answer

'em' and 'rem' both set font sizes relative to the parent element.

Question 4

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

Accepted Answer

To control how an element is displayed on a web page

Answer

To set the background color of an element

Answer

To specify the font of an element

Answer

To position an element on the page

Question 5

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

Accepted Answer

.container

Answer

container

Answer

div.container

Answer

#container

Question 6

What is the distinction between 'width' and 'max-width' properties in CSS?

Accepted Answer

'Width' sets a fixed width, while 'max-width' sets a maximum width that an element is allowed to grow to.

Answer

'Width' sets the minimum width, while 'max-width' sets the maximum width.

Answer

There is no difference between 'width' and 'max-width'.

Question 7

What is the primary purpose of using media queries in CSS?

Accepted Answer

To apply different styles to a web page based on the device or screen size

Answer

To add animations to a web page

Answer

To create different color schemes for a web page

Question 8

What is the default value for the 'text-align' property?

Accepted Answer

left

Answer

justify

Answer

center

Answer

right

Question 9

Which CSS property can be used to create rounded corners on an element?

Accepted Answer

border-radius

Answer

round-corners

Answer

curve-edges

Answer

corner-radius

Question 10

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

Accepted Answer

To control the stacking order of overlapping elements

Answer

To set the opacity of an element

Answer

To position an element within its parent container

Question 11

In CSS, the property used to define the size of the font is:

Accepted Answer

font-size

Answer

font-family

Answer

font-style

Answer

text-size

Question 12

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

Accepted Answer

.container

Answer

#container

Answer

container

Answer

.#container

Question 13

The purpose of the CSS 'background-color' property is to:

Accepted Answer

Set the background color of an element

Answer

Set the text color of an element

Answer

Set the border color of an element

Answer

Set the width of an element

Question 14

What is the primary function of a CSS comment?

Accepted Answer

To provide notes or explanations within a CSS document

Answer

To create CSS variables

Answer

To define custom CSS properties

Question 15

To define a custom CSS variable, the correct syntax is:

Accepted Answer

--variable-name: value;

Answer

var-name = value;

Answer

variable-name: value

Answer

$variable-name: value;

Question 16

Which CSS selector has the highest specificity?

Accepted Answer

ID selector

Answer

Class selector

Answer

Element selector

Answer

Universal selector

Question 17

What is the main purpose of using a reset CSS stylesheet?

Accepted Answer

To normalize browser default styles for consistent styling across different browsers

Answer

To improve the performance of a web page

Answer

To create custom CSS variables

Question 18

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

Accepted Answer

border-radius

Answer

round-corners

Answer

radius

Answer

corner-radius

Question 19

Which of the following is the correct syntax to define a CSS rule?

Accepted Answer

selector { property: value; }

Answer

property selector: { value; }

Answer

selector value { property: };

Answer

{ property: value; selector: }

Question 20

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

Accepted Answer

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

Answer

To set the background color of an element.

Answer

To specify the color of an element's text.

Question 21

What is the key difference between external and internal CSS stylesheets?

Accepted Answer

External stylesheets are stored in separate files, while internal stylesheets are embedded within the HTML document.

Answer

External stylesheets can only be used with HTML5 documents, while internal stylesheets can be used with any HTML version.

Question 22

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

Accepted Answer

To control the stacking order of overlapping elements on a web page.

Answer

To define the position of an element on the page.

Answer

To specify the size of an element's margins.

Question 23

What is the primary function of media queries in CSS?

Accepted Answer

To apply different styles to a web page based on specific conditions, such as device screen size or orientation.

Answer

To create animations and transitions for web page elements.

Question 24

Which property in CSS is NOT a valid option for the 'background' property?

Accepted Answer

text-align

Answer

background-color

Answer

background-image

Answer

background-position

Question 25

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

Accepted Answer

Padding adds space inside an element's border, while margin adds space outside an element's border.

Answer

Margin can be negative, while padding cannot.

Answer

Padding is used for vertical spacing, while margin is used for horizontal spacing.

Question 26

Which CSS property is used to create a drop shadow effect around an element?

Accepted Answer

box-shadow

Answer

text-shadow

Answer

shadow

Answer

outline

Question 27

What is the correct syntax to define a CSS class?

Accepted Answer

.class-name { }

Answer

[class-name] { }

Answer

{ .class-name }

Answer

.{ class-name }

Question 28

Which property controls the background color of an element?

Accepted Answer

background-color

Answer

bg-color

Answer

background

Answer

color-background

Question 29

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

Accepted Answer

Controls the type of display for an element (e.g., block, inline)

Answer

Defines the color of the text

Answer

Sets the background image of an element

Question 30

Which of the following is a valid value for the 'text-align' property?

Accepted Answer

center

Answer

align

Answer

text-center

Answer

justify-all

Question 31

What is the role of a CSS preprocessor?

Accepted Answer

Extends CSS with additional features (e.g., variables, nesting)

Answer

Converts CSS into HTML

Answer

Optimizes CSS code for faster loading

Question 32

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

Accepted Answer

Controls the stacking order of elements

Answer

Defines the width of an element

Answer

Specifies the position of an element

Answer

Sets the opacity of an element

Question 33

What is the distinction between a CSS declaration and a CSS rule?

Accepted Answer

A declaration defines a single property-value pair, while a rule consists of a selector and a block of declarations

Answer

Declarations can be used without a selector, while rules require one

Answer

Declarations are used for inline styling, while rules are used for external styling

Question 34

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

Accepted Answer

background-color

Answer

background-image

Answer

color

Answer

background

Question 35

What is the correct syntax to define a CSS class?

Accepted Answer

.class-name { ... }

Answer

*class-name { ... }

Answer

%class-name { ... }

Answer

#class-name { ... }

Question 36

What is the purpose of the CSS cascade?

Accepted Answer

To resolve conflicts between multiple style declarations

Answer

To improve the performance of web pages

Answer

To ensure consistent styling across browsers

Question 37

Which CSS property is used to make an element's background transparent?

Accepted Answer

opacity

Answer

visibility

Answer

display

Answer

background-color

Question 38

Which of the following is NOT a valid CSS color value?

Accepted Answer

green#ff0000

Answer

hsl(120, 100%, 50%)

Answer

#00ff00

Answer

rgb(0, 255, 0)

Question 39

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

Accepted Answer

To control the stacking order of elements on the page

Answer

To set the opacity of an element

Answer

To create a transparent background for an element

Question 40

Which CSS property is used to add a border to an element?

Accepted Answer

border

Answer

margin

Answer

outline

Answer

padding

Question 41

Which of the following is the correct syntax to create a CSS rule?

Accepted Answer

selector { property: value; }

Answer

{ selector; property: value; }

Answer

selector { value: property; }

Answer

{ property: value; selector; }

Question 42

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

Accepted Answer

To control the layout and visibility of an element on a webpage.

Answer

To add a background image to an element.

Answer

To set the font style of an element.

Answer

To change the color of an element.

Question 43

Which CSS selector targets all elements with a specific id attribute?

Accepted Answer

#id-name

Answer

.class-name

Answer

[attribute-name]

Answer

element-name

Question 44

What is the main difference between the 'width' and 'max-width' properties in CSS?

Accepted Answer

'max-width' sets the maximum width an element can be, while 'width' sets the exact width.

Answer

'width' is used for fixed-width elements and 'max-width' is for flexible-width elements.

Answer

There is no difference between 'width' and 'max-width'.

Question 45

Which of the following is NOT a valid CSS unit?

Accepted Answer

inches

Answer

pixels

Answer

%

Answer

em

Question 46

What is the role of the 'cascade' in CSS?

Accepted Answer

It determines which CSS rules apply to an element when multiple rules target the same element.

Answer

It ensures that CSS rules are applied in the order they are written.

Answer

It prevents conflicts between CSS rules.

Question 47

What is the primary purpose of using media queries in CSS?

Accepted Answer

To apply different styles to a webpage based on the device or screen size.

Answer

To debug CSS code.

Answer

To add animations to a webpage.

Question 48

Which of the following CSS syntax is used to change the text color of all

elements to blue?

Accepted Answer

p { color: blue; }

Answer

p: color(blue);

Answer

Answer

p { text-color: blue; }

Question 49

What is the main advantage of using an external stylesheet in CSS?

Accepted Answer

To centralize style rules for multiple web pages, reducing code duplication.

Answer

To add inline styles directly to HTML elements.

Answer

To apply styles only to specific elements on a web page.

Answer

To define styles within the <head> section of a single HTML page.

Question 50

Which CSS property is used to modify the size of the text?

Accepted Answer

font-size

Answer

font-style

Answer

text-size

Answer

size

Question 51

What does the following CSS rule do?

h1 { margin-bottom: 20px; }

Accepted Answer

Adds a 20px bottom margin to all <h1> elements.

Answer

Sets the height of all <h1> elements to 20px.

Answer

Creates a 20px space between the text of all <h1> elements and their bottom border.

Answer

Adds a 20px top margin to all <h1> elements.

Question 52

Which value for the 'display' property would you use to hide an element?

Accepted Answer

none

Answer

block

Answer

hidden

Answer

invisible

Question 53

What is the correct CSS syntax to select an element with the id 'header'?

Accepted Answer

#header

Answer

header

Answer

*header

Answer

.header

Question 54

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

Accepted Answer

'Padding' adds space inside an element's border, while 'margin' adds space outside the border.

Answer

'Margin' adds space inside an element's border, while 'padding' adds space outside the border.

Answer

'Padding' and 'margin' are interchangeable and have the same effect.

Question 55

What is the purpose of a CSS comment?

Accepted Answer

To explain the code and make it more readable.

Answer

To apply styles to specific HTML elements.

Answer

To define variables for use in CSS rules.

Answer

To create animations and transitions.

Question 56

Which CSS property would you use to create rounded corners on a button?

Accepted Answer

border-radius

Answer

border-curve

Answer

corner-style

Answer

rounded-corners

Question 57

What is the cascade in CSS?

Accepted Answer

The order in which CSS rules are applied if multiple rules target the same element.

Answer

A type of CSS animation that creates a cascading effect.

Answer

A method for organizing CSS code into different sections.