CSS - Pluralsight Flashcards
Applying the following declaration fixes the position of an element relative to which of the following?
position: fixed;
The browser’s viewport.
Which of the following selectors will target both of the ‘div’ elements below?
section + div
section > div
section div
section ~ div
section ~ div
Which of the following properties has a default value of ease and specifies how the speed during a transition will be calculated?
transition-duration
transition-property
transition-delay
transition-timing-function
transition-timing-function
What will be the final background color of the rectangle SVG element below?
‘rect x=”50” y=”100” width=”50px” height=”300px” fill=”red” style=”fill: blue; color: green;” ‘
Black
Green
Red
Blue
Blue
Which of the following is true regarding keyframe rules created with @keyframes?
@keyframes rules don’t cascade
@keyframes rule declarations qualified with !important are considered first priority
@keyframes in embedded stylesheets are ignored
@keyframes rules must be the first rules in a stylesheet
@keyframes rules don’t cascade
Which of the following is true regarding media queries containing comma-separated lists of expressions?
- Commas are not valid characters in a media query.
- Commas cannot be combined with logical operators like ‘not’, ‘and’, or ‘only.’
- Commas act like the logical operator ‘or’, meaning that if any of the media queries is true the styles will be applied.
- All conditions must evaluate to true in order for the styles to be applied.
Commas act like the logical operator ‘or’, meaning that if any of the media queries is true the styles will be applied.
Which character is used in a general sibling selector?
Greater than (>)
Pound (#)
Tilde (~)
Plus sign (+)
Tilde (~)
What is the effect of using a negative number in a padding declaration? Example:
p {
padding-top: -10px;
}
Same as margin-top: -10px;
Same as padding-top: 10px;
Same as position: absolute; top: -10px;
Same as padding-top: 0px;
Same as padding-top: 0px;
Which selector is used to find anchor elements that have not been visited by the user?
a: clicked
a: active
a: hover
a: link
a:link
Which option is true regarding the flexbox layout mode?
It completely replaces the outdated box model as of CSS3.
It changes all block-level elements to inline elements.
The display order of elements can be independent of their order in the HTML source code.
It gives the same result as floating all elements in a document.
The display order of elements can be independent of their order in the HTML source code.
Which property/properties are supported for the ::first-line selector element?
The margin and padding properties The transform property The font properties The display property The font properties
The font properties
Which of the following attributes specifies the location of an external stylesheet?
url
rel
href
src
href
Which of the following is a common method for keeping a parent element from collapsing when it contains only floated children?
The floated childfix method
The floatfix method
The clearfix method
Setting its display property to block
The clearfix method
Which is an example of an adjacent sibling selector? (соседний родственный селектор)
div p
h1 + p
p > span
h1 ~ h2
h1 + p
Which option specifies the number of times an animation should be played?
iteration-count
animation-count
iteration
animation-iteration-count
animation-iteration-count
What does the :first-line pseudo-element select?
The first line of text in a block element
The first line of any element capable of containing inner HTML
The first line of text in a document
The first line of text in an inline element
The first line of text in a block element
Which of the following is an example of a general descendant selector?
input[type=”text”]
div > p
ul li
h1, h2
ul li
Based on the code below, which paragraph(s) will be red?
<div>
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<p>Paragraph 4.</p>
div ~ p {
color: red;
}
Paragraph 1
Paragraphs 3 and 4
Paragraphs 1 and 2
Paragraph 3
Paragraphs 3 and 4
