CSS Styling: Master the Art of Web Page Design

Question 1

Which CSS selector targets all elements with the class name 'container'?

Accepted Answer

.container

Answer

#container

Answer

container

Answer

div.container

Question 2

Which method is used to include a CSS file in an HTML document?

Accepted Answer

Answer

Answer

Answer

Question 3

What value of the 'float' property positions an element to the left?

Accepted Answer

left

Answer

right

Answer

center

Answer

none

Question 4

What value of the 'position' property makes an element fixed relative to the viewport?

Accepted Answer

fixed

Answer

absolute

Answer

relative

Answer

static

Question 5

Which CSS selector targets all elements with the class name "main-content"?

Accepted Answer

.main-content

Answer

#main-content

Answer

*main-content

Answer

main-content

Question 6

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

Accepted Answer

background-color

Answer

bgcolor

Answer

color

Answer

background

Question 7

Which CSS property is used to control the spacing between lines of text?

Accepted Answer

line-height

Answer

text-spacing

Answer

letter-spacing

Answer

word-spacing

Question 8

What is the correct syntax for setting the width of an element to 50%?

Accepted Answer

width: 50%

Answer

width=50%

Answer

width:50px

Answer

width 50%

Question 9

Which CSS selector has the highest specificity?

Accepted Answer

Inline style

Answer

Element selector

Answer

Class selector

Answer

ID selector

Question 10

What is the purpose of using a CSS reset stylesheet?

Accepted Answer

To normalize browser default styles

Answer

To define common styles for all elements

Answer

To improve accessibility

Answer

To reduce page load time

Question 11

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

Accepted Answer

A declaration defines a property and its value, while a rule consists of a selector and one or more declarations.

Answer

A rule defines a property and its value, while a declaration consists of a selector and one or more declarations.

Answer

A declaration is a specific instance of a rule, while a rule is a general definition.

Answer

A rule is a specific instance of a declaration, while a declaration is a general definition.

Question 12

Which CSS selector syntax is incorrect?

Accepted Answer

header body

Answer

p

Answer

#banner

Answer

.container

Question 13

What CSS property modifies the background color of an element?

Accepted Answer

background-color

Answer

background

Answer

color

Answer

fill

Question 14

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

Accepted Answer

line-height

Answer

text-spacing

Answer

padding

Answer

margin

Question 15

In HTML, what is the purpose of the 'id' attribute?

Accepted Answer

To provide a unique identifier for an element

Answer

To define the type of element

Answer

To specify the class of the element

Answer

To provide additional details about the element

Question 16

What is the key difference between a CSS 'class' and an 'id'?

Accepted Answer

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

Answer

An id can be applied to multiple elements, while a class must be unique.

Answer

A class is used for styling based on content, while an id is used for styling based on appearance.

Answer

An id is used for styling based on content, while a class is used for styling based on appearance.

Question 17

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

Accepted Answer

To control the order in which elements overlap

Answer

To control the transparency of elements

Answer

To control the size of elements

Answer

To control the position of elements

Question 18

Choose the correct syntax to select all elements that possess the "example" class.

Accepted Answer

.example

Answer

#example

Answer

example

Answer

.Example

Question 19

Identify the property employed to set the background color of an element.

Accepted Answer

background-color

Answer

color

Answer

background

Answer

bgColor

Question 20

Which value is used to display an image as the background of an element?

Accepted Answer

background-image: url(image.jpg)

Answer

backgroundImage: url(image.jpg)

Answer

background: url(image.jpg)

Answer

image: url(image.jpg)

Question 21

Explain the purpose of the @media rule.

Accepted Answer

Defines styles for different media formats like screen, print, or mobile.

Answer

Includes external CSS files.

Answer

Creates animations.

Answer

Selects elements based on their location.

Question 22

Identify the property used to define the font size of an element.

Accepted Answer

font-size

Answer

size

Answer

fontSize

Answer

font

Question 23

Explain the distinction between inline and external CSS.

Accepted Answer

Inline CSS is applied directly to HTML elements, while external CSS is defined in a separate file.

Answer

External CSS is applied directly to HTML elements, while inline CSS is defined in a separate file.

Answer

There is no difference between inline and external CSS.

Answer

Inline CSS is used for major styling modifications, while external CSS is used for minor adjustments.

Question 24

What is the purpose of CSS animations?

Accepted Answer

To add visual effects and interactivity to web pages.

Answer

To improve webpage performance.

Answer

To make CSS code simpler.

Answer

To change the look of elements based on user interactions.

Question 25

Which CSS property controls the background color of an element?

Accepted Answer

background-color

Answer

color

Answer

bg-color

Answer

fill

Question 26

Which of the following values **cannot** be used to specify the font size in CSS?

Accepted Answer

Inches (in)

Answer

Pixels (px)

Answer

Points (pt)

Answer

Relative units (em, rem)

Question 27

What is the purpose of the 'cascading' in CSS?

Accepted Answer

To allow multiple style rules to apply to the same element

Answer

To ensure that only the most recent style rule is applied

Answer

To prevent style conflicts between different browsers

Answer

To improve the performance of web pages

Question 28

What is the purpose of using media queries in CSS?

Accepted Answer

To style web pages differently based on the device or screen size

Answer

To improve the accessibility of web pages

Answer

To reduce the file size of CSS style sheets

Answer

To prevent style conflicts between different browsers

Question 29

In CSS, which property is used to set the width of an HTML element?

Accepted Answer

width

Answer

height

Answer

padding

Answer

margin

Question 30

Which of the following is a universal selector in CSS?

Accepted Answer

*

Answer

&

Answer

>

Answer

.

Question 31

What CSS property determines the color of the background of an element?

Accepted Answer

background-color

Answer

color

Answer

bgcolor

Answer

text-color

Question 32

Which of the following is the correct syntax to set the height of an element to 100 pixels?

Accepted Answer

height: 100px;

Answer

height=100px

Answer

px height: 100;

Answer

100px height

Question 33

Which of the following is NOT a benefit of using CSS?

Accepted Answer

Increased page load time

Answer

Improved separation of concerns

Answer

Increased code readability

Answer

Enhanced accessibility features

Question 34

Which CSS property controls the color of text in an element?

Accepted Answer

color

Answer

background-color

Answer

font-size

Answer

font-weight

Question 35

Which CSS property determines the font used for an element?

Accepted Answer

font-family

Answer

text-font

Answer

font-style

Question 36

Which of the following is considered a poor practice when writing CSS code?

Accepted Answer

Using inline CSS styles

Answer

Using descriptive class names

Answer

Maintaining consistency in CSS rules

Answer

Following CSS standards

Question 37

What is the main reason for using the `!important` flag in CSS?

Accepted Answer

To override the usual cascading rules and force a particular style to be applied, regardless of other styles

Answer

To stop a style from being passed down to child elements

Answer

To make a style more specific, increasing its chances of being applied

Question 38

Which CSS property determines how a web element is displayed, allowing it to appear as a block, inline, or in a specific position?

Accepted Answer

Display

Answer

Float

Answer

Position

Answer

Margin

Question 39

What CSS property controls the size of text?

Accepted Answer

font-size

Answer

size

Answer

text-size

Answer

font-scale

Question 40

Which syntax is used to create a CSS class?

Accepted Answer

.class-name { }

Answer

class class-name { }

Answer

class = class-name { }

Answer

{ class-name }

Question 41

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

Accepted Answer

To determine the layout and visibility of elements.

Answer

To set the font family of elements.

Answer

To align text within elements.

Answer

To specify the background color of elements.

Question 42

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

Accepted Answer

line-height

Answer

line-spacing

Answer

text-spacing

Answer

letter-spacing

Question 43

Explain the concept of the "cascade" in CSS and how it resolves conflicts between rules.

Accepted Answer

The cascade determines the precedence of CSS rules based on specificity and inheritance. More specific rules override less specific ones, and inherited rules can be overridden by more specific rules.

Answer

The cascade is a way to group CSS rules together.

Question 44

Which of the following is a primary advantage of using CSS in web development?

Accepted Answer

Improved separation of concerns and maintainability.

Answer

Reduced file sizes.

Answer

Faster page loading times.

Question 45

Describe the difference between an inline style and an external style sheet.

Accepted Answer

Inline styles are applied directly to elements within HTML, while external style sheets are stored in separate files and applied to multiple elements.

Answer

Inline styles are more efficient than external style sheets.

Question 46

Which of the following is an example of a pseudo-class in CSS?

Accepted Answer

:hover

Answer

element

Answer

.class

Answer

#id

Question 47

Explain the concept of the "box model" in CSS.

Accepted Answer

The box model divides an element into four parts: content, padding, border, and margin, providing control over the size and spacing of elements.

Answer

The box model is a method for aligning elements within a layout.

Answer

The box model is a technique for creating responsive web designs.