CSS3 Flashcards
What is style added directly into the HTML element tag to which you want to apply the style?
In-line styles
Which property specifies transparency for an HTML element?
opacity
How can you define the position of an animation using the @keyframes rule?
By specifying a percentage from 0-100% or by using the keywords “to” and “from”
div {
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
}
Which positioning scheme positions an element in relationship to the viewport, meaning it always stays in the same place even if page is scrolled?
fixed
What is an attribute that can be customized to change the way that the element renders in the browser?
property
Which positioning scheme positions an element in relationship to the nearest positioned ancestor?
absolute
Which transform value defines whether or not an element is visible when it is rotated away from the viewer?
backface-visibility
Which property specifies where the cursor will navigate to when the user presses the arrow-down key?
nav-down
Which selector targets every instance of a specified HTML element whose specified attribute ends with a specified value?
element[attribute$=value]
Which property cuts off or clips text that extends beyond its container?
text-overflow
Which property applies shadows to edges of the HTML elements to create visual depth?
box-shadow
Which property specifies the number of times that the animation will play?
animation-iteration-count
Which property defines when a transition will begin?
transition-delay
Which property specifies a justification style for the last line in a text block whose text-align property is set to “justify”?
text-align-last
Which property defines the shape and curve of a border around the HTML element?
border-radius
Which property defines the amount of time that a transition takes?
transition-duration
Which transform value defines a 3D translation using only the value for the Y-axis?
transform:translateY(y)
Which property applies emphasis style and colour to an HTML element text in a single declaration?
text-emphasis
Which rule defines the animation?
@keyframes
How do you create a class selector?
.myElement {color:blue;}
Which (no longer supported) property specifies whether lines of text in a text area can break, and where a line can be broken?
text-wrap
Which property combines all the animation properties, except animation-play-state?
animation
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Which property specifies whether and how punctuation characters can be trimmed or sized when they appear at the beginning or end of a line?
punctuation-trim
Which property specifies a justification style for text whose text-align property is set to “justify”?
text-justify
What is the valid use of the auto value in a CSS rule?
margin: 0 auto;
Which property specifies how long the animation will take to complete one cycle?
animation-duration
Which property makes an HTML element look like a standard user interface element such as a button or window?
appearance
What happens when you assign a negative z-index value to an element?
The element will display behind other elements
Which property specifies the range of UNICODE characters that should be downloaded for the font, based on availability?
unicode-range
Which transform value defines a 3D transformation using a 4x4 matrix of 16 values?
transform:matrix3d(n,n,n,….)
Which property specifies how the font should be styled vertically or slanted?
font-style
Which property describes the speed of the transition?
transition-timing-function
Which property specifies the tabbing order for an HTML element?
nav-index
Which W3C technology is used to apply formatting instructions to markup language documents?
Cascading Style Sheets
How do you make a list that bullets its items with squares?
list-style-type: square;
Which property specifies the CSS property that the transition will affect?
transition-property
Which transform value turns or skews the HTML element to a specified angle along its Y-axis?
transform:skewY(angle)
Which property specifies whether lines of text in a text area can break, and where a line can be broken?
word-break
values:
break-all (may be broken at any character)
break-words
Which property specifies when the animation will begin?
animation-delay
Which transform value increases or decreases the size of the HTML element based on specified parameters for height, width, and depth?
transform:scale3d(x,y,z)
Which property allows you to change a transformed HTML element’s position?
transform-origin
What is used to “find” the HTML elements you want to style with CSS?
selector
Which two properties are required to specify a custom font?
font-family
src
Which two values are required to create a box-shadow?
h-shadow
v-shadow
If you do not specify the duration for a CSS transition, what happens?
No transition will occur
Which selector targets every instance of element2 that is preceded by an instance of element1?
element1~element2
What is a text file that contains CSS formatting instructions?
External style sheet
How do you select all <p> elements inside a </p><div> element?</div>
div p