Brainscape's Knowledge GenomeTM

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


See full index

D276 - Web Development Foundations > 6. More CSS > Flashcards

6. More CSS Flashcards

1
Q

____ 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

Flexbox

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

A flex container is an element that has the CSS property ____ set to ____ to create a block-level flex container or ____ to create an inline flex container

A

display, flex, inline-flex

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

A ____ is a child element of a flex container that is positioned and sized according to various CSS flexbox properties

A

flex item

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

The ____ 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
5
Q

What are the different values for the flex-direction property?

A

row
row-reverse
column
column-reverse

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

The ____ property defines the space between flex items.

A

gap

gap: 10px;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

The ____ 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
8
Q

What are the different values for the justify-content property?

A

flex-start
flex-end
center
space-between
space-around
space-evenly

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

The ____ 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
10
Q

What are the different values for the flex-wrap property?

A

nowrap (default)
wrap
wrap-reverse

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

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

A

flex-basis
flex-grow
flex-shrink

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

What does flex-basis do, and what values can it be set to?

A

The flex-basis property 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

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

What does the flex-grow property do, and what values can it be set to?

A

The flex-grow property 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

The flex-grow property can also be set to 1, 2, 3, 4, etc., which means that the element will grow to the indicated proportion relative to other elements in the container

The different flex-grow values of all of the elements in a container establish a ratio for each element’s size

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

What does the flex-shrink property do, and what values can it be set to?

A

The flex-shrink property 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

If one element in a container has a flex-shrink value of 2, and another has a flex-shrink value of 1, the first element will shrink twice as much as the second

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

The shorthand ____ property establishes the ____, ____, and ____ properties, in that order, for flex items

A

flex, flex-grow, flex-shrink, flex-basis

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

____ layout is a CSS layout mode that divides a webpage into a rectangular grid in which to position page elements. Grid layout is ideal for designing two-dimensional webpage layouts.

A

Grid

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

A(n) grid ____ is an element that has the CSS property display set to “____” to create a block-level grid container or “____” to create an inline grid container

A

container, grid, inline-grid

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

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

A

item

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

The ____ property defines the grid container’s number of columns and optionally the width of each column.

A

grid-template-columns

grid-template-columns: 50px 90px auto auto;

This 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

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

What does the gap property do in the grid layout?

A

It determines how much space should go between rows and columns.

gap: 5px 25px;

This puts a gap of 5px between rows and 25px between columns

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

What property do you use to determine the row height in a grid?

A

grid-template-rows

grid-template-rows: 20px 40px;

This makes the first row 20px tall and the second row 40px tall

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

What are the different values for the justify-content and align-content property with grids?

A

start - Aligns grid flush with the grid container’s starting edge

end - Aligns grid flush with the grid container’s ending edge

center - Aligns grid in the center of the grid container

stretch - Stretches the grid items to fill the grid container width

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

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

space-evenly - Places equal spacing between grid items, including the sides of the grid container

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

What does the following grid property and value mean?

grid-row: 1 / 3;
A

The grid item starts in row line 1 and ends in row line 3 of the grid.

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

What does the following grid property and value mean?

grid-column: 1 / 4;
A

The grid item starts in column line 1 and ends in column line 4 of the grid.

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

What does the following grid property and value mean?

grid-area: 1 / 2 / 3 / 4;
A

The grid item starts in row line 1 and column line 2 and ends in row line 3 and column line 4

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

What property can you use to name grid items?

A

You can use the grid-area property.

