linkedin-skill-assessments-quizzes

CSS

ul li a
a
.example a
div a

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

Note: an alternative to the question below.

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

Note: an alternative to the question above.

Q4. 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 an older browser version. What are two valid techniques used to clear floats?

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

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 a class of "nav"
  2. A nav element
  3. An element with an id of "nav"

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

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

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

Q8. 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.`

Q9. 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.`

Q10. What is the use of line-height property?

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

Note:an alternative to the question below.`

Q12. What is not true about class selectors?

Note:an alternative to the question above.`

Q13. 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 that stays fixed at the top of the page?

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

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

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

background-color: blue;
background-img: URL(image.jpg);
background-position: no-repeat;
background-scroll: scroll;
background-size: 0px 0px;

background-color: blue;
background-src: URL(image.jpg);
background-repeat: no-repeat;
background-wrap: scroll;
background-position: 0px 0px;

background-color: blue;
background-src: URL(image.jpg);
background-repeat: no-repeat;
background-scroll: scroll;
background-position: 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>

Q16. 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.`

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

  1. Larger z-index values appear on top elements with a lower z-index value.
  2. Negative and positive numbers can be used.
  3. The z-index can be used only on positioned elements.

  1. Smaller z-index values appear on top of elements with a larger z-index value.
  2. Negative and positive numbers can be used.
  3. The z-index can be used with or without positioned elements.

  1. Smaller z-index values appear on top of elements with a larger z-index value.
  2. Negative and positive numbers can be used.
  3. The z-index must also be used with positioned elements.

  1. Larger z-index values appear on top of elements with a lower z-index value.
  2. Only a positive number can be used.
  3. The z-index must also be used with positioned elements.

Note:an alternative to the question above.`

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

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

Q19. 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;
}

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

  1. External; CSS is written in a separate file.
  2. Inline; CSS is added to the <head> of the HTML page.
  3. Internal; CSS is included within the HTML tags.

  1. External; CSS is written in a separate file and is linked within the <header> element of the HTML file.
  2. Inline; CSS is added to the HTML tag.
  3. Internal; CSS is included within the <header> element of the HTML file.

  1. External; CSS is written in a separate file and is linked within the <head> element of the HTML file.
  2. Internal; CSS is included within the <header> element of the HTML file.
  3. Inline; CSS is added to the HTML tag.

  1. External; CSS is written in a separate file and is linked within the <head> element of the HTML file.
  2. Inline; CSS is added to the HTML tag.
  3. Internal; CSS is included within the <head> element of the HTML file.

Q21. Which statement is true for the SVG image format?

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

a:active {
  color: pink;
}

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

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

Q25. By default, a background image will repeat _

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

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

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

p {
  color: #000000;
}

  "p" is the selector
  "#000000" is the property
  "color" is the value

  "p" is the selector
  "color" is the property
  "#000000" is the value

  "color" is the selector
  "#000000" is the property
  "#p" is the value

  "color" is the selector
  "p" is the property
  "#000000" is the value

Q29. What is the rem unit based on?

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

Official doc:

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

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

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

Reference

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

Q34. 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

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

Q36. Which type of declaration will take precedence?

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

quote

Q38. 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 the 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.

Q39. 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

Q40. 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

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

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

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

Q44. Which statement regarding icon fonts is true?

Q45. 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;

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

li:nth-child(3 + 2n) {
  margin: 0 5px;
}

li:nth-child(3n + 2) {
  margin: 0 5px;
}

li:nth-child(2),
li:nth-child(5),
li:nth-child(8) {
  margin: 0 5px;
}

li:nth-child(2n + 3) {
  margin: 0 5px;
}

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

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

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

Q50. 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');
}

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

Q52. 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);
}

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

Q54. 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>

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

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

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

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

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

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

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

Q63. What is the advantage of using inline CSS?

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

Q65. Are any of the following declarations invalid?

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

a:link {
  background: #0000ff;
}
a:hover {
  background: rgba(0, 0, 255, 0.5);
}

a {
  color: blue;
}
a:hover {
  background: white;
}

a:link {
  background: blue;
}
a:hover {
  color: rgba(0, 0, 255, 0.5);
}

a:hover {
  background: rgba(blue, 50%);
}
a:link {
  background: rgba(blue);
}

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

Q68. 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;
}

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

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

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

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

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

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

h1 {
  color: red;
}

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

font-weight: bold;

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

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

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

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

Q80. Using the following HTML and CSS example, what will the 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>

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

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

Q83. What is the effect of this style?

background-position: 10% 50%;

Q84. How will the grid items display?

