Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Development Foundations > More CSS > Flashcards

More CSS Flashcards

1
Q

Name the four common elements of a webpage layout

A

Header
Navigational links
Various sections
Footer

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

Blank at the top that identifies the website

A

Header

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

Blank at the top or left side that present the main links for navigating the website

A

Navigational Links

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

Blank that include related content

A

Various sections

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

Blank at the bottom that contains contact information, copyright, author name, etc.

A

Footer

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

Some web pages use a blank, which uses a fixed-width container to envelop the web page contents. Ex: The figure below shows a web page at the top using a fixed layout where the entire contents fit inside 960px. Resizing the browser does not change the width of the web page contents.

A

fixed layout

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

A web page that uses a blank allows the page contents to fill the browser, sometimes by using percentages for widths. Ex: The figure below shows a web page at the bottom using a fluid layout where the contents always fit the browser’s width. Fluid layouts make better use of the available space than fixed layouts and do not produce a horizontal scroll bar when the browser is resized.

A

fluid layout

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

The blank is a CSS layout mode that provides an efficient way to lay out elements in a container so the elements behave predictably when the container is resized or viewed on different screen sizes.

A

Flexible Box or flexbox

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

Many developers find the flexbox layout easier to use than blank elements when creating fluid layouts.

A

floating

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

A blank is an element that has the CSS property display set to flex to create a block-level flex container or inline-flex to create an inline flex container. Ex: <div style="display: flex">.

A

flex container

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

Flex containers hold blank

A

flex items

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

A flex item is a blank of a flex container that is positioned and sized according to various CSS flexbox properties.

A

child element

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

The blank property defines the direction of flex items within the container using values:

A

flex-direction

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

Name the flex-direction values

A

row (default)
row-reverse
column
column-reverse

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

The blank property defines the space between flex items. Ex: gap: 10px; puts a 10px gap between all items.

A

gap

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

The blank property justifies the flex items within the container using values:

A

justify-content

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

Name the justify-content values

A

flex-start (default)
flex-end
center
space-between
space-around

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

The blank property determines if or how flex items wrap onto multiple rows when the container is not wide enough to hold all items

A

flex-wrap

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

Name the flex-wrap values

A

nowrap (default)
wrap
wrap-reverse

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

A flex item’s width is determined by the combination of what three CSS properties

A

The flex-basis property

The flex-grow property

The flex-shrink property

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

Blank sets the initial length of a flex item. The values can be auto (the default), a percentage, or a length unit. The default value auto makes the flex item the same initial length as the content.

A

flex-basis property

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

Blank sets a proportion that determines how much of the available container space should be assigned to the item. The default is 0, meaning the size should be based on the item’s content.

A

Flex grow property

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

Blank sets a proportion that determines the item’s minimum size. The default is 1, meaning the size should shrink at the same rate as other items when the container width shrinks. A value of 0 means the item should not change sizes when the container width shrinks.

A

Flex shrink property

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

The shorthand property blank specifies flex-grow, flex-shrink, and flex-basis together. Ex: flex: 0 1 auto; is the same as flex-grow: 0; flex-shrink: 1; flex-basis: auto;.

A

flex

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

Blank is a CSS layout mode that divides a web page into a rectangular grid in which to position page elements.

A

Grid layout

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

Grid layout is ideal for designing blank web page layouts.

A

two-dimensional

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

A blank is an element that has the CSS property display set to grid to create a block-level grid container or inline-grid to create an inline grid container. Ex: <div style="display: grid">.

A

grid container

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

A blank is a child element of a grid container that is by default placed into a single grid cell.

A

grid item

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

The blank property defines the grid container’s number of columns and optionally the width of each column. Ex: grid-template-columns: 50px 90px auto auto; specifies 4 values that create 4 columns: the first is 50px wide, the second is 90px wide, and the third and fourth columns are automatically sized to fit the remainder of the grid width.

A

grid-template-columns

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

The blank property defines the gap between each grid row and column. Ex: gap: 5px 25px; puts a 5px gap between each row and a 25px gap between each column.

