CSS - Skill Assignment Quiz

Q1. Using an attribute selector, how would you select an < a > element with a " title " attribute?

  • a[title]{...}
  • a > title {...}
  • a.title {...}
  • a=title {...}

Q2. CSS grid and flexbox are now becoming a more popular way to create page layouts. However, floats are still commonly used, especially when working with an older code base, or if you need to support older browser version. What are two valid techniques used to clear floats?

  • Use the "clearfix hack" on the floated element and add a float to the parent element.
  • Use the overflow property on the floated element or the "clearfix hack" on either the floated or parent element.
  • Use the "clearfix hack" on the floated element or the overflow property on the parent element.
  • Use the "clearfix hack" on the parent element or use the overflow property with a value other than "visible."

Q3. When adding transparency styles, what is the difference between using the opacity property versus the background property with an rgba() value?

  • Opacity specifies the level of transparency of the child elements. Background with an rgba() value applies transparency to the background color only.
  • Opacity applies transparency to the background color only. Background with an rgba() value specifies the level of transparency of an element, as a whole, including its content.
  • Opacity specifies the level of transparency of an element, including its content. Background with an rgba() value applies transparency to the background color only.
  • Opacity applies transparency to the parent and child elements. Background with an rgba() value specifies the level of transparency of the parent element only.
  •  

Q4. What is true of block and inline elements? (Alternative: Which statement about block and inline elements is true?)

  • By default, block elements are the same height and width as the content container between their tags; inline elements span the entire width of its container.
  • By default, block elements span the entire width of its container; inline elements are the same height and width as the content contained between their tags.
  • A <nav> element is an example of an inline element. <header> is an example of a block element.
  • A <span> is an example of a block element. <div> is an example of an inline element.

Q5. Three of these choices are true about class selectors. Which is NOT true?

  • Multiple classes can be used within the same element.
  • The same class can be used multiple times per page.
  • Class selectors begin with a leading period
  • Classes can be used multiple times per page but not within the same element.

Q6. There are many properties that can be used to align elements and create page layouts such as float, position, flexbox and grid. Of these four properties, which one should be used to align a global navigation bar which stays fixed at the top of the page?

  • position
  • flexbox
  • grid
  • float

Q7. When using position: fixed, what will the element always be positioned relative to?

  • the closest element with position: relative
  • the viewport
  • the parent element
  • the wrapper element

Q8. What is the rem unit based on?

  • The rem unit is relative to the font-size of the p element.
  • You have to set the value for the rem unit by writing a declaration such as rem { font-size: 1 Spx; }
  • The rem unit is relative to the font-size of the containing (parent) element.
  • The rem unit is relative to the font-size of the root element of the page.

Q9. Which type of declaration will take precedence?

  • any declarations in user-agent stylesheets
  • important declarations in user stylesheets
  • normal declarations in author stylesheets
  • important declarations in author stylesheets

Q10. What selector and property would you use to scale an element to be 50% smaller on hover?

  • normal
  • italic
  • none
  • oblique

Q11. Which statement regarding icon fonts is true?

  • Icon fonts can be inserted only using JavaScript.
  • Icon fonts are inserted as inline images.
  • Icon fonts require browser extensions.
  • Icon fonts can be styled with typography-related properties such as font-size and color.

Q12. Which selector would select only internal links within the current page?

  • a[href="#"] {...}
  • a[href~="#"]
  • a[href^="#"]
  • a[href="#"]

Q13. What is the difference between the margin and padding properties?

  • Margin adds space around and inside of an element; padding adds space only inside of an element.
  • Margin adds space around an element; padding adds space inside of an element.
  • Margin adds a line around an element, padding adds space inside of an element.
  • Margin adds space inside of an element, padding adds space around an element.

Q14. What is not a valid way of declaring a padding value of 10 pixels on the top and bottom, and 0 pixels on the left and right?

  • padding: 10px 10px 0px 0px;
  • padding: 10px 0px;
  • padding: 10px 0;
  • padding: 10px 0px 10px 0px;

Q15. Which style places an element at a fixed location within its container?

  • position: absolute;
  • display: flex;
  • display: block;
  • float: left;

