CSS Flashcards
Which selector targets every instance of a specified HTML element whose specified attribute ends with the specified value?
$
element[attribute$=value]
Which selector targets every instance of a specified HTML element whose specified attribute contains the specified substring value?
*
element[attribute*=value]
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 checked instance of a specified HTML element?
element:checked
Which selector targets every disabled instance of a specified HTML element?
element:disabled
Which selector targets every enabled instance of a specified HTML element?
element:enabled
Which selector targets every instance of a specified HTML element that is the first of its parent?
element:first-of-type
Which selector targets every instance of a specified HTML element that is the last of its parent?
element:last-of-type
Which selector targets every instance of element2 that is preceded by an instance of element1?
element1~element2
Which property allows you to set different background properties in one declaration?
background
Which property specifies whether the background extends into the border or not?
background-clip
Which property positions the background-image relative to an element’s border, padding or content?
background-origin
Which property defines the size of background images?
background-size
Which property creates a border that uses an image instead of a line?
border-image
Which property defines the shape or curve of a border around an HTML element?
border-radius
Which property applies shadows to edges of HTML elements to create visual depth?
box-shadow
Which two values are required to create a box-shadow?
h-shadow and v-shadow
Which property specifies transparency for an HTML element?
opacity
Which property defines whether an HTML element can be resized by the user and how it can be resized?
resize
Which property cuts off, or clips, text that extends beyond its container?
text-overflow
Which property applies shadows to edges of text characters to create visual depth?
text-shadow
Which rule allows developers to specify custom fonts?
@font-face
Which two properties are required to specify a custom font?
font-family — specifies the font name
src — identifies the font file’s location by URL
Which property specifies how the font should be stretched or spaced?
font-stretch
Which property specifies how the font should be styled vertical or slanted?
font-style
Which property specifies the weight or thickness of each character in the font?
font-weight
Which property specifies the range of UNICODE characters that should be downloaded for the font, based on availability?
unicode-range
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 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 the last line in a text block whose text-align property is set to “justify”?
text-align-last
Which property applies emphasis style and color to an HTML element’s text in a single declaration?
text-emphasis
Which property specifies a justification style for text whose text-align property is set to “justify”?
text-justify
Which property specifies whether lines of text in a text area can break, and where a line can be broken? This property is no longer supported.
text-wrap
Which property specifies whether lines of text in a text area can break, and where a line can be broken?
word-break
Which property specifies that long words in a text area may be broken without a hyphen and wrap to the next line?
word-wrap
Which property applies a 2D or 3D transformation to an HTML element, including rotating, moving, skewing, scaling and so forth?
transform
Which property allows you to change a transformed HTML element’s position?
transform-origin
Which property specifies whether child elements will retain the parent element’s position in 3D space?
transform-style
Which transform value specifies the bottom position of a 3D element?
perspective-origin
Which transform value defines whether or not an element is visible when it is rotated to face away from the viewer?
backface-visibility
Which transform value rotates the HTML element clockwise at the specified degree?
transform:rotate(angle)
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 transform value changes the HTML element’s width?
transform:scaleX(n)
Which transform value changes the HTML element’s height?
transform:scaleY(n)
Which transform value combines all of the 2D transform methods into one?
transform:matrix(n,n,n,n,n,n)
Which transform value moves the HTML element from its current position, based on the specified parameters for the left and top position?
transform:translate(x,y)
Which transform value moves the HTML element horizontally?
transform:translateX(n)
Which transform value moves the HTML element vertically?
transform:translateY(n)
Which transform value turns or skews the HTML element to a specified angle, based on the specified parameters for the horizontal and vertical lines?
transform:skew(x-angle,y-angle)
Which transform value turns or skews the HTML element to a specified angle along its X-axis?
transform:skewX(angle)
Which transform value turns or skews the HTML element to a specified angle along its Y-axis?
transform:skewY(angle)
Which transform value rotates the HTML element around its X-axis at the specified degree?
transform:rotateX(angle)
Which transform value rotates the HTML element around its Y-axis at the specified degree?
transform:rotateY(angle)
Which transform value rotates the HTML element around its Z-axis at the specified degree?
transform:rotateZ(angle)
Which transform value defines a 3D rotation by specifying the degree for rotation for all axes?
transform:rotate3d(x,y,z,angle)
Which transform value increases or decreases the size of the HTML element, based on specified parameters for width, height and depth?
transform:scale3d(x,y,z)
Which transform value defines a 3D scale transformation by specifying a value for the X-axis?
transform:scaleX(x)
Which transform value defines a 3D scale transformation by specifying a value for the Y-axis?
transform:scaleY(y)
Which transform value defines a 3D scale transformation by specifying a value for the Z-axis?
transform:scaleZ(z)
Which transform value defines a 3D translation using specified parameters for positions on the X-axis, Y-axis and Z-axis?
transform:translate3d(x,y,z)
Which transform value defines a 3D translation using only the value for the X-axis?
transform:translateX(x)
Which transform value defines a 3D translation using only the value for the Y-axis?
transform:translateY(y)
Which transform value defines a 3D translation using only the value for the Z-axis?
transform:translateZ(z)
Which transform value defines a 3D transformation using a 4x4 matrix of 16 values?
transform:matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Which transform value defines a perspective view for a 3D transformed element?
transform:perspective(n)
Which property specifics the four transition properties into a single property?
transition
If you do not specify the duration for a CSS transition, what happens?
No transition will occur
Which property specifies the CSS property that the transition will affect?
transition-property
Which property defines the amount of time that a transition takes?
transition-duration
Which property describes the speed of a transition?
transition-timing-function
Which property defines when the transition will begin?
transition-delay
Which rule defines the animation?
@keyframes
How can you define the position of an animation using the @keyframes rule?
div {
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
}
How can you define the position of an animation using the @keyframes rule?
By specifying a percentage from 0% to 100%
or by using the keywords “to” and “from”
Which property combines all the animation properties, except animation-play-state?
animation
Which property specifies the identifier for the @keyframes animation that binds it to a selector?
animation-name
Which property specifies how long the animation will take to complete one cycle?
animation-duration
Which property specifies how an animation progresses over one cycle?
animation-timing-function
Which property specifies when the animation will begin?
animation-delay
Which property specifies the number of times that the animation will play?
animation-iteration-count
Which property specifies whether to play the animation in reverse on alternate cycles?
animation-direction
Which property specifies whether the animation is running or paused?
animation-play-state
Which property makes an HTML element look like a standard user interface element, such as a button or window?
appearance
Which property forces specified HTML elements fit an area in a certain way?
box-sizing
Which property styles an HTML element with an iconic equivalent?
icon
Which property specifies where the cursor will navigate to when the user presses the arrow-down key?
nav-down
Which property specifies the tabbing order for an HTML element?
nav-index
Which property specifies where the cursor will navigate to when the user presses the arrow-left key?
nav-left
Which property specifies where the cursor will navigate to when the user presses the arrow-right key?
nav-right
Which property specifies where the cursor will navigate to when the user presses the arrow-up key?
nav-up
Which property draws an outline beyond the border edge as specified?
outline-offset
What happens when you assign a negative z-index value to an element?
The element will display behind other elements.
Which property specifies the stack order of an HTML element?
z-index
What consists of a property and a value?
declaration
What is a format instruction that consists of a specified selector and the properties and values applied to it?
rule
What is used to “find” the HTML elements you want to style with CSS?
selector
What is an attribute that can be customized to change the way the element renders in the browser?
property
What is a specific selection for a property?
value
Which selector targets all elements with a specific HTML class attribute assigned?
class selector
Which selector targets one HTML element with a specific id attribute assigned?
id selector
How do you create an ID selector?
myElement {color:blue;}
How do you create a tag selector?
div {color:blue;}
How do you create a class selector?
.myElement {color:blue;}
Which selector targets all HTML elements based on a certain state?
pseudo selector
Which selector targets all HTML elements based on the element name?
tag selector
What technique checks a client device, or media type, then limits the scope of the page design to a specific range?
media query
What technique is used to place an HTML element on top of another HTML element?
overlay
What is a text file that contains CSS formatting instructions?
External style sheet
What are styles added to the <head> of individual an HTML document?
Embedded or Internal style sheet
What is style added directly into the HTML element tag to which you want to apply the style?
Inline styles
How do you create a comment in CSS?
/* A comment is added here */
**Which element connects an external style sheet to an HTML document?
<link>
Which property is used for positioning and formatting content to the text in a container?
float
Which property specifies what elements can float beside the cleared element and on which side?
clear
Which positioning scheme positions an element according to the normal flow of the page?
static
Which positioning scheme positions an element in relationship to its normal position?
relative
Which positioning scheme positions an element in relationship to the viewport, meaning it always stays in the same place even if the page is scrolled?
fixed
Which positioning scheme positions an element in relationship to the nearest positioned ancestor?
absolute
Which property defines the transparent area inside of the border?
padding
Which property defines the transparent area outside of the border?
margin
What model configures the space around each HTML element?
box model
Which property specifies the vertical alignment of an element?
vertical-align
What does this rule do?
h3~p {color: red;}
formats every <p> element that is preceded by an <h3> element as red text
Which W3C technology is used to apply formatting instructions to markup language documents?
Cascading Style Sheets (CSS)