grid-template-columns: 2fr 1fr;

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

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

Q86. 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;

Q87. 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>

1. section \* {
  ...;
}
2. [class*='example'] {
  ...;
}
3. p.example {
  ...;
}
4. section p {
  ...;
}

1. p {
  ...;
}
2. p.example {
  ...;
}
3. section p {
  ...;
}
4. [class*='example'] {
  ...;
}

1. p.example {
  ...;
}
2. section p {
  ...;
}
3. [class*='example'] {
  ...;
}
4. section \* {
  ...;
}

1. p {
  ...;
}
2. section p {
  ...;
}
3. [class*='example'] {
  ...;
}
4. p.example {
  ...;
}

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

Q89. 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]) select all the elements not having the attribute “disabled”. Combining both only selects all the input elements with type attribute as “text” and not having “disabled” attribute.`

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

Q90. 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

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

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

Q92. 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;
}

Q93. Which choice is not a valid transition?

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

Q94. 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>

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

border: 1px solid red;

border-size: 1px;
border-style: solid;
border-color: red;

border-size: 1px;
border-type: solid;
border-color: red;

border-width: 1px;
border-style: solid;
border-color: red;

border-width: 1px;
border-line: solid;
border-color: red;

Q96. Pseudo-classes are used to _.

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

section {
  color: gray;
}

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

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

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

  a
  a:hover

  :link
  :visited
  :hover
  :active
  :focus

  :active
  :focus
  :hover
  :link
  :visited

  :link
  :visited
  :focus
  :hover
  :active

Q100. Which selector is used to select the paragraph element that is a direct descendent of the 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

Q102. Which statement is not true?

Reference

Q103. 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

Q104. 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

Q105. 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>

Q106. 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: rgba(255, 155, 155);
}

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

Reference

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

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

.glyphicon-bgcircle {
  circle-radius: 50%;
  margin: 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%;
  margin: auto;
  background-color: #fdadc6;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
}

Q110. 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

Q111. 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 in the container?

Sample text

Q112. 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);
}

Q113. 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
}

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

Q115. 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

Q116. 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;

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

Reference

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

Q119. 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

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

Q121. 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;
}

Q122. 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">:dog:</span>
</div>

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

Reference

Q124. 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

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

Reference

Q126. 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

Q128. 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

Q129. 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

Q130. Why might you create a reset style sheet?

Reference

Q131. 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;
}

Q132. How would the <div> with the class .child be positioned within its container?

<style>
  .container {
    height: 200px;
    width: 200px;
  }
  .child {
    margin: auto 0;
    height: 100px;
  }
</style>
<div class="container">
  <div class="child">...</div>
</div>

Reference

Q133. By default, a CSS transition is __

Reference

Q134. Which style rule will extend the header element across an entire grid row from the first column through the last column?

header {
  grid-column: 1 / auto;
}

header {
  grid-column: 1/-1;
}

header {
  grid-column: -1/1;
}

header {
  grid-column: 1/100%;
}

Reference

Q135. To center the content of a grid cell horizontally and vertically within the cell, which style rule should you apply?

align-items: start;
justify-items: end;

align-items: center;
justify-items: center;

align-items: middle;
justify-items: middle;

align-items: stretch;
justify-items: stretch;

Reference for align-items Reference for justify-items

Q136. 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

Q139. To insert an external style sheet file into another style sheet file, which rule should you use?

Reference for import

Q140. Given this code, how tall will the following element be in pixels?

<style>
  #tall-text {
    display: inline;
    font-size: 20px;
    height: 200px;
  }
</style>

<p id="tall-text">Did I grow?</p>

Reference

Q141. Which style rule will place an X within the grid to win the game?

A

Reference

Q142. Which CSS property is used to create an image reflection?

Q143. What is the general syntax of writing the var() function?

Q143. How many layout modes were there before the Flexbox Layout Module was introduced in CSS?

Q144. Which of the following components of the CSS box model are transparent?

Q145. How are custom fonts defined using CSS?

Q146. Which of the following CSS properties sets what kind of line decorations are added to an element, such as underlines, overlines, etc?

Q147. Which of the following CSS Properties sets the stacking order of positioned elements?

Q148. Which of the following properties allows a marquee to be used in the case of a text overflow?

Q149. Which of the following Cascading order has the highest precedence?

Q150. The CSS cascade assigns a weight to each style rule.

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

Q152. Using negative text-indent is also known as _?

Q153. Using margin is also known as _?

Q154. If a particular rule should never be overridden by another rule, the **____** indication should be used.

Q155. What does CSS stand for?

Reference

Q156. What color would rgb(255,0,0) give?

Reference: CSS RGB and RGBA Colors

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

Reference: HTML link tag ​ HTML Link Tag Syntax for External CSS Files​

Reference: HTML link tag

Q159. What is CSS defined in HTML?

Reference: CSS Introduction

Q160. Which of the following statements is TRUE for CSS?

Reference: CSS How To

Q161. In CSS, margin collapsing only happens with?

Reference: CSS Margin Collapse

Q162. Which of the following CSS selectors selects all <p> elements that are the direct child of a <div> element?

Reference: CSS Child Selector

Q163. In CSS, the box-sizing property is used to control how an element’s total width and height are calculated. Which value of box-sizing includes the element’s padding and border within its total width and height?

Reference: CSS box-sizing Property

Q164. In CSS, which of the following is NOT an effect of an inert attribute?

Reference: HTML inert attribute - MDN

Q165. What elements does the accent-color property target?

Reference: CSS Line Height Property

Q166. In CSS, what does the line-height property control?

Q167. What is the purpose of the CSS visibility property?

Reference: CSS Visibility Property - W3Schools

Q168. Which CSS property is used to change the style of the cursor when it hovers over an element?

Q169. What is the purpose of the CSS outline property?

Reference: CSS outline Property - W3Schools

Q170. What are the valid values of the text-align property?

Reference: CSS text-align Property - W3Schools

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

Reference: CSS visibility:hidden vs display:none

Q172. Which of the following is NOT a valid CSS selector?

Reference: Difference Between Class and ID

Q174. Which CSS property is used to create a grid container?

Reference CSS Grid

Q175. What is the correct syntax for CSS custom properties (variables)?

Reference CSS Custom Properties

Q176. Which flexbox property is used to control the alignment of items along the main axis?

Reference Flexbox

Q177. What does the fr unit represent in CSS Grid?

grid-template-columns: 1fr 2fr 1fr;

Reference CSS Grid fr unit

Q178. Which CSS property is used to create smooth transitions between property changes?

Reference CSS Transitions

Q179. What is the purpose of the clamp() function in CSS?

font-size: clamp(1rem, 2.5vw, 2rem);

Reference CSS clamp()

Q180. Which CSS selector targets the first child element?

Reference CSS :first-child

Q181. What does the aspect-ratio property do?

Reference CSS aspect-ratio

Q182. Which CSS property is used to create a sticky element?

Reference CSS position: sticky

Q183. What is the correct syntax for CSS Grid areas?

grid-template-areas:
  'header header header'
  'sidebar main main'
  'footer footer footer';

Reference CSS Grid Template Areas

Q184. Which CSS function is used to calculate values?

width: calc(100% - 20px);

Reference CSS calc()

Q185. What does the gap property do in CSS Grid and Flexbox?

Reference CSS gap

Q186. Which CSS property is used to control the stacking order of elements?

Reference CSS z-index

Q187. What is the purpose of the contain property in CSS?

Reference CSS contain

Q188. Which CSS selector targets elements based on their attribute values using wildcards?

/* Selects elements where href contains "example" */
a[href*='example'] {
  color: red;
}

Reference CSS Attribute Selectors

Q189. What does the object-fit property control?

Reference CSS object-fit

Q190. Which CSS property is used to create rounded corners?

Reference CSS border-radius

Q191. What is the purpose of the will-change property?

Reference CSS will-change

Q192. Which CSS function is used to create color gradients?

Reference CSS Gradients

Q193. What does the scroll-behavior property control?

html {
  scroll-behavior: smooth;
}

Reference CSS scroll-behavior

Q194. Which CSS property is used to control text overflow?

Reference CSS text-overflow

Q195. What is the purpose of the backdrop-filter property?

Reference CSS backdrop-filter

Q196. Which CSS property is used to create CSS animations?

Reference CSS Animations

Q197. What does the place-items property do in CSS Grid?

Reference CSS place-items

Q198. Which CSS selector targets the last child element?

Reference CSS :last-child

Q199. What is the purpose of the isolation property?

Reference CSS isolation

Q200. Which CSS property controls the space between characters?

Reference CSS letter-spacing

Q201. What does the overscroll-behavior property control?

Reference CSS overscroll-behavior

Q202. Which CSS property is used to create drop shadows?

Reference CSS box-shadow

Q203. What is the purpose of the resize property?

Reference CSS resize

Q204. Which CSS function is used to create custom shapes?

Reference CSS clip-path

Q205. What does the mix-blend-mode property do?

Reference CSS mix-blend-mode

This site is open source. Improve this page.