Q16. Which code would you use to absolutely position an element of the logo class?

  • .logo { position: absolute; left: 100px; top: 150px; }
  • .logo { position: absolute; margin-left: 100px; margin-top: 150px; }
  • .logo { position: absolute; padding-left: 100px; padding-top: 150px; }
  • .logo { position: absolute; left-padding: 100px; top-padding: 150px; }

Q17. Which statement is true of the single colon (:) or double colon (::) notations for pseudo-elements-for example, ::before and :before?

  • All browsers support single and double colons for new and older pseudo-elements. So you can use either but it is convention to use single colons for consistency.
  • In CSS3, the double colon notation (::) was introduced to create a consistency between pseudo-elements from pseudo-classes. For newer browsers, use the double colon notation. For IE8 and below, using single colon notation (:).
  • Only the new CSS3 pseudo-elements require the double colon notation while the CSS2 pseudo-elements do not.
  • In CSS3, the double colon notation (::) was introduced to differentiate pseudo-elements from pseudo-classes. However, modern browsers support both formats. Older browsers such as IE8 and below do not.

Q18. Which choice is not valid value for the font-style property?

  • All browsers support single and double colons for new and older pseudo-elements. So you can use either but it is convention to use single colons for consistency.
  • In CSS3, the double colon notation (::) was introduced to create a consistency between pseudo-elements from pseudo-classes. For newer browsers, use the double colon notation. For IE8 and below, using single colon notation (:).
  • Only the new CSS3 pseudo-elements require the double colon notation while the CSS2 pseudo-elements do not.
  • In CSS3, the double colon notation (::) was introduced to differentiate pseudo-elements from pseudo-classes. However, modern browsers support both formats. Older browsers such as IE8 and below do not.

Q19. When would you use the @font-face method?

  • to set the font size of the text
  • to load custom fonts into stylesheet
  • to change the name of the font declared in the font-family
  • to set the color of the text

Q20. In Chrome's Developer Tools view, where are the default styles listed?

  • under the User Agent Stylesheet section on the right
  • in the third panel under the Layout tab
  • under the HTML view on the left
  • in the middle panel

Q21. What is the recommended name you should give the folder that holds your project's images?

  • images
  • #images
  • Images
  • my images

Q21. What is the recommended name you should give the folder that holds your project's images?

  • images
  • #images
  • Images
  • my images

Q22. Pseudo-classes are used to _.

  • style the state of the selected element
  • insert presentational content
  • style a specific part of the selected element
  • style the elements using class selectors

Q23. Which answer is an example of a type selector (also sometimes referred to as an element selector)?

  • .header {...}
  • header {...}
  • #header {...}
  • header > h1 {...}

Q24. Which five style features are associated with the box model?

  • margin, padding, border, width, height
  • width, height, z-index, overflow, font size
  • margin, padding, font size, line height, border
  • font size, line height, letter spacing, width, height

Q25. To make the font size of an element one size smaller than the font size of the element's container, which style property would you apply?

  • font-size: reduce;
  • font-size: 8px;
  • font-size: -1em;
  • font-size: smaller;

Q26. To rotate an object 30 degrees counterclockwise, which style property would you apply?

  • transform: rotate(-30deg);
  • transform: rotate(30deg);
  • rotate: 30deg;
  • spin: 30deg;

Q27. Which choice uses the correct syntax for adding a hover pseudo class to < a > element?

  • a:hover {...}
  • a :hover {...}
  • a.hover {...}
  • a hover {...}

Q28. Which of the following CSS Property sets the stacking order of positioned elements?

  • y-index
  • z-index
  • x-index
  • all of the mentioned

Q29. The **____** represents the result of the cascade: it is the declared value that wins the cascade.

  • specified Value
  • actual value
  • computed value
  • cascaded value

 

Q30. What is the correct HTML for referring to an external style sheet?

  • <link rel="stylesheet" type="text/css" href="mystyle.css">
  • <stylesheet>mystyle.css</stylesheet>
  • <style src= "mystyle.css">
  • None of these.

Q31. In CSS, margin collapsing only happens with?

  • The horizontal margins of inline elements in the normal flow.
  • The vertical margins of block elements in the normal flow.
  • The horizontal margins of block elements in the normal flow.
  • The vertical margins of inline elements in the normal flow.

READY TO GET STARTED?

Are you ready

Let’s Make Something Amazing Together

Get Started

Need help? Contact our experts
Tell us about your project