A

gap

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

The blank property defines the height of each row. Ex: grid-template-rows: 20px 40px; makes the first row 20px tall and the second row 40px tall.

A

grid-template-rows

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

The blank property horizontally aligns the grid items inside the grid container

A

justify-content

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

Name the values of the justify-content property

A

start

end

center

stretch

space-around

space-between

space-evenly

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

Aligns grid flush with the grid container’s starting edge.

A

start

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

Places equal spacing between grid items, including the sides of the grid container.

A

space-evenly

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

Places equal spacing between grid items with no space on either side of the grid container.

A

space-between

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

Places equal spacing between grid items with half the space on either side of the grid container.

A

space-around

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

Stretches the grid items to fill the grid container width.

A

stretch

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

Aligns grid in the center of the grid container.

A

center

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

Aligns grid flush with the grid container’s ending edge.

A

end

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

The blank property vertically aligns the grid items inside the grid container

A

align-content

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

Name the values used for align-content

A

start

end

center

stretch

space-around

space-between

space-evenly

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

Places equal spacing between grid items, including the sides of the grid container.

A

space-evenly

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

Places equal spacing between grid items with no space on either side of the grid container.

A

space-between

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

Places equal spacing between grid items with half the space on either side of the grid container.

A

space-around

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

Stretches the grid items to fill the grid container height.

A

stretch

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

Aligns grid in the center of the grid container.

A

center

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

Aligns grid flush with the grid container’s ending edge.

A

end

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

Aligns grid flush with the grid container’s starting edge.

A

start

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

The justify-content and align-content properties have no effect unless the grid width or height is blank than the grid container’s width or height.

A

less

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

A grid item by default appears in a blank based on the ordering of the grid item within the grid container. However, grid items may be positioned at specific grid locations using the column line and row line numbers

A

single row and column

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

The blank property lists the grid item’s starting and ending row line numbers. Ex: grid-row: 1 / 3; makes the grid item start at row line 1 and end at row line 3, so the grid item spans 2 rows.

A

grid-row

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

The blank property lists the grid item’s starting and ending column line numbers. Ex: grid-column: 1 / 4; makes the grid item start at column line 1 and end at column line 4, so the grid item spans 3 columns.

A

grid-column

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

The blank property lists the grid item’s starting and ending row and column numbers. Ex: grid-area: 1 / 2 / 3 / 4; makes the grid item start at row line 1 and column line 2 and end at row line 3 and column line 4, so the grid item spans 2 rows and 2 columns.

A

grid-area

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

Grid items may be assigned names with the blank.

A

grid-area property

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

The grid container’s blank property specifies the grid layout using the named grid items.

A

grid-template-areas

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

The CSS blank property gives developers more control over where elements should appear in the browser.

A

position

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

position has what four possible values:

A

static
relative
fixed
absolute

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

blank positioning positions the element relative to the nearest positioned ancestor

A

Absolute

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

Blank positioning positions the element relative to the viewport in a fixed location

A

Fixed

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

Blank positioning positions the element relative to the element’s default position

A

Relative

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

Blank positioning is the default positioning

A

Static

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

Fixed positioning places the element at a fixed location in the viewport, and blank does not move the element.

A

scrolling

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

A blank is the visible area of a web page

A

viewport

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

The blank is detached from the normal flow of elements in the page and is layered on top of the page contents.

A

fixed element

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

Absolute positioning is similar to fixed positioning except for what two things:

A

The position is based on the nearest positioned ancestor element that uses fixed, absolute, or relative positioning. If no positioned ancestor element exists, the element is positioned relative to the document body.

An absolute-positioned element scrolls with the document unless an ancestor element is using fixed positioning.

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

When a relative, absolute, or fixed element is placed on top of another positioned element, the element that is blank in the HTML is placed on top.

A

specified last

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

The CSS blank property is used to specify a relative distance that orders the appearance of elements. Elements with higher blank values are placed on top of elements with lower blank values.

