100 Questions Test your CSS Knowledge

100 Questions Test your CSS Knowledge

Get the PDF https://basescripts.com/css-quiz-100-questions-and-answers

Welcome to the Ultimate CSS Quiz!

Are you ready to put your CSS skills to the test? This quiz is designed to challenge your knowledge of Cascading Style Sheets (CSS) and help you solidify your understanding of web design fundamentals. Whether you're a beginner looking to practice your skills or an experienced developer seeking to refresh your memory, this quiz has something for everyone.

What to Expect:

  • 100 Multiple-Choice Questions: Each question is crafted to cover a wide range of CSS topics, from basic styling and layout techniques to advanced concepts like Flexbox, Grid, and animations.
  • Detailed Explanations: After each question, you’ll receive a thorough explanation of the correct answer, helping you understand the concepts more deeply and correct any misconceptions.
  • Practical Examples: Many questions are based on real-world scenarios, ensuring that you can apply your knowledge to actual web development projects.

Who Should Take This Quiz?

  • Web Developers: Perfect for those who want to assess and improve their CSS proficiency.
  • Students: A great way to review for exams or prepare for a job interview in web development.
  • Hobbyists: If you're just getting started with web design, this quiz will help you get familiar with the essentials.

How to Use This Quiz:

  1. Read Each Question Carefully: Take your time to consider each option before making your selection.
  2. Check Your Answers: After answering, review the explanation to reinforce your understanding.
  3. Learn and Improve: Use the detailed explanations to fill in any gaps in your knowledge.

Ready to Start?

Click the start button, and let's dive into the world of CSS! Good luck, and have fun coding!

Question 1:

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

  • A) To define the stacking order of elements.
  • B) To change the transparency of an element.
  • C) To control the size of an element.
  • D) To set the color of an element.

Answer: A) To define the stacking order of elements.

Explanation: The z-index property in CSS determines the stacking order of elements. Elements with a higher z-index value will appear on top of those with a lower value. This property only works on positioned elements (elements that have a position value of relative, absolute, fixed, or sticky).




Question 2:

Which of the following CSS properties can be used to center a block element horizontally within its container?

  • A) margin-left: auto; margin-right: auto;
  • B) text-align: center;
  • C) vertical-align: middle;
  • D) float: center;

Answer: A) margin-left: auto; margin-right: auto;

Explanation: To center a block element horizontally within its container, you can set margin-left and margin-right to auto. This makes the left and right margins take up the remaining space equally, centering the element. The text-align property is used to center inline elements (like text) within a block element, while vertical-align and float: center; are incorrect.




Question 3:

Which of the following is the correct syntax to apply a CSS class to an HTML element?

  • A) <div class="classname">
  • B) <div style="classname">
  • C) <div css="classname">
  • D) <div class=classname>

Answer: A) <div class="classname">

Explanation: In HTML, the class attribute is used to apply a CSS class to an element. The correct syntax is <div class="classname">, where classname is the name of the CSS class. The other options are incorrect syntax.




Question 4:

What is the effect of setting the display property to none for an element?

  • A) The element becomes invisible but still takes up space.
  • B) The element is hidden and does not take up any space.
  • C) The element becomes visible but with no content.
  • D) The element’s visibility is controlled by JavaScript.

Answer: B) The element is hidden and does not take up any space.

Explanation: When the display property is set to none, the element is hidden, and it does not take up any space in the document layout. This differs from visibility: hidden;, which hides the element but still occupies space.




Question 5:

Which of the following pseudo-classes targets the first child element within a parent?

  • A) :first-child
  • B) :nth-child(1)
  • C) :first-of-type
  • D) :last-child

Answer: A) :first-child

Explanation: The :first-child pseudo-class targets the first child element within a parent, regardless of its type. :nth-child(1) also targets the first child but is more specific, while :first-of-type targets the first child of a specific type. :last-child targets the last child within a parent.




Question 6:

What is the main purpose of using flexbox in CSS?

  • A) To create grid-based layouts.
  • B) To align elements vertically and horizontally within a container.
  • C) To set element opacity.
  • D) To define background images.

Answer: B) To align elements vertically and horizontally within a container.

Explanation: Flexbox is a CSS layout model that allows for the easy alignment of elements both vertically and horizontally within a container. It’s particularly useful for creating responsive layouts. Flexbox is not used for grid-based layouts (which is the role of CSS Grid) or for setting opacity or background images.




Question 7:

Which CSS property is used to control the space between the content of an element and its border?

  • A) margin
  • B) padding
  • C) border-spacing
  • D) spacing

Answer: B) padding

Explanation: The padding property in CSS controls the space between the content of an element and its border. Margin controls the space outside the border, while border-spacing is specific to spacing between borders in table elements. Spacing is not a valid CSS property.




Question 8:

Which of the following units is relative to the font size of the root element (<html>) in CSS?

  • A) em
  • B) rem
  • C) %
  • D) vh

Answer: B) rem

Explanation: The rem unit is relative to the font size of the root element, typically the <html> element. In contrast, the em unit is relative to the font size of the element it is applied to. The % unit is relative to the parent element’s dimensions, and vh is relative to the viewport height.




Question 9:

Which of the following selectors is used to apply styles to an element based on its attributes?

  • A) Class selector
  • B) ID selector
  • C) Universal selector
  • D) Attribute selector

