Download Certified CSS3 Developer Practice Exam and more Exams Technology in PDF only on Docsity!
Question 1. Which part of a CSS rule specifies the HTML element(s) being styled? A) Property B) Selector C) Value D) Declaration block Answer: B Explanation: The selector targets specific HTML elements to apply styles to. Question 2. Which method allows you to apply a CSS rule directly to a single HTML element using the style attribute? A) Internal stylesheet B) Inline style C) External stylesheet D) CSS import Answer: B Explanation: Inline styles use the style attribute within an HTML element. Question 3. What is the correct HTML tag to link an external CSS file? A) B) C) Question 4. Which selector has the highest specificity? A) Type selector B) Class selector C) ID selector D) Universal selector Answer: C Explanation: ID selectors have higher specificity than class, type, or universal selectors. Question 5. What does the !important declaration do in CSS? A) Makes a property inherited B) Overrides all other declarations C) Comments out the rule D) Adds animation Answer: B Explanation: !important increases the priority of the property, overriding other declarations. Question 6. Which property is commonly inherited by child elements? A) Margin B) Border C) Color D) Padding Answer: C Explanation: Color is an inherited property, so child elements take their parent's color unless overridden. Question 7. Which selector selects all elements of any type?
B) ::first-line C) ::after D) :before Answer: A Explanation: ::before inserts content before the element's content. Question 11. In the CSS box model, which property defines the space between an element's border and adjacent elements? A) Padding B) Border C) Margin D) Content Answer: C Explanation: Margin is the space outside the border, separating elements. Question 12. Which property includes the border and padding in the element’s total width and height? A) box-type B) box-sizing: content-box C) box-sizing: border-box D) box-border Answer: C Explanation: box-sizing: border-box includes border and padding in width/height calculations. Question 13. What happens when adjacent vertical margins collapse? A) They add together
B) Only the larger margin is applied C) Only the smaller margin is applied D) Margins are ignored Answer: B Explanation: Collapsed margins use the larger of the two margins, not a sum. Question 14. Which value for the display property removes an element from the page layout? A) block B) inline C) none D) flex Answer: C Explanation: display: none removes the element from the layout, making it invisible. Question 15. Which display value allows elements to be inline but support width and height? A) block B) inline C) inline-block D) flex Answer: C Explanation: inline-block elements flow inline but can have width and height set. Question 16. What does the overflow: auto property do? A) Hides overflowing content B) Adds scrollbars if needed
D) display: float Answer: B Explanation: float: right moves the element to the right. Question 20. What is the main purpose of a clearfix technique? A) Add padding B) Clear floats C) Increase specificity D) Set background color Answer: B Explanation: Clearfix is used to clear floated elements so that their container correctly wraps them. Question 21. Which property sets the font of an element? A) text-family B) font-family C) typeface D) font-set Answer: B Explanation: font-family specifies the typeface for text. Question 22. What is the purpose of the @font-face rule? A) Link to external stylesheets B) Import custom fonts C) Set font size D) Define system fonts
Answer: B Explanation: @font-face allows you to use custom fonts by specifying their source. Question 23. Which property changes the size of text? A) font-size B) text-size C) font-weight D) size Answer: A Explanation: font-size sets the size of the font. Question 24. Which property changes text to uppercase, lowercase, or capitalize? A) text-transform B) text-case C) font-style D) text-decoration Answer: A Explanation: text-transform modifies the case of text. Question 25. Which property adds a line through, over, or under text? A) text-style B) font-decoration C) text-decoration D) underline Answer: C
Question 29. How do you set the background color of an element? A) color B) background-color C) border-color D) font-color Answer: B Explanation: background-color sets the element’s background color. Question 30. Which property adds a background image to an element? A) background-image B) image-background C) background-url D) img-background Answer: A Explanation: background-image specifies an image to use as the background. Question 31. What does background-repeat: no-repeat do? A) Repeats the image horizontally only B) Repeats the image vertically only C) Prevents the image from repeating D) Tiles the image Answer: C Explanation: no-repeat stops the background image from repeating.
Question 32. How do you position a background image in the bottom right? A) background-position: bottom right B) background-position: right bottom C) background-position: top left D) background-position: left top Answer: A Explanation: background-position: bottom right places the image in the bottom right corner. Question 33. Which property scales a background image to fit its container? A) background-size B) background-scale C) background-fit D) image-size Answer: A Explanation: background-size resizes the background image. Question 34. Which background-attachment value creates a parallax scrolling effect? A) fixed B) scroll C) local D) inherit Answer: A Explanation: background-attachment: fixed fixes the background, creating a parallax effect. Question 35. Which property is a shorthand for all background properties?
B) flex-direction C) flex-wrap D) flex-flow Answer: B Explanation: flex-direction sets row, column, row-reverse, or column-reverse. Question 39. What does flex-wrap: wrap do in Flexbox? A) Prevents wrapping B) Makes items wrap to next line C) Justifies items D) Aligns items to the start Answer: B Explanation: flex-wrap: wrap allows items to move to a new line if needed. Question 40. Which property aligns flex items along the main axis? A) align-items B) justify-content C) align-content D) align-self Answer: B Explanation: justify-content aligns items along the main axis. Question 41. Which property aligns flex items along the cross axis? A) flex-direction B) justify-content
C) align-items D) flex-wrap Answer: C Explanation: align-items controls flex item alignment on the cross axis. Question 42. Which property sets the order of a flex item? A) flex-order B) order C) flex-index D) flex-sequence Answer: B Explanation: order determines the visual order of flex items. Question 43. What does flex-grow control? A) The shrinking of flex items B) The growth of flex items relative to others C) The alignment of flex items D) The number of flex lines Answer: B Explanation: flex-grow sets how much space a flex item should take compared to others. Question 44. Which property allows individual flex items to override container alignment? A) align-content B) align-self C) justify-items
Answer: B Explanation: fr stands for fraction of remaining space in the grid container. Question 48. How do you place a grid item from column line 2 to 4? A) grid-column: 2- 4 B) grid-column-start: 2; grid-column-end: 4 C) grid-column: 2 / 4 D) grid-area: 2 / 4 Answer: C Explanation: grid-column: 2 / 4 places the item between lines 2 and 4. Question 49. Which property defines named grid template areas? A) grid-areas B) grid-template-names C) grid-template-areas D) area-template Answer: C Explanation: grid-template-areas creates named areas for semantic layout. Question 50. Which property sets the space between grid rows and columns? A) grid-space B) gap C) grid-gap D) Both B and C Answer: D
Explanation: gap (or grid-gap in older specs) sets space between grid rows and columns. Question 51. What does justify-items control in a grid container? A) Main axis alignment B) Cross axis alignment C) Horizontal alignment of items D) Vertical alignment only Answer: C Explanation: justify-items aligns grid items horizontally within their cells. Question 52. Which grid property aligns items vertically within their cells? A) justify-items B) align-items C) align-content D) grid-align Answer: B Explanation: align-items aligns items vertically within grid cells. Question 53. What is a two-dimensional layout system in CSS? A) Flexbox B) Grid C) Float D) Inline-block Answer: B Explanation: CSS Grid allows both rows and columns, making it two-dimensional.
Question 57. What does the @supports rule do? A) Imports stylesheets B) Applies styles based on browser support for a feature C) Selects an element D) Animates content Answer: B Explanation: @supports applies styles only if a CSS feature is supported. Question 58. Which attribute is most commonly used in the viewport meta tag for responsive design? A) content B) name C) width=device-width D) initial-scale Answer: C Explanation: width=device-width ensures the layout matches screen width. Question 59. How do you ensure images scale down on smaller screens but never exceed their container width? A) width: auto B) max-width: 100% C) min-width: 100% D) object-fit: cover Answer: B Explanation: max-width: 100% limits images to their container’s width.
Question 60. Which property controls how an image fits inside its box? A) image-fit B) fit-content C) object-fit D) background-fit Answer: C Explanation: object-fit manages how the content resizes within its container. Question 61. Which property is used to animate a change in property values smoothly? A) animation B) transition C) keyframes D) transform Answer: B Explanation: transition animates changes in property values. Question 62. Which property specifies the duration of a transition? A) transition-time B) transition-duration C) transition-delay D) animation-duration Answer: B Explanation: transition-duration sets the time the transition takes. Question 63. What does transition-timing-function control?
