Advanced CSS & Layouts

planetoftheweb
Quiz by planetoftheweb, updated more than 1 year ago
planetoftheweb
Created by planetoftheweb almost 5 years ago
441
0

Description

More advanced CSS Layout questions

Resource summary

Question 1

Question
Which of this is a valid pseudo-element selector
Answer
  • :link
  • :visited
  • :hover
  • :style
  • :active

Question 2

Question
This pseudo-class lets you select the first element in a sequence.
Answer
  • :first-child
  • :last-child
  • :nth-child
  • :nth-of-class
  • :nth-of-type

Question 3

Question
Which of these selectors would allow you to choose the even rows in a series of list items and make their background yellow
Answer
  • 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

Question
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; }
Answer
  • 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

Question
To add a right facing arrow at the beginning of each list item, which code would you use.
Answer
  • li:before { content: '\2192 '; }
  • li:before { content: '\→ ' }
  • li:before { content: rArrow; }

Question 6

Question
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">
Answer
  • True
  • False

Question 7

Question
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; } }
Answer
  • 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

Question
This type of display property displays elements in the same line as other elements.
Answer
  • block
  • inline
  • inline-block
  • float

Question 9

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

Question 10

Question
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; }
Answer
  • 360px
  • 300px
  • 320px
  • 460px
  • 480px
  • 500px
  • 380px

Question 11

Question
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.
Answer
  • True
  • False

Question 12

Question
The default positioning property for HTML elements is:
Answer
  • static
  • none
  • relative
  • fixed
  • absolute

Question 13

Question
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.
Answer
  • none of these options are valid
  • static
  • relative
  • absolute
  • fixed
Show full summary Hide full summary

Similar

Web Designing & Development Full Tutorial
Nandkishor Dhekane
front end developer test
joni jiniani
Test I. Introduction to web technologies
Angel Martínez Rodriguez
Intro to HTML
Balikkoftesi
CSS Fundamentals
planetoftheweb
Front-End Web Development
Chanthy Ngin
Coding Quiz
ryanseaborne
Interview questions
Ryan O'Connor
OpenSource Programming
Faheem Ahmed
Low cost WordPress themes
Deepika Sharma
ฺBootstraps 's pretest.
Wachirawit Jiwanit