FrontEnd Developer Quiz
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul> .shopping-list .favorite { color: red; } #must-buy { color: blue; }
Blue
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul> ul { color: red; } li { color: blue;} What is the color of the text Sausage ?
Blue
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul> ul#awesome #must-buy { color: red;} .favorite span {color: blue !important;}
Blue
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul> ul.shopping-list li .highlight { color: red; } ul.shopping-list li .highlight:nth-of-type(odd) { color: blue;}
Blue (1st element is odd)
@media only screen and (max-width: 1024px) { margin: 0; }
Does the screen keyword apply to the device's physical screen or the browser's viewport? Browser's viewport
The pseudo class :checked will select inputs with type radio or checkbox, but not <option> elements.
False
The translate() function can move the position of an element on the z-axis.
False (It goes with the x and y axis)
<p id="example">Hello</p> #example {margin-left: -5px;} What will happen to the position of #example?
It will move 5px to the left (positive will move it to the right)
<p id="example">Hello</p> #example {margin-bottom: -5px;} What will happen to the position of #example?
It will move all succeeding elements upwards
<div id="test1"> <span id="test2"></span> </div> #i-am-useless { background-image: url('mypic.jpg'); } Are unused style resources still downloaded by the browser?
No
ul { MaRGin: 10px; } Are CSS property names case-sensitive?
No
Does setting margin-top and margin-bottom have an affect on an inline element?
No Top and bottom margins do not affect inline elements because inline elements flow with content on the page.
Does setting padding-top and padding-bottom on an inline element add to its dimensions?
No Inline Elements Inline elements don't start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are <span> , <strong>, and <img> tags. When it comes to margins and padding, browsers treat inline elements differently. You can add space to the left and right on an inline element, but you cannot add height to the top or bottom padding or margin of an inline element.
If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?
No vw (viewport) - is the one that makes a font responsive https://guide.freecodecamp.org/css/units/
<div id="test1"> <span id="test2"></span> </div> #test1 { display: none;} #test2 { background-image: url('mypic.jpg'); visibility: hidden; } On page load, will mypic.jpg get downloaded by the browser?
No (due to class hidden)
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul> #awesome .favorite:not(#awesome) .highlight { color: red;} #awesome .highlight:nth-of-type(1):nth-last-of-type(1) { color: blue; }
Red Side notes: The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class. The :nth-of-type() CSS pseudo-class matches elements of a given type, based on their position among a group of siblings.
In a HTML document, the pseudo class :root always refers to the <html> element.
True
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul> ul#awesome { color: red;} ul.shopping-list li.favorite span { color: blue; }
What is the color of the text Sausage ? Blue
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul> ul li { color: red; } #must-buy {color: blue; }
What is the color of the text Sausage ? Blue (id has priority)
<div id="test1"> <span id="test2"></span> </div> #test2 { background-image: url('mypic.jpg'); display: none; } On page load, will mypic.jpg get downloaded by the browser?
Yes
<div> <p>I am floated</p> <p>So am I</p> </div> div { overflow: hidden; } p { float: left; } Does overflow: hidden create a new block formatting context?
Yes Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed.
@media only screen and (max-width: 1024px) { margin: 0; } What is the use of the only selector?
Stops older browsers from parsing the remainder of the selector