A

z-index

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

Shadows are added to text using the CSS property blank

A

text-shadow

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

Name four values used for text-shadow

A

offset-x
offset-y
blur-radius
color

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

Horizontal pixel offset of shadow

A

offset-x

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

Vertical pixel offset of shadow

A

offset-y

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

Optional shadow color (default is usually the current CSS color)

A

color

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

Optional shadow blur (default is 0)

A

blur-radius

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

The CSS property blank adds a shadow to the box around an element

A

box-shadow

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

Name six possible values of box-shadow

A

inset
offset-x
offset-y
blur-radius
spread-radius
color

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

Optional value that draws the shadow inside the box (default is outside the box)

A

inset

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

Optional shadow color (default is usually the current CSS color)

A

color

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

Positive value causes shadow to grow, negative values to shrink (default is 0)

A

spread-radius

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

Optional shadow blur (default is 0)

A

blur-radius

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

Vertical pixel offset of shadow

A

offset-y

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

Horizontal pixel offset of shadow

A

offset-x

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

An element border’s corners can be rounded using the CSS property blank

A

border-radius

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

If a border-radius has blank all four corners are equally rounded

A

Single value

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

If a border-radius has blank. First value is top-left and bottom-right corners, second value is top-right and bottom-left corners

A

Two values

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

If a border-radius has blank. First value is top-left, second is top-right and bottom-left, third is bottom-right

A

Three values

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

If a border-radius has blank. First value is top-left, second is top-right, third is bottom-right, fourth is bottom-left

A

Four values

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

Each corner may also be assigned a radius using what four CSS properties

A

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

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

The CSS property blankl renders an element’s border using sections of an image.

A

border-image

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

The border image takes the place of any border properties specified by blank.

A

border-style

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

What CSS properties are specified by border-image all at once

A

border-image-source - Image URL
border-image-slice - Image section size
border-image-repeat

92
Q

what are the three possible values for border-image-repeat?

A

“repeat” to repeat the image section, “round” to repeat the image section but resize the image if needed to fit, or “stretch” to stretch an image section

93
Q

A border image will not appear unless the blank property is non-zero and blank is set to any legal value except none and hidden.

A

border-width
border-style

94
Q

A blank is a prefix added to an experimental or nonstandard CSS property that only works on a specific browser type

A

vendor prefix

95
Q

Name four typical vendor prefixes:

A

-webkit
-moz
-ms
-o

96
Q

vendor prefix for Chrome, Safari, and newer versions of Opera

A

-webkit

97
Q

vendor prefix for for Firefox

A

-moz

98
Q

vendor prefix for Internet Explorer

A

-ms

99
Q

vendor prefix for older versions of Opera

A

-o

100
Q

A CSS background may use blank that transition from one color to another.

A

gradient colors

101
Q

Name the two CSS gradients:

A

Linear gradient
Radial gradient

102
Q

Blank is a gradient that follows a straight line

A

linear gradient

103
Q

Blank is a gradient that radiates outward into an ellipse

A

radial gradient

104
Q

The CSS function blank creates a linear gradient that transitions from color1 to color2 when moving from the top edge to the bottom edge.

A

linear-gradient(color1, color2)

105
Q

To change the gradient’s direction, the first argument to blank can be a direction or an angle

A

linear-gradient

106
Q

Name the four linear-gradient direction values

A

to left
to right
to top
to bottom

107
Q

Angle - A CSS angle that points in the direction of the linear gradient. What does angles 0deg, 90deg, 180deg, and 270deg correspond to

A

to top, to right, to bottom, and to left

108
Q

The blank function repeats a linear gradient where the color values are supplied an optional percent.

A

repeating-linear-gradient()

109
Q

The blank value after the last color is the percent of the gradient’s total length the repeating gradient should occupy.

A

percentage

110
Q

A blank is created with the CSS function radial-gradient(color1, color2), which creates an ellipse-shaped gradient that begins with color1 in the center and ends with color2 on the perimeter

A

radial gradient

111
Q