Answer: D) Attribute selector

Explanation: The attribute selector in CSS allows you to select elements based on the presence or value of their attributes. For example, [type="text"] would select all elements with a type attribute equal to "text". Class and ID selectors are used for selecting elements based on their class or ID, while the universal selector applies to all elements.




Question 10:

What does the box-sizing property in CSS do when set to border-box?

  • A) Includes only the content in the element’s width and height.
  • B) Includes padding and borders within the element’s width and height.
  • C) Excludes padding from the element’s width and height.
  • D) Adjusts the box model to be inline.

Answer: B) Includes padding and borders within the element’s width and height.

Explanation: When box-sizing is set to border-box, the width and height of an element include its padding and borders, meaning the content area will shrink to accommodate these within the specified dimensions. This is opposed to the default content-box, where padding and borders are added outside the specified width and height.




Question 11:

Which of the following CSS properties is used to make text bold?

  • A) font-style
  • B) font-weight
  • C) text-decoration
  • D) text-transform

Answer: B) font-weight

Explanation: The font-weight property in CSS is used to control the boldness or thickness of the text. The value bold can be used to make the text bold, and numeric values (like 400, 700) can specify different levels of boldness. Font-style is for italicizing text, text-decoration for underlining, and text-transform for changing the case of the text.




Question 12:

What is the default value of the position property in CSS?

  • A) absolute
  • B) relative
  • C) static
  • D) fixed

Answer: C) static

Explanation: The default value of the position property in CSS is static. This means the element is positioned according to the normal flow of the document. Unlike absolute, relative, or fixed, a static positioned element is not affected by the top, bottom, left, or right properties.




Question 13:

Which of the following properties is used to control the space between lines of text?

  • A) letter-spacing
  • B) text-indent
  • C) line-height
  • D) word-spacing

Answer: C) line-height

Explanation: The line-height property in CSS controls the amount of space between lines of text. Letter-spacing affects the space between letters, word-spacing adjusts the space between words, and text-indent controls the indentation of the first line of a paragraph.




Question 14:

Which CSS property is used to create space between the element's border and its neighboring elements?

  • A) padding
  • B) margin
  • C) border-spacing
  • D) outline

Answer: B) margin

Explanation: The margin property in CSS is used to create space around elements, outside of any defined borders. It affects the distance between the element and its neighboring elements. Padding creates space inside the border, while border-spacing applies to spacing between borders in table elements.




Question 15:

Which of the following CSS properties is used to change the text color of an element?

  • A) color
  • B) text-color
  • C) font-color
  • D) background-color

Answer: A) color

Explanation: The color property in CSS is used to change the text color of an element. There is no text-color or font-color property in CSS, and background-color is used to change the background color of an element, not the text.




Question 16:

What does the float property do in CSS?

  • A) Aligns elements to the left or right of their container.
  • B) Centers elements horizontally.
  • C) Clears the float on an element.
  • D) Adjusts the stacking order of elements.

Answer: A) Aligns elements to the left or right of their container.

Explanation: The float property in CSS is used to position an element to the left or right within its container, allowing text and inline elements to wrap around it. It’s often used to create layouts, such as floating an image within a block of text. Float does not center elements or adjust stacking order.




Question 17:

Which of the following values for the display property will make an element an inline-block?

  • A) inline
  • B) block
  • C) inline-block
  • D) none

Answer: C) inline-block

Explanation: The inline-block value of the display property allows an element to behave like a block element but still flow inline with other elements. This means the element respects width and height settings but remains part of the inline flow. Inline elements do not respect width and height, and block elements take up the full width available.




Question 18:

Which of the following properties is used to change the background color of an element?

  • A) background
  • B) color
  • C) background-color
  • D) border-color

Answer: C) background-color

Explanation: The background-color property in CSS is used to set the background color of an element. The background shorthand property can set multiple background properties at once, including background-color. The color property changes the text color, and border-color changes the color of an element's border.




Question 19:

Which CSS property can be used to make a rounded border around an element?

  • A) border-radius
  • B) border-style
  • C) border-width
  • D) outline-radius

Answer: A) border-radius

Explanation: The border-radius property in CSS is used to create rounded corners on an element's border. The value can be a specific length or percentage, determining the roundness of the corners. Border-style defines the style of the border (solid, dashed, etc.), border-width sets the width of the border, and outline-radius does not exist.




Question 20:

Which of the following selectors has the highest specificity?

  • A) Class selector (e.g., .classname)
  • B) ID selector (e.g., #idname)
  • C) Type selector (e.g., div)
  • D) Universal selector (e.g., *)

Answer: B) ID selector (e.g., #idname)

Explanation: In CSS, the specificity of selectors determines which rules are applied when multiple rules could apply to an element. An ID selector (#idname) has the highest specificity among the options provided, followed by a class selector, type selector, and finally, the universal selector, which has the lowest specificity.




Question 21:

What is the purpose of the overflow property in CSS?

  • A) To specify how content that overflows an element's box is handled.
  • B) To control the visibility of an element.
  • C) To set the position of an element.
  • D) To determine the stacking order of elements.

Answer: A) To specify how content that overflows an element's box is handled.

