CSS3 Flashcards

1
Q

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

A

In-line styles

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Which property specifies transparency for an HTML element?

A

opacity

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

How can you define the position of an animation using the @keyframes rule?

A

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?
1
Not at all
2
3
4
5
Perfectly
4
Q

Which positioning scheme positions an element in relationship to the viewport, meaning it always stays in the same place even if page is scrolled?

A

fixed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

property

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

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

A

absolute

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

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

A

backface-visibility

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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

A

nav-down

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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

A

element[attribute$=value]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

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

A

text-overflow

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

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

A

box-shadow

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

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

A

animation-iteration-count

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Which property defines when a transition will begin?

A

transition-delay

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Which property specifies a justification style for the last line in a text block whose text-align property is set to “justify”?

A

text-align-last

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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

A

border-radius

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

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

A

transition-duration

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

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

A

transform:translateY(y)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

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

A

text-emphasis

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Which rule defines the animation?

A

@keyframes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

How do you create a class selector?

A

.myElement {color:blue;}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Which (no longer supported) property specifies whether lines of text in a text area can break, and where a line can be broken?

A

text-wrap

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Which property combines all the animation properties, except animation-play-state?

A

animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Which property specifies whether and how punctuation characters can be trimmed or sized when they appear at the beginning or end of a line?

A

punctuation-trim

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

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

A

text-justify

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What is the valid use of the auto value in a CSS rule?

A

margin: 0 auto;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Which property specifies how long the animation will take to complete one cycle?

A

animation-duration

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Which property makes an HTML element look like a standard user interface element such as a button or window?

A

appearance

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What happens when you assign a negative z-index value to an element?

A

The element will display behind other elements

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Which property specifies the range of UNICODE characters that should be downloaded for the font, based on availability?

A

unicode-range

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Which transform value defines a 3D transformation using a 4x4 matrix of 16 values?

A

transform:matrix3d(n,n,n,….)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Which property specifies how the font should be styled vertically or slanted?

A

font-style

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Which property describes the speed of the transition?

A

transition-timing-function

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

Which property specifies the tabbing order for an HTML element?

A

nav-index

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Which W3C technology is used to apply formatting instructions to markup language documents?

A

Cascading Style Sheets

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

How do you make a list that bullets its items with squares?

A

list-style-type: square;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Which property specifies the CSS property that the transition will affect?

A

transition-property

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

Which transform value turns or skews the HTML element to a specified angle along its Y-axis?

A

transform:skewY(angle)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

Which property specifies whether lines of text in a text area can break, and where a line can be broken?

A

word-break

values:
break-all (may be broken at any character)
break-words

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

Which property specifies when the animation will begin?

A

animation-delay

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

Which transform value increases or decreases the size of the HTML element based on specified parameters for height, width, and depth?

A

transform:scale3d(x,y,z)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

Which property allows you to change a transformed HTML element’s position?

A

transform-origin

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

What is used to “find” the HTML elements you want to style with CSS?

A

selector

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

Which two properties are required to specify a custom font?

A

font-family

src

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

Which two values are required to create a box-shadow?

A

h-shadow

v-shadow

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

If you do not specify the duration for a CSS transition, what happens?

A

No transition will occur

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

Which selector targets every instance of element2 that is preceded by an instance of element1?

A

element1~element2

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

What is a text file that contains CSS formatting instructions?

A

External style sheet

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

How do you select all <p> elements inside a </p><div> element?</div>

A

div p

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

Which rule allows developers to specify custom fonts?

A

@font-face

50
Q

What model configures the space around each HTML element?

A

The box model

51
Q

Which property applies 2D / 3D transformation to an HRML element, including rotating, moving, skewing, scaling, etc.?

A

transform

52
Q

Which property is used for positioning and formatting content to the text in a container?

A

float

53
Q

Which transform value moves the HTML element from its current position, based on the specified parameters for left and top position?

A

transform:translate(x,y)

54
Q

What consists of a property and a value?

A

declaration

55
Q

Which selector targets every enabled instance of a specified HTML element?

A

element:enabled

56
Q

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

A

element[attribute^=value]

57
Q

Which selector targets every instance of a specified HTML element that is the last of its parent?

A

element:last-of-type

58
Q

Why is a format instruction that consists of a specified selector and the properties and values applied to it?

A

rule

e.g.,

body {
background-color: #008080;
color: #FFFFFF;
}

59
Q

In a grid layout, what does a grid area refer to?

A

A space enclosed between four grid lines

60
Q

Which property specifies how the font should be stretched or spaced?

A

font-stretch

61
Q

Which positioning scheme positions an element in relationship to its normal position?

A

Relative

62
Q

Which selector targets every instance of a specified HTML element that is the first of its parent?

A

element:first-of-type

63
Q

What is the default value of the position property?

A

Static

64
Q

What technique checks a client device or media type and limits the scope of the page design to a specific range?

A

Media query

65
Q

Which transform value increases or decreases the size of the HTML element based on specified parameters for width and height?

A

transform:scale(x,y)

66
Q

Which property specifies the weight of each character in the font?

A

font-weight

67
Q

