Download CodeHS Advanced HTML and CSS Ultimate Exam and more Exams Technology in PDF only on Docsity!
Exam
Question 1. Which HTML5 element is most appropriate for wrapping a site’s main navigation links? A) B) C) D) Answer: C Explanation: The element semantically represents a block of navigation links, improving accessibility and SEO. Question 2. In a multi‑file project, which relative path correctly links from /about/team.html to a shared stylesheet located at /css/style.css? A) B) C) D) Answer: A Explanation: ../ moves up one directory from /about to the project root, then into css to reach style.css. Question 3. What is the primary security concern when embedding an external site with an ? A) Cross‑origin resource sharing (CORS) B) Clickjacking C) SQL injection D) File‑path traversal
Exam
Answer: B Explanation: can be used for clickjacking; the sandbox attribute or X‑Frame‑Options header mitigates the risk. Question 4. Which CSS selector selects every that is a direct child of a
element? A) p > span B) p span C) p + span D) p ~ span Answer: A Explanation: The child combinator (>) selects only immediate children, not deeper descendants. Question 5. Which of the following is a correct way to apply the DRY principle to shared button styles? A) Assign the same ID to all buttons. B) Create a .btn class with common properties and add extra classes for variations. C) Write separate CSS rules for each button element. D) Use inline styles on every button. Answer: B Explanation: A reusable .btn class groups shared declarations; additional classes modify specific aspects without repetition. Question 6. The selector ul > li:first-child targets: A) Every in the document.
## Exam
Question 9. To create a clearfix without using a utility class, which CSS rule is commonly added to the parent container? A) overflow: hidden; B) float: left; C) display: inline-block; D) position: relative; Answer: A Explanation: overflow: hidden creates a new block formatting context, causing the container to enclose its floated children. Question 10. Which positioning scheme keeps an element fixed to the viewport even when the page scrolls? A) static B) relative C) absolute D) fixed Answer: D Explanation: fixed positions the element relative to the viewport, so it does not move with page scrolling. Question 11. Which Flexbox property aligns items vertically in the center of a container with flex- direction: row? A) justify-content: center; B) align-items: center;
Exam
C) flex-wrap: wrap; D) align-self: stretch; Answer: B Explanation: With a row direction, align-items controls the cross‑axis (vertical) alignment. Question 12. Which pseudo‑class matches an element that is the third child of its parent? A) :nth-child(3) B) :third-child C) :child(3) D) :nth-of-type(3) Answer: A Explanation: :nth-child(3) selects any element that is the third child, regardless of type. Question 13. Which CSS property creates a smooth transition when a button’s background color changes on hover? A) transition: background 0.3s ease; B) animation: bgChange 0.3s; C) filter: blur(0.3s); D) transform: scale(0.3); Answer: A Explanation: transition specifies the property, duration, and timing function for a smooth change. Question 14. In a @keyframes rule, which keyword defines the state of the animation at the end of its timeline?
Exam
Question 17. When using relative units, which combination best ensures a layout adapts to both width and height of the viewport? A) px and em B) % and vw/vh C) pt and cm D) rem and ex Answer: B Explanation: % responds to parent dimensions, while vw and vh scale directly with viewport width and height. Question 18. Which CSS selector targets every element of type “checkbox” that is checked? A) input[type=checkbox]:checked B) input:checked[type=checkbox] C) checkbox:checked D) input.checked Answer: A Explanation: The attribute selector identifies the type, and :checked applies to the checked state. Question 19. Which of the following media query conditions applies styles only when the device is in portrait orientation? A) @media (orientation: landscape) { … } B) @media (max-width: 600px) { … } C) @media (orientation: portrait) { … }
Exam
D) @media (min-height: 800px) { … } Answer: C Explanation: orientation: portrait specifically matches portrait mode devices. Question 20. In Bootstrap’s grid system, how many columns does a .col-md-6 occupy on a medium‑size screen? A) 3 B) 6 C) 9 D) 12 Answer: B Explanation: Bootstrap’s grid has 12 columns; col‑md‑ 6 spans half the width, i.e., 6 columns. Question 21. Which CSS property would you use to hide overflow content while still allowing scrolling? A) visibility: hidden; B) display: none; C) overflow: scroll; D) overflow: hidden; Answer: C Explanation: overflow: scroll adds scrollbars when content exceeds the element’s dimensions. Question 22. What does the box-sizing: border-box; rule change about the box model? A) Padding and border are added outside the defined width and height.
Exam
Question 25. Which CSS selector will match an element that has both .highlight and .large classes? A) .highlight.large B) .highlight .large C) .highlight > .large D) .highlight + .large Answer: A Explanation: A compound selector without whitespace selects elements that simultaneously possess both classes. Question 26. Which property is used to create a drop‑shadow effect on text? A) filter: drop-shadow(2px 2px 5px #000); B) box-shadow: 2px 2px 5px #000; C) text-shadow: 2px 2px 5px #000; D) shadow: 2px 2px 5px #000; Answer: C Explanation: text-shadow applies a shadow to the glyphs of inline text. Question 27. In CSS, which selector has the highest specificity? A) #main .nav li a B) .article p.intro C) ul li a:hover D) * Answer: A
Exam
Explanation: ID selectors ( #main ) outrank class and element selectors, giving the rule the greatest specificity. Question 28. Which HTML5 element should be used to contain the copyright notice of a page? A) B) C) D) Answer: A Explanation: is intended for site‑wide or page‑level footnotes, including copyright information. Question 29. What is the effect of transform: translateX(50%); on an element with position: absolute; and left: 0;? A) Moves the element 50 px to the right. B) Moves the element 50 % of its own width to the right. C) Moves the element 50 % of its containing block’s width to the right. D) No movement occurs. Answer: C Explanation: With absolute positioning, translateX(50%) shifts the element by 50 % of its containing block’s width. Question 30. Which CSS rule will make every third list item in an ordered list have a red background? A) ol li:nth-child(3n) { background: red; } B) ol li:third-child { background: red; }
Exam
Question 33. Which CSS property can be used to create a responsive image that scales down but never exceeds its original size? A) max-width: 100%; B) width: 100vw; C) height: auto; D) object-fit: cover; Answer: A Explanation: max-width: 100% prevents the image from growing beyond its intrinsic width while allowing it to shrink. Question 34. When using Flexbox, which property allows a child element to take up remaining space while others keep their natural size? A) flex-grow: 1; B) flex-shrink: 0; C) align-self: stretch; D) order: 2; Answer: A Explanation: flex-grow specifies how much a flex item should expand relative to the rest of the flex line. Question 35. Which pseudo‑class matches a link that the user has already visited? A) :link B) :active C) :visited D) :hover
Exam
Answer: C Explanation: :visited applies styles to hyperlinks that the browser records as previously visited. Question 36. Which CSS declaration will make an element invisible but still occupy its original space and respond to pointer events? A) visibility: hidden; B) display: none; C) opacity: 0; D) clip: rect(0,0,0,0); Answer: C Explanation: opacity: 0 renders the element fully transparent while preserving layout and interactivity. Question 37. In a responsive design, which media query targets devices with a viewport width of 768 px or less? A) @media (max-width: 768px) { … } B) @media (min-width: 768px) { … } C) @media (width: 768px) { … } D) @media (max-device-width: 768px) { … } Answer: A Explanation: max-width matches viewports up to the specified width, inclusive. Question 38. Which HTML element should be used for a side column containing related links and advertisements? A)
Exam
Question 41. Which HTML attribute allows an to be displayed without a border in older browsers? A) frameborder="0" B) border="none" C) style="border:none;" D) no‑border Answer: A Explanation: The frameborder attribute (value 0) disables the default border in legacy browsers. Question 42. Which CSS property is used to create a subtle inner glow effect on an input field when it receives focus? A) box-shadow: inset 0 0 5px #aaa; B) filter: glow(5px); C) text-shadow: 0 0 5px #aaa; D) border: 2px solid #aaa; Answer: A Explanation: box-shadow with the inset keyword creates an inner shadow, often used for focus styling. Question 43. Which of the following values for the display property removes an element from the layout and also prevents it from being read by screen readers? A) none B) inline-block C) flex D) grid
Exam
Answer: A Explanation: display: none; excludes the element from rendering and from the accessibility tree. Question 44. Which CSS selector selects all
elements that are the first child of their parent? A) p:first-child B) :first-of-type p C) p:first-of-type D) :first-child p Answer: A Explanation: :first-child applies to the element itself when it is the first child; combined with p it selects only
that satisfy that condition. Question 45. Which attribute on a element tells the browser that the linked stylesheet is for print media only? A) media="print" B) type="print/css" C) rel="print" D) target="print" Answer: A Explanation: The media attribute specifies the intended rendering medium; media="print" applies the stylesheet only when printing. Question 46. When using CSS Grid, which property defines the number of columns in a container? A) grid-template-columns
## Exam
Question 49. Which CSS selector targets any element that has an attribute data-role with the exact value "admin"? A) [data-role="admin"] B) [data-role='admin'] C) [data-role=admin] D) All of the above Answer: D Explanation: All three syntaxes are valid; double quotes, single quotes, or no quotes (if the value contains no spaces) work. Question 50. Which property would you use to ensure that text inside a does not wrap to the next line? A) white-space: nowrap; B) overflow: hidden; C) text-overflow: ellipsis; D) word-break: break-all; Answer: A Explanation: white-space: nowrap; prevents line breaks within the element. Question 51. In a CSS animation, which property controls how many times the animation repeats? A) animation-iteration-count B) animation-duration C) animation-delay D) animation-direction
Exam
Answer: A Explanation: animation-iteration-count specifies the number of cycles (e.g., infinite). Question 52. Which HTML element should be used to embed a video from an external source such as YouTube? A) B) C) D) Answer: C Explanation: YouTube provides an embed URL that is placed inside an . Question 53. Which CSS property can be used to make the entire page use a dark theme without altering individual component colors? A) filter: invert(1); B) background: #000; color: #fff; C) mix-blend-mode: difference; D) none of the above Answer: A Explanation: filter: invert(1); inverts all colors, effectively creating a dark‑mode effect. Question 54. Which of the following is a valid way to group multiple selectors that share the same declarations? A) h1, h2, h3 { margin:0; }
