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
Which rule allows developers to specify custom fonts?
@font-face
What model configures the space around each HTML element?
The box model
Which property applies 2D / 3D transformation to an HRML element, including rotating, moving, skewing, scaling, etc.?
transform
Which property is used for positioning and formatting content to the text in a container?
float
Which transform value moves the HTML element from its current position, based on the specified parameters for left and top position?
transform:translate(x,y)
What consists of a property and a value?
declaration
Which selector targets every enabled instance of a specified HTML element?
element:enabled
Which selector targets every instance of a specified HTML element whose specified attribute begins with the specified value?
element[attribute^=value]
Which selector targets every instance of a specified HTML element that is the last of its parent?
element:last-of-type
Why is a format instruction that consists of a specified selector and the properties and values applied to it?
rule
e.g.,
body {
background-color: #008080;
color: #FFFFFF;
}
In a grid layout, what does a grid area refer to?
A space enclosed between four grid lines
Which property specifies how the font should be stretched or spaced?
font-stretch
Which positioning scheme positions an element in relationship to its normal position?
Relative
Which selector targets every instance of a specified HTML element that is the first of its parent?
element:first-of-type
What is the default value of the position property?
Static
What technique checks a client device or media type and limits the scope of the page design to a specific range?
Media query
Which transform value increases or decreases the size of the HTML element based on specified parameters for width and height?
transform:scale(x,y)
Which property specifies the weight of each character in the font?
font-weight
Which selector targets every instance of a specified HTML element whose specified attribute contains the specified substring value?
element[attribute*=value]
Which property specifies that long words in a text area may be broken without a hyphen and wrap to the next line?
word-wrap
values:
normal (allowed breakpoints)
break-word
Which property specifies whether the animation is running or paused?
animation-play-state
What are five pseudo selectors?
element: checked
element: disabled
element: enabled
element: first-of-type
element: last-of-type
Which property would you use on an element to prevent other elements from floating beside it?
clear
What is styles added to the of an HTML document?
Embedded or internal style sheet
Which property specifies whether to play the animation in reverse on alternate cycles?
animation-direction
Which property allows you to set different background properties in one declaration?
background
E.g.:
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit
Which property specified whether the background extends to the border or not?
background-clip
values:
border-box (extends behind border)
padding-box (extends to inside edge of border)
content-box (extends to the edge of the content box)
Which selector targets all HTML elements based on a certain state?
Pseudo selector
Which transform value defines a 3D translation using parameters for positions on x, y, and z-axes?
transform:translate3d(x,y,z)
Which property defines the size of background images?
background-size
values:
length (width and height in fixed units)
percentage (width and height in relation to parent element)
cover (the entire container)
contain (resize image so that image is fully visible)
Which property styles an HTML element with an iconic equivalent?
icon
Which positioning scheme positions an element according to the normal flow of the page?
static
How do you comment in CSS?
/* comment */
Which property specifies four transition properties into a single property?
transition
values:
transition: property duration timing-function delay|initial|inherit;
Which property specifies whether and how punctuation characters can appear outside the line box at the beginning or end of a full line of text?
hanging-punctuation
Which property specifies what elements can float beside the cleared element and on which side?
clear
Which property positions the background-image relative to an element’s border, padding, or content?
background-origin
Values (from the upper left corner of the box):
padding-box
border-box
content-box
Which selector targets every checked instance of a specified HTML element?
element:checked
Which property defines whether an HTML element can be resized by the user and how it can be resized?
resize
Which property applies shadows to the edges of text characters to create visual depth?
text-shadow
Which property creates outlined characters for text?
text-outline
Which transform value defines a 3D rotation by specifying the degree for rotation for all axes?
transform:rotate3d(x,y,z,angle)
How do you create an ID selector?
myElement {color:blue;}
Which selector targets all elements with a specific HTML class attribute assigned?
class selector
What technique is used to place an HTML element on top of another HTML element?
overlay
Which property creates a border that uses an image instead of a line?
border-image
Which property specifies where the cursor will navigate to when the user presses the arrow-left key?
nav-left
Floated elements are removed from the normal flow of a document.
True
Which selector targets every disabled instance of a specified HTML element?
element:disabled
Which property forces specified HTML element fit an area in a certain way?
box-sizing
Values:
content-box (width and height includes only content)
border-box (adds padding and border)
Which property specifies a whether a child element will retain the parent element’s position in 3D space?
transform-style
Which transform value rotates the HTML element around its Y-axis at the specified degree?
transform:rotateY(angle)
Which transform value combines all of the 2D transform methods into one?
transform:matrix(n,n,n,n,n,n)
How do you create a tag selector?
div {color:blue;}
Which transform value rotates the HTML element around its Z-axis at the specified degree?
transform:rotateZ(angle)
What properties are included in the box model?
Height
Padding
Border
Which property specifies the stack order of an HTML element?
Z-index
Which property specifies the identifier for the @keyframes animation that binds it to a selector?
animation-name
Which property specifies how an animation progresses over one cycle?
animation-timing-function
Which transform value defines a perspective view for a 3D transformed element?
transform:perspective(n)
What does this rule do?
h3~p {
color: red;
}
Formats every <p> element that is preceded by an </p><h3> element as red text </h3>
Which transform value turns or skews the HTML element to a specified angle, based on the specified parameters for horizontal and vertical lines?
transform:skew(x-angle,y-angle)
Which transform value specifies the bottom position of the 3D element?
perspective-origin
Which property draws an outline beyond the border edge as specified?
outline-offset
Which element connects an external style sheet to an HTML document?
Which transform value rotates the HTML element clockwise at a specified degree?
transform:rotate(angle)
Which transform value changes the HTML element’s width?
transform:scaleX(n)
How do you make each word in text start with a capital latter?
text-transform:capitalize
Which transform value defines a 3D scale transformation by specifying a value for the Z-axis?
transform:scaleZ(z)
What is a specific selection for a property?
value
Which transform value moves the HTML element horizontally?
transform:translateX(n)
Which property specifies the vertical alignment of an element?
vertical-align