A blank can be placed after a color to give more emphasis to the color. Ex: radial-gradient(red 10%, yellow 30%) gives more emphasis to red and yellow than the default rendering.

A

percentage or length

112
Q

The blank shape of a radial gradient fits the gradient’s bounding rectangle.

A

ellipse

113
Q

a circular radial gradient can be created with the blank. Ex: radial-gradient(circle, red, yellow) creates a circle gradient.

A

circle argument

114
Q

A radial gradient’s ellipse or circle is centered by default in the enclosing rectangle, but the center position can be specified using blank where centerX and centerY specify a distance or percentage. Ex: radial-gradient(at 50px 10px, yellow, green) specifies a center that is 50px from the left edge and 10px from the top.

A

“at centerX centerY”

115
Q

By default, a radial gradient’s shape reaches to the blank of the containing rectangle.

A

farthest corner

116
Q

An blank describes the size of the radial gradient’s shape:

A

extent keyword

117
Q

Name four possible extent keyword values

A

closest-side
farthest-side
closest-corner
farthest-corner

118
Q

Circle touches the rectangle’s side closest to the circle’s center. Ellipse touches the vertical and horizontal sides closest to the ellipse’s center.

A

closest-side

119
Q

Circle or ellipse touches the corner farthest from the shape’s center. (Default behavior.)

A

farthest-corner

120
Q

Circle or ellipse touches the corner closest to the shape’s center.

A

closest-corner

121
Q

Circle touches the rectangle’s side farthest from the circle’s center. Ellipse touches the vertical and horizontal sides farthest from the ellipse’s center.

A

farthest-side

122
Q

Developers often use blank and blank like jQuery to produce animations.

A

JavaScript and JavaScript libraries

123
Q

A blank transforms an element’s styles over a set time period, producing an animation.

A

CSS animation

124
Q

CSS animations have three advantages over JavaScript animations. Name them

A

CSS animations do not require any JavaScript code.

CSS animations often put less load on the computer and can use techniques to produce smoother animations when the computer’s resources are limited.

CSS animations allow the browser to more efficiently control animations and stop animations from running in browser tabs that are not visible.

125
Q

A CSS animation’s behavior is defined with the blank rule, which contains a keyframe list

A

@keyframes

126
Q

A blank has a name and contains the keyframes or the properties and values that will be animated.

A

keyframe list

127
Q

A keyframe list contains two keyframe selectors. Name them and what do they mean

A

from - The animation starting state that lists the CSS properties and values that apply when the animation begins

to - The animation ending state that lists the CSS properties and values that the “from” values become by the time the animation ends

128
Q

Blank may be used to specify keyframes at various points during the animation. Ex: 0% is equivalent to from and 100% is equivalent to to. The value 50% indicates the animation state at the halfway point.

A

Percentages

129
Q

To create an animation, two CSS properties must be defined. Name them.

A

animation-name - Names the keyframe list associated with the animation

animation-duration - Length of the animation in seconds (s) or milliseconds (ms)

130
Q

An animation begins immediately when the browser renders the web page unless an blank is used to delay the start of the animation

A

animation-delay

131
Q

The blank property controls an animation’s speed between keyframes.

A

animation-timing-function

132
Q

Several timing functions are available. Name them

A

ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier(n1,n2,n3,n4)

133
Q

Slow start, then fast, then slow end (default)

A

ease

134
Q

Same speed throughout

A

linear

135
Q

Slow start

A

ease-in

136
Q

slow end

A

ease-out

137
Q

Slow start and end

A

ease-in-out

138
Q

Specify numbers that control speed based on a Bezier curve

A

cubic-bezier(n1,n2,n3,n4)

139
Q

Blank Indicates the number of times the animation will run. The value infinite runs the animation repeatedly without stopping. Ex: animation-iteration-count: 3 runs the animation three times.

A

animation-iteration-count

140
Q

Name the four values of animation-direction

A

normal - Normal direction (default)
reverse - Reverse direction
alternate - Alternate between normal and reverse
alternate-reverse - Alternate between reverse and normal