Explanation: The overflow property in CSS controls how content that overflows the boundaries of an element’s box is handled. The possible values include visible, hidden, scroll, and auto, which determine whether the overflow content is visible, hidden, scrollable, or automatically handled based on the content.




Question 22:

Which of the following values is valid for the position property?

  • A) relative
  • B) center
  • C) inline
  • D) float

Answer: A) relative

Explanation: The position property in CSS can have several valid values, including static, relative, absolute, fixed, and sticky. Relative positions an element relative to its normal position. Center, inline, and float are not valid values for the position property.




Question 23:

Which of the following units is relative to the width of the viewport in CSS?

  • A) em
  • B) rem
  • C) vw
  • D) px

Answer: C) vw

Explanation: The vw unit in CSS is relative to the width of the viewport, with 1 vw equaling 1% of the viewport width. The em and rem units are relative to font sizes, and px is an absolute unit based on pixels.




Question 24:

Which of the following CSS properties is used to change the font style to italic?

  • A) font-weight
  • B) font-style
  • C) font-variant
  • D) text-transform

Answer: B) font-style

Explanation: The font-style property in CSS is used to set the style of the text, with the most common values being normal, italic, and oblique. Font-weight controls boldness, font-variant is for small-caps, and text-transform is for changing the case of text.




Question 25:

Which of the following properties is used to add shadows to text in CSS?

  • A) text-decoration
  • B) box-shadow
  • C) text-shadow
  • D) font-shadow

Answer: C) text-shadow

Explanation: The text-shadow property in CSS is used to add shadow effects to text. The box-shadow property applies shadows to the entire element (including its border), while text-decoration adds underlines, overlines, or line-throughs to the text. There is no font-shadow property.




Question 26:

What is the default value of the flex-direction property in a flex container?

  • A) row
  • B) column
  • C) row-reverse
  • D) column-reverse

Answer: A) row

Explanation: The default value of the flex-direction property in a flex container is row. This means the flex items are laid out in a row, horizontally, in the same direction as the text direction (left to right by default). Column arranges items vertically, while row-reverse and column-reverse reverse the order of the items.




Question 27:

Which CSS property can be used to create space between words in a text?

  • A) letter-spacing
  • B) line-height
  • C) text-indent
  • D) word-spacing

Answer: D) word-spacing

Explanation: The word-spacing property in CSS controls the amount of space between words in a text. Letter-spacing controls the space between individual letters, line-height controls the space between lines of text, and text-indent indents the first line of a paragraph.




Question 28:

Which CSS property controls the visibility of an element without affecting the document layout?

  • A) opacity
  • B) display
  • C) visibility
  • D) z-index

Answer: C) visibility

Explanation: The visibility property in CSS controls the visibility of an element. When set to hidden, the element is invisible but still takes up space in the document layout. This differs from display: none;, which hides the element and removes it from the layout.




Question 29:

Which of the following properties is used to define the spacing between the border and the content of an element?

  • A) margin
  • B) padding
  • C) border-spacing
  • D) outline

Answer: B) padding

Explanation: The padding property in CSS defines the space between the content of an element and its border. Margin creates space outside the border, border-spacing is used in tables, and outline is used to draw a line outside the border, but does not affect the element’s layout.




Question 30:

What does the display: inline-block; property do in CSS?

  • A) Combines the characteristics of both inline and block elements.
  • B) Aligns an element to the center of its container.
  • C) Makes an element float to the left or right.
  • D) Hides an element from the view.

Answer: A) Combines the characteristics of both inline and block elements.

Explanation: The display: inline-block; property allows an element to be formatted as a block element while remaining in the inline flow. This means the element can have width and height set, but it will not start on a new line like a block element would. Display: inline-block; does not align or float elements, nor does it hide them.




Question 31:

Which of the following properties is used to control the transparency of an element?

  • A) opacity
  • B) visibility
  • C) filter
  • D) background

Answer: A) opacity

Explanation: The opacity property in CSS controls the transparency of an element, with values ranging from 0 (completely transparent) to 1 (completely opaque). Visibility only hides or shows elements, filter can apply visual effects like blur, and background is used for background settings.




Question 32:

Which of the following is not a valid CSS length unit?

  • A) cm
  • B) px
  • C) em
  • D) sp

Answer: D) sp

Explanation: The sp unit is not a valid CSS length unit. Valid CSS length units include cm (centimeters), px (pixels), em (relative to the font size of the element), and others like rem, %, pt, etc.




Question 33:

Which CSS property is used to specify the space between the border of an element and its content?

  • A) padding
  • B) margin
  • C) border-spacing
  • D) line-height

Answer: A) padding

Explanation: The padding property in CSS is used to create space between the content of an element and its border. Margin is for space outside the border, border-spacing is specific to table elements, and line-height controls the space between lines of text.




Question 34:

What is the purpose of the @media rule in CSS?

  • A) To import external CSS files.
  • B) To apply styles based on the device or screen size.
  • C) To define animations in CSS.
  • D) To create keyframes for CSS animations.

Answer: B) To apply styles based on the device or screen size.

Explanation: The @media rule in CSS is used for media queries, allowing you to apply specific styles based on the device type, screen size, orientation, and other characteristics. This is essential for responsive design. @import is used to import external CSS, and @keyframes is used for animations.




Question 35:

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

  • A) font-family
  • B) font-style
  • C) font-weight
  • D) font-size

