CSS Multiple Choice Questions


Q. When you need a list with no bullets, what approach should you use?

list-unstyled

Q. By default, flex elements are inline level elements?

false

Q. To force the space between the elements to be the same, you use?

nav-justified

Q. Relative unit values are relative to the _____ of another property?

length

Q. When checking browser support, you are actually looking at _____.?

rendering engines

Q. ___ are fixed units, while ___ are relative units, which means that font size will be relative to a device’s default size.

Pixels; ems

Q. Saturation represents the amount of _____, with 100% being fully saturated and 0% being grayscale.

color

Q. Fixed elements are considered to be absolutely positioned, but they’re always positioned relative to the _____.

active viewport

Q. What is the correct way to define a variable in Sass?

A. $primary-color: #888
B. @primary-color: #888
C. %primary-color: #888
D. #primary-color: #888

Answer: Option A. $primary-color: #888

Explanation: Following is the correct way to define a variable in SASS, $primary-color: #888;

SASS Variables allow you to define a value once and use it in multiple places. Variables begin with dollar signs and are set like CSS properties. You can change the value of the variable in one place, and all instances where it is used will be changed, too.

Q. What are the data types that SassScript supports?

A. Numbers
B. Strings of texts
C. Colors D. All of these

Answer: Option D

Q. @debug directive detects the errors and displays the SassScript expression values to the standard error output stream.

a. True b. False

Answer: a.  True

Explanation: The above statement is true. The @debug directive detects the errors and displays the SassScript expression values to the standard error output stream.

Q. Which of the following directive is used to share rules and relationships between selectors?

a. @extend
b. @media
c. @extend
d. None of the above

Answer: a. @extend

Explanation: The @extend directive is used to share rules and relationships between selectors. This directive extends all another class styles in one class and can also apply its own specific styles.

Q. _______ directive is a collection of nested rules, which is able to make style block at root of the document.

a. @at-root
b. @media
c. @extend
d. None of the above

Answer: a. @at-root

Explanation: The @at-root directive is a collection of nested rules, which is able to make style block at root of the document. This selector excludes the selector by default. By using @at-root, we can move the style outside of nested directive.

Q. Which of the following directive displays the SassScript expression value as fatal error?

a. @error
b. @warn c. @at-root d. None of the above

Answer: a. @error

Explanation: The @error directive displays the SassScript expression value as fatal error.

Q. In ____ directive, a variable is defined which contains the value of each item in a list.

a. @if
b. @each
c. @for
d. @while

Answer: b. @each

Explanation: In @each directive, a variable is defined which contains the value of each item in a list.

Q. Which of the following directive allows you to generate styles in a loop?

a. @while
b. @if
c. @for
d. @each

Answer: c. @for

Explanation: The @for directive allows you to generate styles in a loop. The @for directive comes in two forms. The first option is @for $var from <start> through <end> which starts at <start> and loops “through” each iteration and ends at <end>. And the second option is @for $var from <start> to <end> which starts at <start> and loops through each iteration “to” <end> and stops. Once the directive hits the <end>, it stops the looping process and does not evaluate the loop that one last time.

Q. The SassScript values can be taken as arguments in mixins, which is given when mixin is included and available as variable within the mixin.

a. True
b. False

Answer: a. True

Explanation: The above statement is true. The SassScript values can be taken as arguments in mixins, which is given when mixin is included and available as variable within the mixin. Mixins allow creating a group of styles, which are reusable throughout your stylesheet without any need to recreation of non-semantic classes.

Q. What is the use of the @include directive in Sass?

a. Used to define the mixin.
b. Used to include the mixins in the document.
c. All of the above
d. None of the above

Answer: b. Used to include the mixins in the document.

Explanation: In Sass, the @include directive is used to include the mixins in the document. The styles defined by the mixin can be included into the current rule.

Q. What is the use of the @return directive in Sass?

a. Used to define the mixin.
b. Used to include the mixins in the document.
c. Used to call the return value for the function.
d. None of the above

Answer: c. Used to call the return value for the function.

Explanation: In Sass, the @return directive is used to call the return value for the function.

Q. Which of the following operator provides the path for the CSS stylesheets in the application.

a. :filename
b. :load_paths
c. :css_location
d. :template_location

Answer: c. :css_location

Explanation: The :css_location operator provides the path for the CSS stylesheets in the application.