141
Q

Blank is the shorthand property indicating the animation name, duration, timing function, delay, iteration count, and direction. Ex: animation: move 3s linear 2s infinite normal.

A

animation

142
Q

A blank animates an element’s transition from one state to another when an element’s CSS property changes value.

A

CSS transition

143
Q

Transitions are commonly used with the blank to trigger an animation when the user mouses over an element.

A

:hover pseudo-class

144
Q

Transitions differ from CSS animations in what two ways

A

Transitions execute when an element’s property values are changed, unlike CSS animations that execute at a particular time.

Transitions provide less control over the animation than CSS animations.

145
Q

The blank defines a transition by specifying one or more CSS properties and each property’s transition duration.

A

transition property

146
Q

Several transition-timing-function functions are available, and all complete in the same amount of time:

A

ease
linear -
ease-in
ease-out
ease-in-out
cubic-bezier(n1,n2,n3,n4)

147
Q

transition timing - Slow start, then fast, then slow end (default)

A

ease

148
Q

transition timing - Same speed throughout

A

linear

149
Q

transition timing - Slow start

A

ease-in

150
Q

transition timing - Slow end

A

ease-out

151
Q

transition timing - Slow start and end

A

ease-in-out

152
Q

transition timing - Specify numbers that control speed based on a Bezier curve

A

cubic-bezier(n1,n2,n3,n4)

153
Q

The blank property delays the transition’s start.

A

transition-delay

154
Q

The blank property applies a 2D or 3D transformation to an element.

A

transform

155
Q

A blank is a graphical operation that alters the position, shape, or orientation of an object.

A

transformation

156
Q

The transform property is assigned a blank

A

transformation function

157
Q

transform function that moves an element on the x-axis x distance and along the y-axis y distance
/* Moves right 10px and up 20px */
translate(10px, -20px)

A

translate(x, y)

158
Q

transform function that Increases (values > 1) or decreases (values < 1) the width and height by the x and y multiplier
/* Halves the width, doubles the height */
scale(0.5, 2)

A

scale(x, y)

159
Q

transform function that rotates clockwise by angle /* Rotates clockwise 45 degrees */
rotate(45deg)

A

rotate(angle)

160
Q

The W3C recommends putting form elements in blank, but many leading web frameworks like Bootstrap use blank instead. Either container is acceptable, and this material uses both styles.

A

<p> tags
<div> tags
</div></p>

161
Q

The best places for labels are immediately above or to the left of an input field. Some developers use only the blank HTML attribute in place of labels to save screen space and reduce clutter, especially on mobile devices. However, usability experts warn that placeholders used as labels can create a number of problems for users and should be avoided.

A

placeholder

162
Q

The CSS property blank is used to control a widget’s appearance based on the operating system’s theme. Setting appearance to blank hides the widget.

A

appearance
none

163
Q

To display a custom radio button or checkbox, the blank pseudo-element selector and content property are used to insert content before the label’s content that looks like a radio button or checkbox.

A

::before

164
Q

blank is a popular CSS preprocessor that uses CSS-like syntax to build complex CSS stylesheets. Other popular CSS preprocessors, like Less and Stylus, offer similar and unique features with different syntax.

A

Sass

165
Q

Sass version 3 introduced a new syntax called blank, which uses semicolons and brackets like CSS. Some online references still refer to the old Sass syntax which relies on indentation and has no brackets.

A

Sassy CSS (SCSS)

166
Q

Selectors may be blank in Sass to create child selectors that only apply to the parent selector. In the figure below, the strong child selector is nested in a .notes parent selector, creating a .notes strong selector in the resulting CSS.

A

nested

167
Q

The blank is used to reference the parent selector from a child selector’s properties.

A

& character

168
Q

Sass allows properties that share the same prefix to be blank under the prefix.

A

nested

169
Q

Blank is a set of extensions to CSS that allow properties to use variables, arithmetic, and functions. SassScript also provides basic control directives for performing conditional logic and looping.

