CSS Questions & Answers – Miscellaneous CSS Constructs

CSS Questions and Answers focuses on “Miscellaneous CSS Constructs”.

Q 1. Which of the following represents a comment?
A. /!– comments –!/
B. /! comments !/
C. /* comments */
D. None of the mentioned

Show Answer

Answer:-c) /* comments */

Q 2. A single _____________ rule can be used in an external sheet to define character set encoding of the style rules and values.
A. @charset
B. @media
C. @font-face
D. None of the mentioned

Show Answer

Answer:-A. @charset

Explanation

None.

Q 3. An ___________ rule can be used to define style rules for multiple media types in a single embedded style sheet
A. @media
B. @charset
C. @font-face
D. None of the mentioned

Show Answer

Answer:-A. @media

Explanation

None.

Q 4. An ___________ rule is used to define a page block for printed styles.
A. @important
B. @page
C. @css
D. @html

Show Answer

Answer:-B. @page

Explanation

An @page rule is used to define a page block for printed styles. Generally, within this construct we see various CSS properties like size, page, and margin to control the dimensions of the page.

Q 5. Which of the following construct specifies that a style takes precedence over any different, conflicting styles?
A. !important

B.<style>

C. #id

D. @media

Show Answer

Answer:-A. !important

Explanation

None.

Q 6. Which of the following property specifies the size of the mask?
A. box-sizing
B. box-shadow
C. box-reflect
D. none of the mentioned

Show Answer

Answer:-C. box-reflect

Explanation

Syntax: -webkit-box-reflect: direction offset mask-box-image

Q 7. Which of the following property is used to control column element breaks after an associated element when flowing multicolumn text?
A. column-break
B. column-count
C. column-break-after
D. column-break-before
View Answer

Show Answer

Answer:-C. column-break-after

Explanation

Syntax: column-break-after: always | auto | avoid

Q 8. Which of the following property defines the gap between columns in a multicolumn text flow?
A. column-float
B. column-gap
C. column-flow
D. column-width

Show Answer

Answer:-B. column-gap

Explanation

Syntax: column-gap: length | normal

Q 9. Which of the following property defines the style, width, and color of the rule divider between
columns in a multicolumn text flow?
A. column-rule
B. column
C. column-change
D. column-check

Show Answer

Answer:-A. column-rule

Explanation

Syntax: column-rule: rule-width rule-style color

Q 10. Which of the following property defines the width of a rule between columns in a multicolumn text flow?
A. column-width
B. column-rule
C. column-float
D. column-rule-width

Show Answer

Answer:-D. column-rule-width

Explanation

Syntax: column-rule-width: non-negative length | medium | thick | thin | inherit

Q 11. Which of the following CSS at-rules is used to define custom animations?

A. @style

B. @transform

C. @keyframes

D. @animation

Show Answer

Answer:- C. @keyframes

Q 12. What is the correct syntax for defining a custom CSS property (CSS Variable)?

A. --main-color: blue;

B. $main-color: blue;

C. var-main-color: blue;

D. _main-color: blue;

Show Answer

Answer:-A. –main-color: blue;

Q 13. How do you use a custom CSS property named --primary-font?

A. font-family: var(--primary-font);

B. font-family: use(--primary-font);

C. font-family: get(--primary-font);

D. font-family: --primary-font;

Show Answer

Answer:-A. font-family: var(–primary-font);

Q 14. Which at-rule is used to embed custom fonts into a web page?

A. @font-import

B. @font-family

C. @font-face

D. @typography

Show Answer

Answer:-C. @font-face

Q 15. What property is used within @font-face to specify the URL of the font file?

A. src

B. url

C. source

D. location

Show Answer

Answer:-A. src

Q 16. Which pseudo-class is used to select an element that is currently active (e.g., being clicked)?**
A. `:hover`
B. `:active`
C. `:focus`
D. `:visited`

Show Answer

Answer:- B. `:active`

Q 17. Which pseudo-element is used to insert content before the content of an element?

A. ::before

B. ::first-child

C. ::start

D. ::prepend

Show Answer

Answer:-A. ::before

Q 18. What property is commonly used with ::before or ::after to insert content?

A. text

B. value

C. content

D. insert

Show Answer

Answer:-C. content

Q 19. The calc() CSS function is used for:

A. Performing mathematical calculations to determine CSS property values.

B. Calling JavaScript functions from CSS.

C. Calculating the total number of elements.

D. Defining custom animations.

Show Answer

Answer:-A. Performing mathematical calculations to determine CSS property values.

Q 20. Which of the following is an example of a valid calc() usage?

A. width: calc(100% - 20px);

B. width: calculate(100% - 20px);

C. width: 100% - 20px;

D. width: calc 100% - 20px;

Show Answer

Answer:-A. width: calc(100% – 20px);

Q 21. The var() CSS function is used to:

A. Define a new variable.

B. Access the value of a CSS custom property.

C. Check if a variable exists.

D. Declare a variable in JavaScript.

Show Answer

Answer:-B. Access the value of a CSS custom property.

Q 22. What does the min() CSS function do?

A. Returns the largest value from a comma-separated list of expressions.

B. Returns the smallest value from a comma-separated list of expressions.

C. Calculates the minimum width of an element.

D. Sets the minimum height of an element.

Show Answer

Answer:-B. Returns the smallest value from a comma-separated list of expressions.

Q 23. Which of these is a valid use of the clamp() CSS function?

A. font-size: clamp(1rem, 2vw, 3rem);

B. font-size: clamp(2vw);

C. font-size: clamp(1rem, 3rem);

D. font-size: clamp(1rem and 3rem);

Show Answer

Answer:-A. font-size: clamp(1rem, 2vw, 3rem);

Q 24. What is the purpose of the ::selection pseudo-element?

A. To style an element when it is clicked.

B. To style the currently selected text by the user.

C. To style the first letter of a paragraph.

D. To style a selected item in a list.

Show Answer

Answer:-B. To style the currently selected text by the user.

Q 25. Which CSS at-rule is used to apply styles based on device characteristics (like screen width)?

A. @style

B. @responsive

C. @media

D. @device

Show Answer

Answer:-C. @media

Q 26. What does em unit represent in CSS?

A. Always 16 pixels.

B. Relative to the font-size of the parent element.

C. Relative to the font-size of the root <html> element.

D. Relative to the viewport width.

Show Answer

Answer:-B. Relative to the font-size of the parent element.

Q 27. What does rem unit represent in CSS?

A. Relative to the font-size of the parent element.

B. Relative to the font-size of the root <html> element.

C. Always 16 pixels.

D. Relative to the viewport height.

Show Answer

Answer:-B. Relative to the font-size of the root element.

Q 28. Which CSS declaration resets all properties to their initial values?

A. all: initial;

B. reset: true;

C. clear: all;

D. default: values;

Show Answer

Answer:-A. all: initial;

Q 29. What is the purpose of the will-change CSS property?

A. To indicate to the browser that an element’s properties are about to change.

B. To prevent changes to an element’s properties.

C. To change the cursor property on hover.

D. To animate an element’s opacity.

Show Answer

Answer:- A. To indicate to the browser that an element’s properties are about to change.

Q 30. Which of the following is NOT a valid value for the cursor property?

A. pointer

B. text

C. grab

D. blink

Show Answer

Answer:-D. blink