Q. “sass input.scss output.css” command is used to run the SASS code from the command line.

a. True
b. False

Answer: a. True

ul li a
a
.example a
div a

Q. Using an attribute selector, how would you select an <a> element with a “title” attribute?

Note: an alternative to the question below.

Q. What is the CSS selector for an <a> tag containing the title attribute?

Note: an alternative to the question above.

Q. 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?

Q. What element(s) do the following selectors match to?

1) .nav {
  ...;
}
2) nav {
  ...;
}
3) #nav {
  ...;
}

  1. An element with an ID of "nav"
  2. A nav element
  3. An element with a class of "nav"

  1. An element with an class of "nav"
  2. A nav element
  3. An element with a id of "nav"

  1. An element with an class of "nav"
  2. A nav element
  3. An div with a id of "nav"

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

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

Q. CSS grid introduced a new length unit, fr, to create flexible grid tracks. Referring to the code sample below, what will the widths of the three columns be?

.grid {
  display: grid;
  width: 500px;
  grid-template-columns: 50px 1fr 2fr;
}

Note: an alternative to the question below.

Q. If the width of the container is 500 pixels, what would the width of the three columns be in this layout?

.grid { display: grid; grid-template-columns: 50px 1fr 2fr; }

Note: an alternative to the question above.

Q. What is the line-height property primarily used for?

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

Note: an alternative to the question below.

Q. What is not true about class selectors?

Note: an alternative to the question above.

Q. 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?

Q1. In the shorthand example below, which individual background properties are represented?

background: blue url(image.jpg) no-repeat scroll 0px 0px;

.example {
  color: yellow;
}
ul li a {
  color: blue;
}
ul a {
  color: green;
}
a {
  color: red;
}

<ul>
  <li><a href="#" class="example">link</a></li>
  <li>list item</li>
  <li>list item</li>
</ul>

Q. When elements overlap, they are ordered on the z-axis (i.e., which element covers another). The z-index property can be used to specify the z-order of overlapping elements. Which set of statements about the z-index property are true?

Note: an alternative to the question below.

Q. When elements within a container overlap, the z-index property can be used to indicate how those items are stacked on top of each other. Which set of statements is true?

Note: an alternative to the question above.

Q. What is the difference between the following line-height settings?

line-height: 20px;
line-height: 2;

Q. In the following example, what color will paragraph one and paragraph two be? (Alternative: In this example, what color will paragraphs one and two be?)

<section>
  <p>paragraph one</p>
</section>

<p>paragraph two</p>

section p {
  color: red;
}
section + p {
  color: blue;
}

Q. What are three valid ways of adding CSS to an HTML page?

Q. Which of the following is true of the SVG image format? (Alternative: Which statement about the SVG image format is true?)

Q. In the example below, when will the color pink be applied to the anchor element?

a:active {
  color: pink;
}

Q. To change the color of an SVG using CSS, which property is used?

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

Q. By default, a background image will repeat _

Q. When using media queries, media types are used to target a device category. Which choice lists current valid media types?

Q. How would you make the first letter of every paragraph on the page red?

Q. In this example, what is the selector, property, and value?

p {
  color: #000000;
}

Q. What is the rem unit based on?

Q. Which choice would give a block element rounded corners?

Official doc:

Q. In the following media query example, what conditions are being targeted?

@media (min-width: 1024px), screen and (orientation: landscape) { … }

Q. CSS transform properties are used to change the shape and position of the selected objects. The transform-origin property specifies the location of the element’s transformation origin. By default, what is the location of the origin?

Q. Which of the following is not a valid color value? (Alternative: Which choice is not a valid color value?)

Q. What is the vertical gap between the two elements below?

<div style="margin-bottom: 2rem;">Div 1</div>
<div style="margin-top: 2rem;">Div 2</div>

Reference MDN Webdocs

Q. When using the Flexbox method, what property and value is used to display flex items in a column?

Q. Which type of declaration will take precedence?

Q. The flex-direction property is used to specify the direction that flex items are displayed. What are the values used to specify the direction of the items in the following examples?

quote

Q. There are two sibling combinators that can be used to select elements contained within the same parent element; the general sibling combinator (~) and the adjacent sibling combinator (+). Referring to example below, which elements will the styles be applied to?

h2 ~ p {
  color: blue;
}
h2 + p {
  background: beige;
}