A

SassScript

170
Q

A SassScript variable begins with a blank and can store data types

A

$

171
Q

Name the SassScript data types

A

Number - Any number that is optionally followed by a CSS unit. Ex: 3, 5.1, 20px

String - “Double”, ‘single’, or unquoted strings. Ex: “red”, ‘red’, red

Color - Color name or value. Ex: green, #00ff00, rgb(0,255,0)

Boolean - true or false

Null - null

List of values - Separated by spaces or commas. Ex: 10px 20px 30px 40px,
Helvetica, Arial, sans-serif

Map - Key/value pairs. Ex: (111:red, 222:blue)

172
Q

Blank like addition, subtraction, multiplication, and division may be performed on numbers and numeric variables. Ex: 20px + 15 = 35px. Arithmetic on color values results in the red, green, and blue values being added, subtracted, multiplied, or divided one at a time. Ex: #0011aa + #bb2244 results in 00 + bb = bb, 11 + 22 = 33, and aa + 44 = ee; so the final value is #bb33ee.

A

Basic arithmetic

173
Q

SassScript function that returns string using all uppercase characters.
/* Returns “BEHOLD!” */
$message: to-upper-case(“Behold!”);

A

to-upper-case(string)

174
Q

SassScript function that returns a color lightened by an amount between 0% and 100%
/* Returns #d00 */
$color: lighten(#a00, 10%);

A

lighten(color, amount)

175
Q

SassScript function that returns the inverse (negative) of a color
/* Returns #5ff */
$color: invert(#a00);

A

invert(color)

176
Q

SassScript function that returns a number rounded to the nearest whole number
/* Returns 21px */
$width: round(20.5px);

A

round(number)

177
Q

SassScript function that returns a random integer between 1 and limit (inclusive)
/* Returns a number between 1 and 5 that is multiplied by 20px */
$width: random(5) * 20px;

A

random(limit)

178
Q

A blank is set of reusable styles and is defined by the @mixin directive.

A

mixin

179
Q

A directive is an extension to the CSS at-rules, which are statements that begin with the blankcharacter.

A

@

180
Q

Mixins may take blank, which give mixins the ability to customize the styles that the mixin defines.

A

arguments

181
Q

Mixins are included in a document using the blank directive.

A

@include

182
Q

Sass contains other features including blank like @if and @for, that support conditional styling and looping

A

Control directives,

183
Q

Sass contains other features including the ability to import SCSS and Sass files using the blank directive

A

@import

184
Q

Sass contains other features including the ability to extend the styles in a class with the blank

A

@extend directive

185
Q

Sass contains other features including the ability to write blank functions

A

custom

186
Q

A blank is a web browser designed for mobile devices that can display web pages using HTML, CSS, and JavaScript.

A

mobile web browser

187
Q

A blank is a website that is designed for mobile devices with smaller screen sizes and touch interfaces.

A

mobile website

188
Q

Mobile and desktop websites are created with the blank.

A

same technologies: HTML, CSS, and JavaScript

189
Q

Developers implement mobile websites using what three main techniques:

A

Separate websites

Dynamic serving:

Responsive web design:

190
Q

Two different websites are created, one for desktop and one for mobile.

A

Separate websites

191
Q

The web server sends back the same HTML to both desktop and mobile browsers, but the browsers alter the appearance of the web page to match the device size.

A

Responsive web design:

192
Q

The same URL is requested by both desktop and mobile web browsers, but the web server sends back a desktop version to desktop browsers and a mobile version to mobile browsers.

A

Dynamic serving:

193
Q

Blank is a collection of techniques to create web pages that adapt to the browser’s size.

A

Responsive web design (RWD)

194
Q

RWD is characterized by what three things:

A

Elements are laid out on fluid, proportion-based grids that use relative units like percentages instead of absolute units like pixels.

Images are sized with relative units to adapt to various screen sizes.

CSS media queries apply different CSS styles depending on the browser’s width.

195
Q

RWD allows developers to create a blank that looks good on mobile, desktop, and tablet browsers.

A

single web page

196
Q

An blank adapts to the width of the browser at specific widths. Ex: A container is 400 pixels wide when the browser is wider than 500 pixels, but the container shrinks to 200 pixels when the browser is less than 500 pixels wide. A responsive website will instead smoothly adjust the width of the container to fit the browser width.

A

adaptive website

197
Q

Developers follow what two general strategies to design websites for all three platforms:

A

Graceful degradation

Progressive enhancement

198
Q

Design the desktop website first and modify the design to fit smaller screens.

A

Graceful degradation

199
Q

A “mobile first” design methodology that begins with designing the website for the smallest device and then adapts the design for larger screens.

A

Progressive enhancement

200
Q

Good practice is to use blank to build websites that show equivalent text and images and provide the same functionality on all platforms.

A

progressive enhancement

201
Q

A blank is ideal for both desktop and mobile devices.

A

fluid layout

202
Q

A fluid layout that works well on a desktop does not always work well on a mobile device. Developers use blank to modify a web page’s layout depending on the browser’s width.

A

responsive web design

203
Q

Webpages using responsive web design adapt to different viewport sizes using blank.

A

media queries

204
Q

A blank is a combination of media type and optionally one or more media feature expressions that evaluate to true or false.

A

CSS media query

205
Q

A blank is a device category that a media query applies to. Ex: all, print, and screen

A

media type

206
Q

A blank is a characteristic of a browser, device, or environment. Ex: aspect-ratio, height, and orientation.

A

media feature

207
Q

Some media features may be prefixed with blank or blank to express ≥ or ≤ constraints. Ex: min-width:200px means width ≥ 200px.

A

“min-“ or “max-“

208
Q

Media type for all devices (default value if no media type is listed)

A

all

209
Q

Media type for printers and documents viewed on screen in print preview mode

A

print

210
Q

Media type intended for screens

A

screen

211
Q

Viewport’s width-to-height aspect ratio

A

aspect-ratio

212
Q

Viewport’s height

A

height

213
Q

Viewport’s width

A

width

214
Q

Viewport’s orientation: portrait or landscape

A

orientation

215
Q

Device’s pixel density

A

resolution

216
Q

Media queries often are used in blank elements and in stylesheets.

A

<link></link>

217
Q

A media query in a <link></link> is specified with the blank. When the media query matches (evaluates to true), the link’s stylesheet is downloaded.

A

media attribute

218
Q

A media query in a stylesheet is specified with the blank. An at-rule is a CSS statement that starts with the @ character and instructs the CSS engine how to behave. When a media query in a stylesheet matches, the @media’s inner rules are defined.

A

@media at-rule

219
Q

Developers choose blank to determine when content should be displayed, resized, or hidden in a web page.

A

“breakpoints”

220
Q

A blank is the screen width that activates a media query. Ex: In the media query @media screen and (max-width: 800px), 800 is the breakpoint.

A

breakpoint

221
Q

Good practice is to use breakpoints that target the blank rather than a specific device.

A

content

222
Q

Media query breakpoints do not work properly unless the viewport blank sets the viewport width to the device width.

A

meta tag

223
Q

Blank is one of the most popular free, open-source frameworks. It uses HTML, CSS, and JavaScript to help a developer create responsive websites.

A

Bootstrap

224
Q

Bootstrap was created by Mark Otto and Jacob Thornton at Twitter during a hackathon session in mid-2010. It was originally called blank, but it was renamed Bootstrap before its release.

A

Twitter Blueprint

225
Q

A designer may choose to employ blank, which are visual signals that help communicate information to the website visitor. The Bootstrap framework has many icons that can be used both within and without the framework.

A

website icons

226
Q

The overall appearance of the text on your website is called blank. You need to make sure that the website’s typography is consistent throughout. The Bootstrap framework allows you to control global settings, headings, body text, lists, and other elements, to create that unified website look and feel.

A

typography

Web Development Foundations (6 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions