CSS3 Flashcards by Andrew Kerr

What is style added directly into the HTML element tag to which you want to apply the style?

In-line styles

How well did you know this?

Not at all

Perfectly

Which property specifies transparency for an HTML element?

opacity

How well did you know this?

Not at all

Perfectly

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;}
}

How well did you know this?

Not at all

Perfectly

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

How well did you know this?

Not at all

Perfectly

What is an attribute that can be customized to change the way that the element renders in the browser?

property

How well did you know this?

Not at all

Perfectly

Which positioning scheme positions an element in relationship to the nearest positioned ancestor?

absolute

How well did you know this?

Not at all

Perfectly

Which transform value defines whether or not an element is visible when it is rotated away from the viewer?

backface-visibility

How well did you know this?

Not at all

Perfectly

Which property specifies where the cursor will navigate to when the user presses the arrow-down key?

nav-down

How well did you know this?

Not at all

Perfectly

Which selector targets every instance of a specified HTML element whose specified attribute ends with a specified value?

element[attribute$=value]

How well did you know this?

Not at all

Perfectly

Which property cuts off or clips text that extends beyond its container?

text-overflow

How well did you know this?

Not at all

Perfectly

Which property applies shadows to edges of the HTML elements to create visual depth?

box-shadow

How well did you know this?

Not at all

Perfectly

Which property specifies the number of times that the animation will play?

animation-iteration-count

How well did you know this?

Not at all

Perfectly

Which property defines when a transition will begin?

transition-delay

How well did you know this?

Not at all

Perfectly

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

How well did you know this?

Not at all

Perfectly

Which property defines the shape and curve of a border around the HTML element?

border-radius

How well did you know this?

Not at all

Perfectly

Which property defines the amount of time that a transition takes?

transition-duration

How well did you know this?

Not at all

Perfectly

Which transform value defines a 3D translation using only the value for the Y-axis?

transform:translateY(y)

How well did you know this?

Not at all

Perfectly

Which property applies emphasis style and colour to an HTML element text in a single declaration?

text-emphasis

How well did you know this?

Not at all

Perfectly

Which rule defines the animation?

@keyframes

How well did you know this?

Not at all

Perfectly

How do you create a class selector?

.myElement {color:blue;}

How well did you know this?

Not at all

Perfectly

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

How well did you know this?

Not at all

Perfectly

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;

How well did you know this?

Not at all

Perfectly

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

How well did you know this?

Not at all

Perfectly

Which property specifies a justification style for text whose text-align property is set to “justify”?

text-justify

How well did you know this?

Not at all

Perfectly

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

elements inside a

element?

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

element that is preceded by an

element as red text

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