Which selector targets every instance of a specified HTML element whose specified attribute contains the specified substring value?

A

element[attribute*=value]

68
Q

Which property specifies that long words in a text area may be broken without a hyphen and wrap to the next line?

A

word-wrap

values:
normal (allowed breakpoints)
break-word

69
Q

Which property specifies whether the animation is running or paused?

A

animation-play-state

70
Q

What are five pseudo selectors?

A

element: checked
element: disabled
element: enabled
element: first-of-type
element: last-of-type

71
Q

Which property would you use on an element to prevent other elements from floating beside it?

A

clear

72
Q

What is styles added to the of an HTML document?

A

Embedded or internal style sheet

73
Q

Which property specifies whether to play the animation in reverse on alternate cycles?

A

animation-direction

74
Q

Which property allows you to set different background properties in one declaration?

A

background

E.g.:

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit

75
Q

Which property specified whether the background extends to the border or not?

A

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)

76
Q

Which selector targets all HTML elements based on a certain state?

A

Pseudo selector

77
Q

Which transform value defines a 3D translation using parameters for positions on x, y, and z-axes?

A

transform:translate3d(x,y,z)

78
Q

Which property defines the size of background images?

A

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)

79
Q

Which property styles an HTML element with an iconic equivalent?

A

icon

80
Q

Which positioning scheme positions an element according to the normal flow of the page?

A

static

81
Q

How do you comment in CSS?

A

/* comment */

82
Q

Which property specifies four transition properties into a single property?

A

transition

values:

transition: property duration timing-function delay|initial|inherit;

83
Q

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?

A

hanging-punctuation

84
Q

Which property specifies what elements can float beside the cleared element and on which side?

A

clear

85
Q

Which property positions the background-image relative to an element’s border, padding, or content?

A

background-origin

Values (from the upper left corner of the box):
padding-box
border-box
content-box

86
Q

Which selector targets every checked instance of a specified HTML element?

A

element:checked

87
Q

Which property defines whether an HTML element can be resized by the user and how it can be resized?

A

resize

88
Q

Which property applies shadows to the edges of text characters to create visual depth?

A

text-shadow

89
Q

Which property creates outlined characters for text?

A

text-outline

90
Q

Which transform value defines a 3D rotation by specifying the degree for rotation for all axes?

A

transform:rotate3d(x,y,z,angle)

91
Q

How do you create an ID selector?

A

myElement {color:blue;}

92
Q

Which selector targets all elements with a specific HTML class attribute assigned?

A

class selector

93
Q

What technique is used to place an HTML element on top of another HTML element?

A

overlay

94
Q

Which property creates a border that uses an image instead of a line?

A

border-image

95
Q

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

A

nav-left

96
Q

Floated elements are removed from the normal flow of a document.

A

True

97
Q

Which selector targets every disabled instance of a specified HTML element?

A

element:disabled

98
Q

Which property forces specified HTML element fit an area in a certain way?

A

box-sizing

Values:

content-box (width and height includes only content)
border-box (adds padding and border)

99
Q

Which property specifies a whether a child element will retain the parent element’s position in 3D space?

A

transform-style

100
Q

Which transform value rotates the HTML element around its Y-axis at the specified degree?

A

transform:rotateY(angle)

101
Q

Which transform value combines all of the 2D transform methods into one?

A

transform:matrix(n,n,n,n,n,n)

102
Q

How do you create a tag selector?

A

div {color:blue;}

103
Q

Which transform value rotates the HTML element around its Z-axis at the specified degree?

A

transform:rotateZ(angle)

104
Q

What properties are included in the box model?

A

Height
Padding
Border

105
Q

Which property specifies the stack order of an HTML element?

A

Z-index

106
Q

Which property specifies the identifier for the @keyframes animation that binds it to a selector?

A

animation-name

107
Q

Which property specifies how an animation progresses over one cycle?

A

animation-timing-function

108
Q

Which transform value defines a perspective view for a 3D transformed element?

A

transform:perspective(n)

109
Q

What does this rule do?

h3~p {
color: red;
}

A

Formats every <p> element that is preceded by an </p><h3> element as red text </h3>

110
Q

Which transform value turns or skews the HTML element to a specified angle, based on the specified parameters for horizontal and vertical lines?

A

transform:skew(x-angle,y-angle)

111
Q

Which transform value specifies the bottom position of the 3D element?

A

perspective-origin

112
Q

Which property draws an outline beyond the border edge as specified?

A

outline-offset

113
Q

Which element connects an external style sheet to an HTML document?

A
114
Q

Which transform value rotates the HTML element clockwise at a specified degree?

A

transform:rotate(angle)

115
Q

Which transform value changes the HTML element’s width?

A

transform:scaleX(n)

116
Q

How do you make each word in text start with a capital latter?

A

text-transform:capitalize

117
Q

Which transform value defines a 3D scale transformation by specifying a value for the Z-axis?

A

transform:scaleZ(z)

118
Q

What is a specific selection for a property?

A

value

119
Q

Which transform value moves the HTML element horizontally?

A

transform:translateX(n)

120
Q

Which property specifies the vertical alignment of an element?

A

vertical-align