<section>
  <p>paragraph 1</p>
  <h2>Heading</h2>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
</section>

Note: a variant of the question below.

Q. Which element(s) will be blue?

h2 ~ p {
  color: blue;
}

<section>
  <p>P1</p>
  <h2>H2</h2>
  <p>P3</p>
  <p>P4</p>
</section>

Reference

Q. When using flexbox, the “justify-content” property can be used to distribute the space between the flex items along the main axis. Which value should be used to evenly distribute the flex items within the container shown below?

quote

Q. There are many advantages to using icon fonts. What is one of those advantages?

Q. What is the difference between display:none and visibility:hidden?

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

Q. Which statement regarding icon fonts is true?

Q. The values for the font-weight property can be keywords or numbers. For each numbered value below, what is the associated keyword?

font-weight: 400;
font-weight: 700;

Q. Using the :nth-child pseudo class, what would be the most efficient way to style every third item in a list, no matter how many items are present, starting with item 2?

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

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

Q. 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?

Q. Is there an error in this code? If so, find the best description of the problem

@font-face {
  font-family: 'Avenir', sans-serif;
  src: url('avenir.woff2') format('woff2'), url('avenir.woff') format('woff');
}

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

Q. The calc() CSS function is often used for calculating relative values. In the example below, what is the specified margin-left value?

.example {
  margin-left: calc(5% + 5px);
}

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

Q. In this example, what color will Paragraph 1 be?

p:first-of-type {
  color: red;
}
p {
  color: blue;
}
.container {
  color: yellow;
}
p:first-child {
  color: green;
}

<div class="container">
  <h1>Heading</h1>
  <p>Paragraph1</p>
  <p>Paragraph2</p>
</div>

Q. What is the ::placeholder pseudo-element used for?

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

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

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

Q. You have a large image that needs to fit into a 400 x 200 pixel area. What should you resize the image to if your users are using Retina displays?

Q. In Chrome’s Developer Tools view, where are the default styles listed?

Q. While HTML controls document structure, CSS controls ___.

Q. What is an advantage of using inline CSS?

Q. Which W3C status code represents a CSS specification that is fully implemented by modern browsers?

Q. Are any of the following declarations invalid?

color: red; /* declaration A */
font-size: 1em; /* declaration B */
padding: 10px 0; /* declaration C */

Q. Which CSS rule takes precedence over the others listed?

Q. The body of your page includes some HTML sections. How will it look with the following CSS applied?

body {
  background: #ffffff; /* white */
}
section {
  background: #0000ff; /* blue */
  height: 200px;
}

Q. Which CSS keyword can you use to override standard source order and specificity rules?

Q. You can use the ___ pseudo-class to set a different color on a link if it was clicked on.

Q. Which color will look the brightest on your screen, assuming the background is white?

Q. Which CSS selector can you use to select all elements on your page associated with the two classes header and clear?

Q. A universal selector is specified using a(n) ___.

Q. In the following CSS code, 'h1' is the ___, while 'color' is the ___.

h1 {
  color: red;
}

Q. What is an alternate way to define the following CSS rule?

font-weight: bold;

Q. You want your styling to be based on a font stack consisting of three fonts. Where should the generic font for your font family be specified?

Q. When using a font stack to declare the font family, in what order should the values appear?

Q. What is one disadvantage of using a web font service?

Q. How do you add Google fonts to your project?

Q. Using the following HTML and CSS example, what will equivalent pixel value be for .em and .rem elements?

html {
  font-size: 10px;
}
body {
  font-size: 2rem;
}
.rem {
  font-size: 1.5rem;
}
.em {
  font-size: 2em;
}

<body>
  <p class="rem"></p>
  <p class="em"></p>
</body>

Q. What property is used to adjust the space between text characters?

Q. What is the correct syntax for changing the cursor from an arrow to a pointing hand when it interacts with a named element?

Q. What is the effect of this style?

background-position: 10% 50%;

Q. How will the grid items display?

grid-template-columns: 2fr 1fr;

Q. Which style rule would make the image 50% smaller during a hover?

<img id="photo" alt="" src="..." />

Q. Which CSS properties can you use to create a rounded corner on just the top-left and top-right corners of an element?

A. border-radius: 10px 10px 0 0;
B. border-top-left-radius: 10px; and border-top-right-radius: 10px;
C. border-radius: 10px 0;
D. border-top-radius: 10px;