Answer: D) font-size

Explanation: The font-size property in CSS is used to control the size of the text in an element. Font-family changes the font type, font-style adjusts the style (e.g., italic), and font-weight controls the boldness.




Question 36:

Which of the following properties can be used to add space between individual letters?

  • A) line-height
  • B) word-spacing
  • C) letter-spacing
  • D) text-indent

Answer: C) letter-spacing

Explanation: The letter-spacing property in CSS is used to control the space between individual letters in a text. Line-height is for spacing between lines, word-spacing is for spacing between words, and text-indent is used to indent the first line of a paragraph.




Question 37:

Which CSS property is used to specify the width of the border around an element?

  • A) border-style
  • B) border-width
  • C) border-color
  • D) outline-width

Answer: B) border-width

Explanation: The border-width property in CSS specifies the thickness of the border around an element. Border-style defines the style (solid, dashed, etc.), border-color defines the color, and outline-width is used for the outline, not the border.




Question 38:

Which CSS property is used to create a flexible layout model that allows items to align and distribute space within a container?

  • A) grid
  • B) flex
  • C) display
  • D) float

Answer: B) flex

Explanation: The flex value of the display property in CSS creates a flexbox layout, which allows items within a container to align and distribute space efficiently. The grid property is for grid layouts, display is the property itself, and float is used for floating elements.




Question 39:

Which of the following pseudo-elements is used to insert content before an element's content?

  • A) :before
  • B) ::before
  • C) :after
  • D) ::after

Answer: B) ::before

Explanation: The ::before pseudo-element in CSS is used to insert content before the actual content of an element. It’s often used for adding decorative content like icons. The ::after pseudo-element inserts content after the element's content.




Question 40:

Which of the following values for the cursor property will change the cursor to a pointer (hand) icon?

  • A) crosshair
  • B) text
  • C) pointer
  • D) default

Answer: C) pointer

Explanation: The pointer value of the cursor property changes the cursor to a pointer (hand) icon, often used for clickable elements like links and buttons. Crosshair shows a cross cursor, text shows an I-beam cursor, and default shows the default arrow cursor.




Question 41:

Which CSS property is used to specify the alignment of inline elements within a block container?

  • A) text-align
  • B) vertical-align
  • C) align-items
  • D) justify-content

Answer: A) text-align

Explanation: The text-align property in CSS specifies the alignment of inline content (like text) within a block container. It can be set to left, right, center, or justify. Vertical-align is for aligning inline elements relative to the baseline, and align-items and justify-content are used in flexbox layouts.




Question 42:

Which CSS property is used to define the space around an element's content, but inside its border?

  • A) margin
  • B) padding
  • C) border-spacing
  • D) outline-spacing

Answer: B) padding

Explanation: The padding property in CSS defines the space between an element's content and its border. Margin is the space outside the border, border-spacing is for spacing in tables, and outline-spacing is not a standard CSS property.




Question 43:

What is the purpose of the position: fixed; property in CSS?

  • A) To fix an element's position relative to its parent element.
  • B) To remove the element from the document flow and fix its position relative to the viewport.
  • C) To stack elements on top of each other.
  • D) To float an element within a container.

Answer: B) To remove the element from the document flow and fix its position relative to the viewport.

Explanation: The position: fixed; property in CSS fixes an element's position relative to the viewport, meaning it stays in the same place even when the page is scrolled. The element is removed from the normal document flow. Relative and absolute positions, on the other hand, are relative to parent elements.




Question 44:

Which of the following properties controls the space between the text characters in an element?

  • A) word-spacing
  • B) letter-spacing
  • C) text-indent
  • D) line-height

Answer: B) letter-spacing

Explanation: The letter-spacing property in CSS controls the space between individual text characters. Word-spacing adjusts space between words, text-indent indents the first line of text, and line-height controls the space between lines of text.




Question 45:

Which of the following properties is used to control the order of flex items in a flex container?

  • A) flex-direction
  • B) flex-wrap
  • C) order
  • D) justify-content

Answer: C) order

Explanation: The order property in CSS is used to control the order of flex items in a flex container. By default, items have an order value of 0, but this can be changed to reorder items. Flex-direction controls the direction of the flex items, flex-wrap controls wrapping behavior, and justify-content aligns items along the main axis.




Question 46:

Which of the following properties is used to define how flex items are aligned along the cross axis?

  • A) justify-content
  • B) align-items
  • C) flex-direction
  • D) align-content

Answer: B) align-items

Explanation: The align-items property in CSS aligns flex items along the cross axis (perpendicular to the main axis) of the flex container. Justify-content aligns items along the main axis, flex-direction sets the direction of the flex items, and align-content aligns the flex lines when there's extra space on the cross axis.




Question 47:

Which of the following CSS properties can be used to create a responsive layout that adapts to different screen sizes?

  • A) display: block;
  • B) position: absolute;
  • C) @media
  • D) float: left;

Answer: C) @media

Explanation: The @media rule in CSS is used for media queries, which allow you to create responsive layouts that adapt to different screen sizes, orientations, and resolutions. Display: block;, position: absolute;, and float: left; are properties that affect layout but don't create responsive designs on their own.




Question 48:

