CSS3, the latest evolution of Cascading Style Sheets, introduces enhanced features for web design while maintaining backward compatibility with CSS2. It is modular, meaning it’s divided into separate modules that can be implemented independently, allowing for faster development and broader browser support.
Key Features:
Selectors and Pseudo-Classes: Advanced selectors like :nth-child(), :not(), and attribute selectors enable more precise targeting of HTML elements. Pseudo-elements such as ::before and ::after allow for dynamic content insertion.
Box Model and Layout: The box-sizing property simplifies layout design by including padding and borders in an element’s total width and height. Flexbox (Flexible Box Layout) and Grid Layout modules provide powerful tools for responsive and adaptive designs.
Colors and Backgrounds: Support for RGBA, HSLA, and HSL color formats, along with multiple backgrounds, gradients (linear and radial), and border-radius for rounded corners.
Text and Fonts: Features like text-shadow, word-wrap, and @font-face for custom web fonts, improving typography and readability.
Transitions and Animations: Smooth transitions with the transition property and keyframe-based animations using @keyframes, enabling interactive effects without JavaScript.
2D and 3D Transformations: Properties like transform (rotate, scale, skew) and 3D effects (rotateX, rotateY) for creating depth and visual interest.
Media Queries: Essential for responsive design, allowing styles to adapt based on device characteristics like screen size, resolution, and orientation.
Table of contents
- Part 1: OnlineExamMaker AI quiz maker – Make a free quiz in minutes
- Part 2: 20 CSS3 quiz questions & answers
- Part 3: Automatically generate quiz questions using AI Question Generator
Part 1: OnlineExamMaker AI quiz maker – Make a free quiz in minutes
Still spend a lot of time in editing questions for your next CSS3 assessment? OnlineExamMaker is an AI quiz maker that leverages artificial intelligence to help users create quizzes, tests, and assessments quickly and efficiently. You can start by inputting a topic or specific details into the OnlineExamMaker AI Question Generator, and the AI will generate a set of questions almost instantly. It also offers the option to include answer explanations, which can be short or detailed, helping learners understand their mistakes.
What you may like:
● Automatic grading and insightful reports. Real-time results and interactive feedback for quiz-takers.
● The exams are automatically graded with the results instantly, so that teachers can save time and effort in grading.
● LockDown Browser to restrict browser activity during quizzes to prevent students searching answers on search engines or other software.
● Create certificates with personalized company logo, certificate title, description, date, candidate’s name, marks and signature.
Automatically generate questions using AI
Part 2: 20 CSS3 quiz questions & answers
or
1. What is the correct syntax for a CSS3 attribute selector that selects elements with a title attribute starting with “img”?
A. [title^=”img”]
B. [title~=”img”]
C. [title*=”img”]
D. [title$=”img”]
Answer: A
Explanation: The ^= operator in CSS3 selects elements where the attribute value starts with the specified string.
2. Which CSS3 property is used to add a shadow around an element’s frame?
A. box-shadow
B. text-shadow
C. shadow-box
D. element-shadow
Answer: A
Explanation: The box-shadow property in CSS3 applies one or more shadows to the element’s box.
3. What does the CSS3 flexbox property “flex-direction” control?
A. The alignment of items
B. The direction of the flex items
C. The wrapping of items
D. The growth of items
Answer: B
Explanation: The flex-direction property sets the direction of the flexible items inside a flex container, such as row or column.
4. In CSS3, which value for the border-radius property would create a circle from a square element?
A. 25%
B. 50%
C. 100%
D. 0%
Answer: C
Explanation: Setting border-radius to 100% on a square element makes it a circle by rounding all corners fully.
5. What is the purpose of the CSS3 @media rule?
A. To define keyframes for animations
B. To apply styles based on device characteristics
C. To import external stylesheets
D. To set global styles
Answer: B
Explanation: The @media rule is used in CSS3 to include a block of CSS properties only if a certain condition, like screen size, is true.
6. Which CSS3 property allows you to rotate an element?
A. transform: rotate()
B. transition: rotate()
C. animation: rotate()
D. matrix: rotate()
Answer: A
Explanation: The transform property with the rotate() function in CSS3 is used to rotate an element around a fixed point.
7. What does the CSS3 property “opacity” do?
A. Changes the color of an element
B. Sets the transparency level
C. Adds a gradient background
D. Controls element visibility
Answer: B
Explanation: The opacity property in CSS3 specifies the transparency of an element, with 1 being fully opaque and 0 being fully transparent.
8. In CSS3, how do you create a gradient background?
A. background: gradient(linear, …)
B. background-image: linear-gradient(…)
C. background: linear-gradient(…)
D. gradient: background(linear, …)
Answer: C
Explanation: The linear-gradient() function can be used directly in the background property to create a gradient effect in CSS3.
9. Which CSS3 selector targets an element that is the first child of its parent?
A. :first-of-type
B. :first-child
C. :nth-child(1)
D. :only-child
Answer: B
Explanation: The :first-child pseudo-class selects elements that are the first child of their parent element.
10. What is the default value of the CSS3 box-sizing property?
A. border-box
B. content-box
C. padding-box
D. margin-box
Answer: B
Explanation: The default value of box-sizing in CSS3 is content-box, which means width and height apply only to the content.
11. In CSS3, which property is used to create a multi-column layout?
A. columns
B. column-count
C. multi-columns
D. layout-columns
Answer: B
Explanation: The column-count property in CSS3 specifies the number of columns an element should be divided into.
12. What does the CSS3 transition property require to work?
A. A keyframe animation
B. A change in property value
C. A media query
D. A pseudo-class
Answer: B
Explanation: The transition property in CSS3 smooths the change between two property values over a specified duration.
13. Which CSS3 unit is relative to the font size of the root element?
A. em
B. rem
C. px
D. %
Answer: B
Explanation: The rem unit in CSS3 is relative to the font-size of the root (html) element, making it useful for scalable designs.
14. How do you define a keyframe animation in CSS3?
A. @keyframes name { … }
B. @animation name { … }
C. keyframe: name { … }
D. define-animation: name { … }
Answer: A
Explanation: The @keyframes rule in CSS3 is used to define the behavior of an animation at various points.
15. In CSS3, what is the function of the overflow property?
A. To set the background overflow
B. To handle content that exceeds an element’s box
C. To overflow text outside borders
D. To increase element size
Answer: B
Explanation: The overflow property specifies what happens if content overflows an element’s box, such as hidden or scroll.
16. Which CSS3 property allows you to style the scrollbar?
A. scrollbar-style
B. ::-webkit-scrollbar
C. overflow-scrollbar
D. scroll-bar
Answer: B
Explanation: In CSS3, the ::-webkit-scrollbar pseudo-element is used to style the scrollbar in WebKit-based browsers.
17. What is the correct way to use a CSS3 variable?
A. var(–variable)
B. $variable
C. :variable
D. custom-var(variable)
Answer: A
Explanation: CSS3 custom properties are accessed using the var() function, like var(–main-color).
18. In CSS3, how do you apply a filter effect to an element?
A. filter: blur(5px)
B. effect: blur(5px)
C. transform: filter(blur(5px))
D. style: blur(5px)
Answer: A
Explanation: The filter property in CSS3 applies graphical effects like blur or grayscale to an element.
19. Which CSS3 feature allows elements to be positioned based on the viewport?
A. position: fixed
B. position: absolute
C. position: relative
D. position: static
Answer: A
Explanation: The position: fixed property in CSS3 positions an element relative to the viewport, so it stays in place during scrolling.
20. What does the CSS3 property “object-fit” control?
A. The fitting of background images
B. How an image or video is resized to fit its container
C. The fit of text in a box
D. Object alignment
Answer: B
Explanation: The object-fit property in CSS3 specifies how the contents of a replaced element, like an img or video, should be resized to fit its box.
or
Part 3: Automatically generate quiz questions using OnlineExamMaker AI Question Generator
Automatically generate questions using AI