Q. Review the HTML example below. Then choose the list of selectors that select the <p>, from lowest to highest specificity.

<section>
  <p class="example">...</p>
</section>

Q. Which property is used to create a drop shadow effect on an HTML element?

Q. What is the correct selector for targeting all text inputs that are not disabled?

input[type="text"] selects all the input with type text, and :not([disabled]) selects all the elements not having the attribute “disabled”. Combining both only selects all the input elements with type attribte as “text” and not having “disabled” attribute.`

  1. Reference link attribute-selector
  2. Reference link-:not()

Q. How can you create a semi-transparent background color?

rgba is a funtion in css. rgba stands for red, green, blue and alpha. The value of alpha can be between 0 and 1 both inclusive with 0 being fully transparent and 1 being fully opaque.

Reference link-rgba

Q. Using this HTML markup, how would you select only the headings contained within the <header> element?

<header>
  <hl>Heading 1</h1>
  <h2>Heading 2</h2>
</header>
<h2>Heading 2</h2>

Q. Suppose you want to have a list of items (.item) displayed in a row and in reverse order using flexbox. What is the error in the CSS below?

.container {
  display: flex;
}
.item {
  border: 1px solid red;
  flex-direction: row-reverse;
}

Q. Which choice is not a valid transition?

  1. MDN:
  2. MDM:
  3. W3s
  4. W3s

Q. In this example, what color will the paragraphs be and why?

article p {
  color: blue;
}
article > p {
  color: green;
}

<article>
  <p>Paragraph 1</p>

  <aside>
    <p>Paragraph 2</p>
  </aside>
</article>

Q. Review the declaration of border style shown below. What is the corresponding longhand syntax?

border: 1px solid red;

Q. Pseudo-classes are used to _.

Q. In this example, what styles will be applied to which elements?

section {
  color: gray;
}

<section>
  <p>paragraph</p>
  <a href="#">link</a>
</section>

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

Q. What is the correct order for listing different link states in a website so those states display correctly on the page?

Q. Which selector is used to select the paragraph element that is a direct descendent of section?

Child combinator

ul {
  --color: red;
}
p {
  color: var(--color);
}
a {
  color: var(--color, orange);
}

<p>Paragraph</p>
<ul>
  <li>
    <a href="#">list item a link </a>
  </li>
  <li>list item</li>
</ul>

Reference

Q. Which statement is not true?

Reference

Q. What is the output of the margin value when used within this context, assuming that its containing element is larger than 800px?

.example {
  width: 800px;
  margin: 0 auto;
}

Source: SOW

Q. There are currently four viewport-percentage lengths that can be used to define the value relative to the viewport size: vw, vh, vmin, and vmax. If the current viewport size has a width of 800px and a height of 600px, what will these values be equivalent to in pixels?

10vw = ?px
10vh = ?px
10vmin = ?px
10vmax = ?px

Q. Referring to the HTML markup and CSS example below, which element(s) will be targeted?

p:first-of-type:first-letter {
  color: red;
}

<body>
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>

  <article>
    <h1>Heading</h1>
    <p>Paragraph 3.</p>
    <p>paragraph 4.</p>
  </article>

  <section>
    <p>Paragraph 5.</p>
    <p>Paragraph 6.</p>
  </section>
</body>

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

a[href$='domain.com'] {
  color: pink;
}

a[href='*domain.com'] {
  color: pink;
}

a[href*='domain.com'] {
  color: rgb(255, 155, 155);
}

a[href*='domain.com'] {
  color: pink;
}

Reference

Q. Which property and value pair could be used to apply a linear gradient effect?

Q. You want to add a background circle behind an icon. Which style declaration is correct?

.glyphicon-bgcircle {
  circle-radius: 50%;
  margins: 50px;
  background-color: #fdadc6;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
}

glyphicon-bgcircle {
  border-circle: 50%;
  padding: 50px;
  background-color: #fdadc6;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
}

.glyphicon-bgcircle {
  border-radius: 50%;
  padding: 50px;
  background-color: #fdadc6;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
}

.glyphicon-bgcircle {
  radius-rounded: 50%;
  margins: auto;
  background-color: #fdadc6;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
}

Q. Which items are valid values for the font-size property?

A. font-size: xsmall
B. font-size: 50%
C. font-size: 1em
D. font-size: 20px

Q. In this image, the blue box and sample text are both contained within the same parent element. The blue box is floated on the left margin of the container. Why is it not contained with the container?

Sample text

Q. Given this code, which CSS declaration of .overlay will span the entire width and height of its container?

<style>
.container {
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid black;
}
</style>
<div class="container"><div class="overlay"></div></div>

.overlay {
  position: static;
  top: 200px;
  bottom: 200px;
  right: 200px;
  left: 200px;
  background-color: rgba(0, 0, 0, 0.5);
}

.overlay {
  position: absolute;
  top: 200px;
  bottom: 200px;
  right: 200px;
  left: 200px;
  background-color: rgba(0, 0, 0, 0.5);
}

.overlay {
  position: static;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

Q. Which missing line of code would place the text on top of the image?

<div class="container">
  <img src="grumpy-cat.gif" />
  <p>The z-index property is cool!</p>
</div>

img {
  position: absolute;
  left: 0px;
  top: 0px;
  // Missing line
}

Q. 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?

Q. Given this markup, which selector would result in the text being highlighted in yellow?

<span class="highlight">#BLM</span>

.highlight {
  background-color: yellow;
}

#highlight {
  background-color: yellow;
}

.highlight {
  color: yellow;
}

#highlight {
  color: yellow;
}

Highlight Background

Q. To prevent a background image from tiling in any direction, which style property would you apply?

background-repeat: no-repeat;

background-repeat: fixed;

background-repeat: none;

background-tile: none;

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

Reference

Q. Which style rule would you apply to set the background image to display the contents of the wood.png file?

Q. What style rule would set the font color of only paragraph two to blue?

<section><p>paragraph one</p></section><p>paragraph two</p>

section > p {
  color: blue;
}

p {
  color: blue;
}

section + p {
  color: blue;
}

p + section {
  color: blue;
}

Reference

Q. You want to move an element up 100px. Which CSS property would you use?

Q. Which style will horizontally center the inner <div> within the outer <div>?

<div id="outer">
  <div id="inner">Center Me!</div>
</div>

#inner {
  width: 50%;
}

#outer {
  width: 100%;
}

#inner {
  left: 0;
  right: 0;
  position: center;
}

#inner {
  text-align: center;
}

#inner {
  width: 50%;
  margin: 0 auto;
}

Q. Which corner will the puppy be in when these CSS rules are applied?

.pen {
  height: 100px;
  width: 100px;
  border: 2px dashed brown;
  position: relative;
}

#puppy {
  position: absolute;
  right: 80px;
  bottom: 0px;
}

<div class="pen">
  <span id="puppy">🐶</span>
</div>

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

Reference

Q. Which missing code will give “Cellar Door” a shadow?

  <style>
    #cellar-door {
      box-shadow: 3px 5px 10px #000;
    }
    .text-shadow {
      text-shadow: 3px 5px 10px #000;
    }
  </style>

  <h1 _____> Cellar Door</h1>

Reference

Q. Which choice is a valid example of a comment in CSS?

Reference

Q. Which element(s) will be displayed in blue text?

    h2 ~ p {
      color: blue;
    }
  <section>
    <p>P1</p>
    <h2>H2</h2>
    <p>P3</p>
    <p>P4</p>
  </section>

Reference

a:visited {
  ...;
}
a:active {
  ...;
}
a:hover {
  ...;
}
a:focus {
  ...;
}

Reference

Q. What style rule should you use to display all input elements that have failed the validation test with a red font?

input.valid[false] {
  color: red;
}

input:invalid {
  color: red;
}

input.not(valid) {
  color: red;
}

input.invalid {
  color: red;
}

Reference

Q. What style rule should you apply to the img element to display the element in grayscale with no color?

img {
  transform: grayscale(1);
}

img {
  filter: grayscale(0);
}

img {
  transform: grayscale(0);
}

img {
  filter: grayscale(1);
}

Reference

Q. Why might you create a reset style sheet?

Reference

Q. Which option is an invalid way of declaring a padding value of 10 pixels on the top and bottom, and 0 pixels on the left and right?

Q. How would you absolutely position an element of the logo class inside of a relatively positioned container?

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

.logo {
  position: absolute;
  left: 100px;
  top: 150px;
}

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

.logo {
  position: absolute;
  margin-left: 100px;
  margin-top: 150px;
}
↥ back to top