```
body {
grid-template-areas: “head head head”;
}

header {
grid-area: head;
}
~~~

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

What character can you use in the grid-template-areas property to represent an empty grid cell?

A

A period (.)

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

What are the four different values that the position property can use?

A

static - the default positioning

relative - positions the element relative to the element’s default position

fixed - positions the element relative to the viewport in a fixed location

absolute - positions the element relative to the nearest positioned ancestor

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

When an element’s position is absolute, its position is based on the nearest positioned ____ element that uses fixed, absolute, or relative positioning.

A

ancestor

If no positioned ancestor element exists, the element is positioned relative to the document body

30
Q

True or false: an absolute-positioned element scrolls with the document unless an ancestor element is using fixed positioning

A

True

31
Q

The CSS ____ property is used to specify a relative distance that orders the appearance of elements

A

z-index

32
Q

Elements with a ____ z-index value are placed on top of elements with a ____ z-index value

A

higher, lower

33
Q

What CSS property do you use to add drop shadow to text?

A

text-shadow

34
Q

What CSS property do you use to add drop shadow to a box?

A

box-shadow

35
Q

What property values can be specified for the text-shadow property?

A

offset-x, offset-y, blur-radius, color

`text-shadow: -5px -5px 1px green`
36
Q

What property values can be specified for the box-shadow property?

A

inset (draws the shadow inside the box, indicate with the string “inset”), offset-x, offset-y, blur-radius, spread-radius, color

37
Q

An element border’s corners can be rounded using the CSS property ____, which is assigned one to four radius values

A

border-radius

It can be assigned up to four radius values, as follows:

Single value - All four corners are equally rounded

Two values - First value is top-left and bottom-right corners, second value is top-right and bottom-left corners

Three values - First value is top-left, second is top-right and bottom-left, third is bottom-right

Four values - First value is top-left, second is top-right, third is bottom-right, fourth is bottom-left

38
Q

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

A

border-image

The following properties are specified by border-image all at once:

`border-image-source` - image URL

`border-image-slice` - image section size

`border-image-repeat` - "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
39
Q

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

A

vendor prefix

Vendor prefixes:

-webkit- - for Chrome, Safari, and newer versions of Opera

-moz- - for Mozilla

-ms- - for Internet Explorer

-o- - for older versions of Opera

40
Q

What are the two types of CSS gradients?

A
  1. linear gradient - a gradient that follows a straight line
  2. radial gradient - a gradient that radiates outward into an ellipse
41
Q

How do you declare a linear gradient with a certain degree or direction and specific colors?

A

background: linear-gradient(to bottom right, black, red);

42
Q

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

A

repeating-linear-gradient()

repeating-linear-gradient(to right, blue, yellow, green 20%)

The percentage value after the last color is the percent of the gradient’s total length the repeating gradient should occupy. Ex: repeating-linear-gradient(red, yellow 10%) means the red to yellow gradient occupies 10% of the gradient’s total length and is repeated to fill the entire background.

43
Q

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

A

radial-gradient(color1, color2)

More than two colors may be specified. A percentage or length 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.

44
Q

A radial gradient’s ellipse or circle is centered by default in the enclosing rectangle, but the center position can be specified using “____”

A

at centerX centerY

`radial-gradient(at 50px 10px, yellow, green)`

This specifies a center that is 50px from the left edge and 10px from the top.

45
Q

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

A

@keyframes

46
Q

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

A

keyframe list

47
Q

What two keyframe selectors does a keyframe list have?

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

48
Q

To create an animation, what two CSS properties need to be defined?

A

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

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

animation-delay - length of time in seconds (s) or milliseconds (ms) between when the browser renders the web page and when the animation starts

49
Q

The ____ property controls an animation’s speed between keyframes

A

animation-timing-function

Timing functions include:

  • ease - Slow start, then fast, then slow end (default)
  • linear - Same speed throughout
  • ease-in - Slow start
  • ease-out - Slow end
  • ease-in-out - Slow start and end
  • cubic-bezier(n1,n2,n3,n4) - Specify numbers that control speed based on a Bezier curve
50
Q

What values does the shorthand property animation include?

A

animation name, duration, timing function, delay, iteration count, and direction

animation: move 3s linear 2s infinite normal
51
Q

A CSS ____ animates an element’s evolution from one state to another when an element’s CSS property changes value

A

transition

52
Q

How does a CSS transition differ from a CSS animation?

A
  1. Transitions execute when an element’s property values are changed, unlike CSS animations that execute at a particular time
  2. Transitions provide less control over the animation than CSS animations
53
Q

What information must be included in the transition property?

A

The name of a CSS property and each property’s transition duration

div {
  width: 100px;
  height: 100px;
  background-color: purple;
  transition: width 1s, height 1s;
}

div:hover {
  width: 120px;
  height: 120px;
}
54
Q

The ____ property can be used to control the speed of a transition

A

transistion-timing-function

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

linear - Same speed throughout

ease-in - Slow start

ease-out - Slow end

ease-in-out - Slow start and end

cubic-bezier(n1,n2,n3,n4) - Specify numbers that control speed based on a Bezier curve

55
Q

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

A

transformation

56
Q

What are three examples of transformation functions?

A

translate(x, y) - Moves an element on the x-axis x distance and along the y-axis y distance

`scale(x, y)` - Increases (values > 1) or decreases (values < 1) the width and height by the x and y multiplier

`rotate(angle)` - Rotates clockwise by `angle`
57
Q

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

A

appearance

Setting appearance to none hides the browser version of the widget

58
Q

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

A

::before, content

59
Q

Sass is a popular CSS ____ that uses CSS-like syntax to build complex CSS stylesheets

A

preprocessor

60
Q

Sass variables begin with a(n) ____ character

A

$

61
Q

SCSS uses ____ and ____, whereas the original Sass syntax does not

A

brackets, colons

62
Q

Selectors may be ____ in Sass to create child selectors that only apply to the parent selector

A

nested

// SCSS

.notes {
  font-size: smaller;

  strong {
    color: green;
  }
}
63
Q

The ____ character in SCSS is used to reference the parent selector from a child selector’s properties

A

&

// SCSS

a {
  text-decoration: none;
  &:hover {
    color: blue;
  }
}
64
Q

For CSS properties that begin with the same prefix (e.g., font-family, font-size), Sass allows these properties to be ____ under the prefix.

A

nested

// SCSS

p {
  font: {
    family: Arial;
    size: 12pt;
    weight: bold;
  }
}
65
Q

____ is a set of extensions to CSS that allow properties to use variables, arithmetic, and functions

A

SassScript

SassScript also provides basic control directives for performing conditional logic and looping

66
Q

A SassScript variable begins with a(n) ____ character

A

$

67
Q

What variable types can a SassScript variable store?

A

Number - Any number that is optionally followed by a CSS unit

String - “Double”, ‘single’, or unquoted strings

Color - Color name or value

Boolean true or false

Null - null

List of values - Separated by spaces or commas

Map - Key/value pairs

68
Q

A ____ is set of reusable styles and is defined by the ____ directive

A

mixin, @mixin

69
Q

A ____ is an extension to the CSS at-rules, which are statements that begin with the @ character

A

directive

70
Q

Mixins can take ____ and are included in a document using the ____ directive.

A

arguments, @include

D276 - Web Development Foundations (7 decks)

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