Which of the following pseudo-classes selects an element that does not have any children?

  • A) :first-child
  • B) :last-child
  • C) :empty
  • D) :only-child

Answer: C) :empty

Explanation: The :empty pseudo-class in CSS selects elements that do not have any children, including text nodes. :First-child and :last-child select the first and last child elements, respectively, and :only-child selects an element that is the only child of its parent.




Question 49:

Which CSS property is used to specify the indentation of the first line in a text block?

  • A) line-height
  • B) letter-spacing
  • C) text-indent
  • D) word-spacing

Answer: C) text-indent

Explanation: The text-indent property in CSS is used to indent the first line of a text block. It can be set to a specific length or percentage. Line-height, letter-spacing, and word-spacing control spacing between lines, letters, and words, respectively.




Question 50:

Which of the following properties is used to control the flow of text within an element when the text overflows its container?

  • A) text-overflow
  • B) overflow
  • C) word-wrap
  • D) white-space

Answer: A) text-overflow

Explanation: The text-overflow property in CSS specifies how to handle text that overflows its container. It often works in conjunction with overflow and white-space properties. Word-wrap allows long words to be broken and wrapped onto the next line.




Question 51:

What does the z-index property control in CSS?

  • A) The opacity of an element.
  • B) The stacking order of elements.
  • C) The position of an element.
  • D) The display property of an element.

Answer: B) The stacking order of elements.

Explanation: The z-index property in CSS controls the stacking order of elements along the z-axis. Elements with a higher z-index value appear above those with a lower value. This property is effective only on positioned elements (relative, absolute, fixed, or sticky).




Question 52:

Which of the following properties is used to control the visibility of an element?

  • A) display
  • B) opacity
  • C) visibility
  • D) z-index

Answer: C) visibility

Explanation: The visibility property in CSS controls whether an element is visible or hidden. When set to hidden, the element is invisible but still takes up space in the layout. Opacity controls transparency, display affects layout and visibility, and z-index controls stacking order.




Question 53:

Which CSS property is used to control the wrapping of text within an element?

  • A) word-spacing
  • B) text-indent
  • C) white-space
  • D) word-wrap

Answer: D) word-wrap

Explanation: The word-wrap property in CSS is used to control the wrapping of text within an element, allowing long words to be broken and wrapped onto the next line if necessary. White-space controls how whitespace is handled, word-spacing adjusts space between words, and text-indent indents the first line of text.




Question 54:

Which CSS property is used to apply shadows to an element's box?

  • A) text-shadow
  • B) box-shadow
  • C) outline
  • D) border-shadow

Answer: B) box-shadow

Explanation: The box-shadow property in CSS applies shadows to an element's box, including its padding and border areas. Text-shadow applies shadows to text, outline is for outlining elements, and border-shadow is not a valid CSS property.




Question 55:

Which of the following properties is used to specify whether an element should be visible or hidden?

  • A) opacity
  • B) display
  • C) visibility
  • D) z-index

Answer: C) visibility

Explanation: The visibility property in CSS specifies whether an element should be visible (visible) or hidden (hidden). Unlike display: none;, which removes the element from the layout, visibility: hidden; hides the element but still occupies space.




Question 56:

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

  • A) letter-spacing
  • B) line-height
  • C) text-indent
  • D) word-spacing

Answer: B) line-height

Explanation: The line-height property in CSS controls the space between lines of text. It can be set to a specific length, a percentage, or a unitless number that multiplies the font size. Letter-spacing, text-indent, and word-spacing control spacing between letters, text indentations, and words, respectively.




Question 57:

Which CSS property is used to specify the background image of an element?

  • A) background-color
  • B) background-image
  • C) background-repeat
  • D) background-position

Answer: B) background-image

Explanation: The background-image property in CSS is used to specify an image as the background of an element. Background-color sets the background color, background-repeat controls how the image is repeated, and background-position specifies the position of the image.




Question 58:

Which of the following CSS properties can be used to set the width of an element to fit its content?

  • A) width: 100%;
  • B) width: auto;
  • C) width: fit-content;
  • D) width: max-content;

Answer: C) width: fit-content;

Explanation: The width: fit-content; property in CSS sets the width of an element to fit its content, without exceeding the parent container's width. Width: auto; sets the width based on the element's content, but may stretch to fill the container, and width: 100%; makes the element take up the full width of the parent container.




Question 59:

Which CSS property can be used to make an element appear on top of other elements?

  • A) z-index
  • B) opacity
  • C) visibility
  • D) position

Answer: A) z-index

Explanation: The z-index property in CSS is used to control the stacking order of elements along the z-axis, allowing one element to appear on top of another. This property works only on elements with a specified position (relative, absolute, fixed, or sticky).




Question 60:

Which CSS property is used to specify the spacing between characters in a text block?

  • A) word-spacing
  • B) letter-spacing
  • C) text-indent
  • D) line-height

Answer: B) letter-spacing

Explanation: The letter-spacing property in CSS controls the space between individual characters in a text block. Word-spacing adjusts the space between words, text-indent controls indentation of the first line, and line-height sets the space between lines of text.




Question 61:

Which CSS property is used to control how an image repeats within an element's background?

  • A) background-size
  • B) background-position
  • C) background-repeat
  • D) background-color

Answer: C) background-repeat

Explanation: The background-repeat property in CSS controls how a background image is repeated within an element. The possible values include repeat, repeat-x, repeat-y, and no-repeat. Background-size adjusts the size of the image, background-position specifies its position, and background-color sets the background color.




Question 62:

Which CSS property is used to define how a background image should be positioned within an element?

  • A) background-color
  • B) background-position
  • C) background-size
  • D) background-repeat

Answer: B) background-position

Explanation: The background-position property in CSS specifies the initial position of the background image within an element. The position can be defined using keywords (top, bottom, left, right, center), lengths, or percentages. Background-color, background-size, and background-repeat control other aspects of the background.




Question 63:

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

  • A) border-style
  • B) border-color
  • C) border-width
  • D) border

Answer: D) border

Explanation: The border property in CSS is a shorthand for setting the border's width, style, and color in a single declaration. You can also specify these properties individually using border-style, border-color, and border-width.




Question 64:

Which CSS property is used to define the spacing around an element's border?

  • A) padding
  • B) margin
  • C) border-spacing
  • D) outline-spacing

Answer: B) margin

Explanation: The margin property in CSS defines the space outside an element's border, creating space between the element and neighboring elements. Padding is the space inside the border, border-spacing is for spacing between table cells, and outline-spacing is not a valid CSS property.




Question 65:

Which CSS property is used to apply rounded corners to an element?

  • A) border-radius
  • B) border-style
  • C) border-width
  • D) border-color

Answer: A) border-radius

Explanation: The border-radius property in CSS is used to apply rounded corners to an element's border. The value can be a length or a percentage, determining the curvature of the corners. Border-style, border-width, and border-color define other aspects of the border but do not affect its shape.




Question 66:

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

  • A) box-shadow
  • B) text-shadow
  • C) border-shadow
  • D) outline-shadow

Answer: A) box-shadow

Explanation: The box-shadow property in CSS is used to apply shadow effects around an element's box, including its padding and border areas. Text-shadow is for applying shadows to text, and border-shadow and outline-shadow are not valid CSS properties.




Question 67:

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

  • A) opacity
  • B) visibility
  • C) display
  • D) z-index

Answer: A) opacity

Explanation: The opacity property in CSS controls the transparency of an element, with values ranging from 0 (completely transparent) to 1 (completely opaque). Visibility controls whether an element is visible or hidden, display controls the layout and visibility, and z-index controls stacking order.




Question 68:

Which CSS property is used to set the width of an element relative to its container?

  • A) width: auto;
  • B) width: 100%;
  • C) width: fit-content;
  • D) width: max-content;

Answer: B) width: 100%;

Explanation: The width: 100%; property in CSS sets the width of an element to match the full width of its parent container. Width: auto; sets the width based on the content, fit-content; sets it to fit the content, and max-content; sets it to the maximum width required by the content.




Question 69:

Which CSS property is used to control the alignment of block elements within a flex container?

  • A) justify-content
  • B) align-items
  • C) align-self
  • D) flex-direction

Answer: A) justify-content

Explanation: The justify-content property in CSS controls the alignment of flex items along the main axis within a flex container. The possible values include flex-start, flex-end, center, space-between, and space-around. Align-items controls alignment along the cross axis, align-self overrides alignment for individual items, and flex-direction sets the direction of the flex items.




Question 70:

Which CSS property is used to control how text is aligned within a block-level element?

  • A) text-align
  • B) vertical-align
  • C) align-items
  • D) justify-content

Answer: A) text-align

Explanation: The text-align property in CSS controls the horizontal alignment of text within a block-level element. Possible values include left, right, center, and justify. Vertical-align is used for aligning inline elements relative to the baseline, and align-items and justify-content are used in flexbox layouts.




Question 71:

Which CSS property is used to define the space between the content of an element and its border?

  • A) margin
  • B) padding
  • C) border-spacing
  • D) outline-spacing

Answer: B) padding

Explanation: The padding property in CSS defines the space between the content of an element and its border. This space is inside the border, unlike margin, which creates space outside the border. Border-spacing applies to spacing in tables, and outline-spacing is not a standard CSS property.




Question 72:

Which CSS property is used to specify how content that overflows an element's box is handled?

  • A) visibility
  • B) overflow
  • C) z-index
  • D) display

Answer: B) overflow

Explanation: The overflow property in CSS specifies how content that overflows an element's box is handled. The possible values include visible, hidden, scroll, and auto. Visibility controls visibility, z-index controls stacking order, and display controls the layout.




Question 73:

Which of the following properties is used to change the cursor's appearance when hovering over an element?

  • A) pointer
  • B) cursor
  • C) hover
  • D) mouse

Answer: B) cursor

Explanation: The cursor property in CSS is used to change the cursor's appearance when hovering over an element. The value pointer changes the cursor to a hand icon, often used for clickable elements. Hover, mouse, and pointer are not valid CSS properties for this purpose.




Question 74:

Which of the following CSS properties is used to apply styles to an element based on its attributes?

  • A) Class selector
  • B) ID selector
  • C) Attribute selector
  • D) Universal selector

Answer: C) Attribute selector

Explanation: The attribute selector in CSS allows you to select elements based on the presence or value of their attributes. For example, [type="text"] would select all elements with a type attribute equal to "text." Class and ID selectors are used for selecting elements based on their class or ID, while the universal selector applies to all elements.




Question 75:

Which CSS property is used to control the display of elements in a grid layout?

  • A) flex
  • B) grid
  • C) display
  • D) float

Answer: B) grid

Explanation: The grid value of the display property in CSS creates a grid layout, allowing elements to be placed into rows and columns. The flex property creates a flexbox layout, display is the property itself, and float is used to float elements.




Question 76:

Which of the following values is valid for the position property in CSS?

  • A) absolute
  • B) center
  • C) inline
  • D) float

Answer: A) absolute

Explanation: The position property in CSS can have several valid values, including static, relative, absolute, fixed, and sticky. Absolute positions an element relative to its nearest positioned ancestor. Center, inline, and float are not valid values for the position property.




Question 77:

Which CSS property is used to control the order in which elements are layered on top of one another?

  • A) display
  • B) visibility
  • C) z-index
  • D) opacity

Answer: C) z-index

Explanation: The z-index property in CSS controls the stacking order of elements along the z-axis, determining which elements are layered on top of others. This property works only on positioned elements (relative, absolute, fixed, or sticky). Display, visibility, and opacity affect other aspects of the element but not the stacking order.




Question 78:

Which CSS property is used to control the alignment of flex items along the cross axis within a flex container?

  • A) justify-content
  • B) align-items
  • C) flex-direction
  • D) align-content

Answer: B) align-items

Explanation: The align-items property in CSS aligns flex items along the cross axis (perpendicular to the main axis) of the flex container. Justify-content aligns items along the main axis, flex-direction sets the direction of the flex items, and align-content aligns the flex lines when there's extra space on the cross axis.




Question 79:

Which CSS property is used to control the width of an element's border?

  • A) border-color
  • B) border-style
  • C) border-width
  • D) border-radius

Answer: C) border-width

Explanation: The border-width property in CSS specifies the thickness of an element's border. Border-style defines the style of the border (solid, dashed, etc.), border-color defines the color, and border-radius creates rounded corners.




Question 80:

Which CSS property is used to control the height of an element's line box?

  • A) line-height
  • B) height
  • C) padding
  • D) margin

Answer: A) line-height

Explanation: The line-height property in CSS controls the height of an element's line box, which is the area that includes the content and any padding or spacing between lines of text. Height controls the overall height of the element, padding adds space inside the border, and margin adds space outside the border.




Question 81:

Which CSS property is used to specify the space between the borders of adjacent cells in a table?

  • A) padding
  • B) margin
  • C) border-spacing
  • D) cell-spacing

Answer: C) border-spacing

Explanation: The border-spacing property in CSS specifies the space between the borders of adjacent cells in a table. Padding is the space inside the cell's border, margin adds space outside the element, and cell-spacing is not a valid CSS property.




Question 82:

Which CSS property is used to control the display of an element as a block or inline element?

  • A) visibility
  • B) opacity
  • C) display
  • D) position

Answer: C) display

Explanation: The display property in CSS controls how an element is displayed on the page, including whether it is a block or inline element. Display: block; makes the element a block-level element, while display: inline; makes it inline. Visibility, opacity, and position affect other aspects of the element's appearance but not its display type.




Question 83:

Which CSS property is used to control the flow of text within an element when the text overflows its container?

  • A) text-overflow
  • B) overflow
  • C) word-wrap
  • D) white-space

Answer: A) text-overflow

Explanation: The text-overflow property in CSS specifies how to handle text that overflows its container. It often works in conjunction with overflow and white-space properties. Word-wrap allows long words to be broken and wrapped onto the next line.




Question 84:

Which CSS property is used to specify the alignment of block elements within their parent container?

  • A) text-align
  • B) align-items
  • C) justify-content
  • D) margin

Answer: D) margin

Explanation: The margin property in CSS can be used to align block elements within their parent container by adding space around them. For example, margin: 0 auto; centers a block element horizontally. Text-align is used for inline content, align-items and justify-content are used in flexbox layouts.




Question 85:

Which CSS property is used to control the alignment of text within an element?

  • A) text-align
  • B) align-items
  • C) justify-content
  • D) line-height

Answer: A) text-align

Explanation: The text-align property in CSS controls the horizontal alignment of text within an element. Possible values include left, right, center, and justify. Align-items and justify-content are used for alignment in flexbox layouts, while line-height controls spacing between lines of text.




Question 86:

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

  • A) display
  • B) opacity
  • C) visibility
  • D) z-index

Answer: C) visibility

Explanation: The visibility property in CSS controls whether an element is visible or hidden. When set to hidden, the element is invisible but still takes up space in the document layout. This differs from display: none;, which hides the element and removes it from the layout.




Question 87:

Which CSS property is used to control the wrapping of text within an element?

  • A) word-spacing
  • B) text-indent
  • C) white-space
  • D) word-wrap

Answer: D) word-wrap

Explanation: The word-wrap property in CSS is used to control the wrapping of text within an element, allowing long words to be broken and wrapped onto the next line if necessary. White-space controls how whitespace is handled, word-spacing adjusts space between words, and text-indent indents the first line of a paragraph.




Question 88:

Which CSS property is used to apply shadows to an element's box?

  • A) text-shadow
  • B) box-shadow
  • C) outline
  • D) border-shadow

Answer: B) box-shadow

