CSS - Linkedin Flashcards
(48 cards)
Q1. In the following example, which selector has the highest specificity ranking for selecting the anchor link element?
ul li a
a
.example a
div a
.example a
Q2. Using an attribute selector, how would you select an <a> element with a “title” attribute?</a>
a[title]{…}
a > title {…}
a.title {…}
a=title {…}</a>
a[title]{…}
Q3. 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?
- Use the “clearfix hack” on the floated element and add a float to the parent element.
- Use the overflow property on the floated element or the “clearfix hack” on either the floated or parent element.
- Use the “clearfix hack” on the floated element or the overflow property on the parent element.
- Use the “clearfix hack” on the parent element or use the overflow property with a value other than “visible.”
Use the “clearfix hack” on the parent element or use the overflow property with a value other than “visible.”
Q4. What element(s) do the following selectors match to?
1) .nav {
...;
}
2) nav {
...;
}
3) #nav {
...;
}
- An element with an class of “nav”
- A nav element
- An element with a id of “nav”
Q5. When adding transparency styles, what is the difference between using the opacity property versus the background property with an rgba() value?
- Opacity specifies the level of transparency of the child elements. Background with an rgba() value applies transparency to the background color only.
- Opacity applies transparency to the background color only. Background with an rgba() value specifies the level of transparency of an element, as a whole, including its content.
- Opacity specifies the level of transparency of an element, including its content. Background with an rgba() value applies transparency to the background color only.
- Opacity applies transparency to the parent and child elements. Background with an rgba() value specifies the level of transparency of the parent element only.
Opacity specifies the level of transparency of an element, including its content. Background with an rgba() value applies transparency to the background color only.
Q6. What is true of block and inline elements? Alternative: Which statement about block and inline elements is true?
- By default, block elements are the same height and width as the content container between their tags; inline elements span the entire width of its container.
- By default, block elements span the entire width of its container; inline elements are the same height and width as the content contained between their tags.
- nav element is an example of an inline element. header is an example of a block element.
- span is an example of a block element. div is an example of an inline element.
By default, block elements span the entire width of its container; inline elements are the same height and width as the content contained between their tags.
Q7. 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;
}
- The first column will have a width of 50px. The second column will be 50px wide and the third column will be 100px wide.
- The first column will have a width of 50px. The second column will be 150px wide and the third column will be 300px wide.
- The first column will have a width of 50px. The second column will be 300px wide and the third column will be 150px wide.
- The first column will have a width of 50px. The second column will be 500px wide and the third column will be 1000px wide.
The first column will have a width of 50px. The second column will be 150px wide and the third column will be 300px wide.
Q8. What is the line-height property primarily used for?
to control the height of the space between two lines of content
to control the height of the space between heading elements
to control the height of the character size
to control the width of the space between characters
to control the height of the space between two lines of content
Q9. Three of these choices are true about class selectors. Which is NOT true?
- Multiple classes can be used within the same element.
- The same class can be used multiple times per page.
- Class selectors with a leading period
- Classes can be used multiple times per page but not within the same element.
Classes can be used multiple times per page but not within the same element.
Q10. 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?
position
flexbox
grid
float
position
Q11. 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;
Q12. In the following example, according to cascading and specificity rules, what color will the link be?
.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>
yellow
Q13. 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. What do you know about z-index?
Larger z-index values appear on top of elements with a lower z-index value. Negative and positive numbers can be used. z-index can only be used on positioned elements.
Q14. What is the difference between the following line-height settings?
line-height: 20px;
line-height: 2;
The value of 20px will set the line-height to 20px. The value of 2 will set the line-height to twice the size of the corresponding font-size value.
Q15. 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?)
<p>paragraph one</p>
<p>paragraph two</p>
section p {
color: red;
}
section + p {
color: blue;
}
Paragraphs one will be red, paragraph two will be blue.
Q16.What are three valid ways of adding CSS to an HTML page?
- External; CSS is written in a separate file and is linked within the element of the HTML file.
- Inline; CSS is added to the HTML tag.
- Internal; CSS is included within the element of the HTML file.
Q17. Which of the following is true of the SVG image format? (Alternative: Which statement about the SVG image format is true?)
- CSS can be applied to SVGs but JavaScript cannot be.
- SVGs work best for creating 3D graphics.
- SVGs can be created as a vector graphic or coded using SVG specific elements such as svg, line, and ellipse.
- SVGs are a HAML-based markup language for creating vector graphics.
SVGs can be created as a vector graphic or coded using SVG specific elements such as svg, line, and ellipse.
Q18. In the example below, when will the color pink be applied to the anchor element?
a:active {
color: pink;
}
The color of the link will display as pink while the link is being clicked but before the mouse click is released.
Q19. To change the color of an SVG using CSS, which property is used?
Use fill to set the color inside the object and stroke to set the color of the border.
Q20. When using position: fixed, what will the element always be positioned relative to?
the viewport
Q21. By default, a background image will repeat _
indefinitely, vertically, and horizontally
Q22. When using media queries, media types are used to target a device category. Which choice lists current valid media types?
print, screen, speech
Q23. How would you make the first letter of every paragraph on the page red?
p::first-letter { color: red; }
Q24. In this example, what is the selector, property, and value?
p {
color: #000000;
}
“p” is the selector
“color” is the property
“#000000” is the value
paragraph 1
Heading
paragraph 2
paragraph 3
