Advanced CSS & Layouts

Question 1 of 13

Medal-premium 1

Which of this is a valid pseudo-element selector

Select one or more of the following:

  • :link

  • :visited

  • :hover

  • :style

  • :active

Question 2 of 13

Medal-premium 1

This pseudo-class lets you select the first element in a sequence.

Select one or more of the following:

  • :first-child

  • :last-child

  • :nth-child

  • :nth-of-class

  • :nth-of-type

Question 3 of 13

Medal-premium 1

Which of these selectors would allow you to choose the even rows in a series of list items and make their background yellow

Select one or more of the following:

  • li:nth-child(2n) {
    background: yellow;
    }

  • li:nth-child(even) {
    background: yellow;
    }

  • li:nth-of-type(2n) {
    background: yellow;
    }

  • li:even {
    background: yellow;
    }

Question 4 of 13

Medal-premium 1

The following CSS will generate which of these results.

body {
margin: 0;
padding: 0;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background: yellow;
}

li {
float: left;
padding:0 8px;
border-right: 1px solid red;
}

li:first-child {
padding-left: 0;
}

li:last-child {
padding-right: 0;
border-right: 0;
}

Select one or more of the following:

  • Make sure that the list elements don't display bullets

  • Float the list items so that they're side by side

  • Make the background in the unordered list appear to have a yellow background

  • Delete the spacing to the left of the first list item

  • Delete the spacing to the right of the first list item and clear the border

Question 5 of 13

Medal-premium 1

To add a right facing arrow at the beginning of each list item, which code would you use.

Select one or more of the following:

  • li:before { content: '\2192 '; }

  • li:before { content: '\→ ' }

  • li:before { content: rArrow; }

Question 6 of 13

Medal-premium 1

Adding a viewport definition disables the resizing that mobile devices do on most websites. A valid viewport tag is: <style name="viewport"
content="width=device-width, initial-scale=1">

Select one of the following:

  • True
  • False

Question 7 of 13

Medal-premium 1

Using this code, which of the following is true about the background color of the body tag
body {
background: #F3CC71;
}

@media all
and (min-width: 600px)
and (max-width: 800px) {
body {
background: #DA3637;
}
}

Select one or more of the following:

  • The background will be yellow when the viewport is at 0-600 pixels in width

  • The background will be yellow when the viewport is at 0-599 pixels in width

  • When the viewport is set to 800 pixels, the background color will be red

  • When the viewport is set to 800 pixels, the background color will be yellow

Question 8 of 13

Medal-premium 1

This type of display property displays elements in the same line as other elements.

Select one or more of the following:

  • block

  • inline

  • inline-block

  • float

Question 9 of 13

Medal-premium 1

Unless whitespace is cleared, the inline-block property will add a space in between items that makes it difficult to perfectly align elements.

Select one of the following:

  • True
  • False

Question 10 of 13

Medal-premium 1

If you're using both the clearfix trick and the natural box layout model and you have three DIVs with a class of .box and the area inside a container with a class of wrapper. What width would you need to make wrapper in order to conain all of the boxes perfectly if this is the code you have for each box.

.box {
width: 100px;
padding: 20px;
margin: 10px;
height: 100px;
background: red;
float: left;
}

Select one or more of the following:

  • 360px

  • 300px

  • 320px

  • 460px

  • 480px

  • 500px

  • 380px

Question 11 of 13

Medal-premium 1

When floating elements, the parent container will lose track of the height of child elements unless you use a natural box layout model to fix it.

Select one of the following:

  • True
  • False

Question 12 of 13

Medal-premium 1

The default positioning property for HTML elements is:

Select one of the following:

  • static

  • none

  • relative

  • fixed

  • absolute

Question 13 of 13

Medal-premium 1

This positioning property removes and object from the normal flow and places the element relative to the browser's viewport...unless a parent of the current element is set to have relative position.

Select one of the following:

  • none of these options are valid

  • static

  • relative

  • absolute

  • fixed

Icon_fullscreen

Advanced CSS & Layouts

planetoftheweb
Quiz by , created almost 2 years ago

More advanced CSS Layout questions

Eye 280
Pin 0
Balloon-left 0
planetoftheweb
Created by planetoftheweb almost 2 years ago
Close