Explanation: The box-shadow property in CSS applies shadows to an element's box, including its padding and border areas. Text-shadow applies shadows to text, outline is for outlining elements, and border-shadow is not a valid CSS property.




Question 89:

Which CSS property is used to set the width of an element relative to its container?

  • A) width: auto;
  • B) width: 100%;
  • C) width: fit-content;
  • D) width: max-content;

Answer: B) width: 100%;

Explanation: The width: 100%; property in CSS sets the width of an element to match the full width of its parent container. Width: auto; sets the width based on the content, fit-content; sets it to fit the content, and max-content; sets it to the maximum width required by the content.




Question 90:

Which CSS property is used to control the alignment of block elements within a flex container?

  • A) justify-content
  • B) align-items
  • C) align-self
  • D) flex-direction

Answer: A) justify-content

Explanation: The justify-content property in CSS controls the alignment of flex items along the main axis within a flex container. The possible values include flex-start, flex-end, center, space-between, and space-around. Align-items controls alignment along the cross axis, align-self overrides alignment for individual items, and flex-direction sets the direction of the flex items.




Question 91:

Which CSS property is used to control the alignment of inline elements within a block container?

  • A) text-align
  • B) vertical-align
  • C) align-items
  • D) justify-content

Answer: A) text-align

Explanation: The text-align property in CSS specifies the alignment of inline content (like text) within a block container. It can be set to left, right, center, or justify. Vertical-align is for aligning inline elements relative to the baseline, and align-items and justify-content are used in flexbox layouts.




Question 92:

Which CSS property is used to define the space between the content of an element and its border?

  • A) margin
  • B) padding
  • C) border-spacing
  • D) outline-spacing

Answer: B) padding

Explanation: The padding property in CSS defines the space between the content of an element and its border. This space is inside the border, unlike margin, which creates space outside the border. Border-spacing applies to spacing in tables, and outline-spacing is not a standard CSS property.




Question 93:

Which CSS property is used to specify how content that overflows an element's box is handled?

  • A) visibility
  • B) overflow
  • C) z-index
  • D) display

Answer: B) overflow

Explanation: The overflow property in CSS specifies how content that overflows an element's box is handled. The possible values include visible, hidden, scroll, and auto. Visibility controls visibility, z-index controls stacking order, and display controls the layout.




Question 94:

Which CSS property is used to control the alignment of text within an element?

  • A) text-align
  • B) align-items
  • C) justify-content
  • D) line-height

Answer: A) text-align

Explanation: The text-align property in CSS controls the horizontal alignment of text within an element. Possible values include left, right, center, and justify. Align-items and justify-content are used for alignment in flexbox layouts, while line-height controls spacing between lines of text.




Question 95:

Which CSS property is used to control the alignment of flex items along the cross axis within a flex container?

  • A) justify-content
  • B) align-items
  • C) flex-direction
  • D) align-content

Answer: B) align-items

Explanation: The align-items property in CSS aligns flex items along the cross axis (perpendicular to the main axis) of the flex container. Justify-content aligns items along the main axis, flex-direction sets the direction of the flex items, and align-content aligns the flex lines when there's extra space on the cross axis.




Question 96:

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

  • A) display
  • B) opacity
  • C) visibility
  • D) z-index

Answer: C) visibility

Explanation: The visibility property in CSS controls whether an element is visible or hidden. When set to hidden, the element is invisible but still takes up space in the document layout. This differs from display: none;, which hides the element and removes it from the layout.




Question 97:

Which CSS property is used to control the flow of text within an element when the text overflows its container?

  • A) text-overflow
  • B) overflow
  • C) word-wrap
  • D) white-space

Answer: A) text-overflow

Explanation: The text-overflow property in CSS specifies how to handle text that overflows its container. It often works in conjunction with overflow and white-space properties. Word-wrap allows long words to be broken and wrapped onto the next line.




Question 98:

Which CSS property is used to specify the alignment of block elements within their parent container?

  • A) text-align
  • B) align-items
  • C) justify-content
  • D) margin

Answer: D) margin

Explanation: The margin property in CSS can be used to align block elements within their parent container by adding space around them. For example, margin: 0 auto; centers a block element horizontally. Text-align is used for inline content, align-items and justify-content are used in flexbox layouts.




Question 99:

Which CSS property is used to control the alignment of text within an element?

  • A) text-align
  • B) align-items
  • C) justify-content
  • D) line-height

Answer: A) text-align

Explanation: The text-align property in CSS controls the horizontal alignment of text within an element. Possible values include left, right, center, and justify. Align-items and justify-content are used for alignment in flexbox layouts, while line-height controls spacing between lines of text.




Question 100:

Which CSS property is used to control the alignment of inline elements within a block container?

  • A) text-align
  • B) vertical-align
  • C) align-items
  • D) justify-content

Answer: A) text-align

Explanation: The text-align property in CSS specifies the alignment of inline content (like text) within a block container. It can be set to left, right, center, or justify. Vertical-align is for aligning inline elements relative to the baseline, and align-items and justify-content are used in flexbox layouts.


Gafer abdelwhab

?????? ???????? ??????? ???????

3 个月

???? ??????

要查看或添加评论,请登录

Laurence Svekis ?的更多文章

社区洞察

其他会员也浏览了