6. More CSS

Question 1

____ 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.

Answer 1

Flexbox

Question 2

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

Answer 2

display, flex, inline-flex

Question 3

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

Answer 3

flex item

Question 4

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

Answer 4

flex-direction

Question 5

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

Answer 5

row
row-reverse
column
column-reverse

Question 6

The ____ property defines the space between flex items.

Answer 6

gap

gap: 10px;

Question 7

The ____ property justifies the flex items within the container using values

Answer 7

justify-content

Question 8

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

Answer 8

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

Question 9

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

Answer 9

flex-wrap

Question 10

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

Answer 10

nowrap (default)
wrap
wrap-reverse

Question 11

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

Answer 11

flex-basis
flex-grow
flex-shrink

Question 12

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

Answer 12

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

Question 13

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

Answer 13

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

Question 14

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

Answer 14

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

Question 15

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

Answer 15

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

Question 16

____ 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.

Answer 16

Grid

Question 17

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

Answer 17

container, grid, inline-grid

Question 18

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

Answer 18

item

Question 19

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

Answer 19

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

Question 20

What does the gap property do in the grid layout?

Answer 20

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

Question 21

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

Answer 21

grid-template-rows

grid-template-rows: 20px 40px;

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

Question 22

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

Answer 22

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

Question 23

What does the following grid property and value mean?

grid-row: 1 / 3;

Answer 23

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

Question 24

What does the following grid property and value mean?

grid-column: 1 / 4;

Answer 24

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

Question 25

What does the following grid property and value mean? grid-area: 1 / 2 / 3 / 4;

Answer 25

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

Question 26

What property can you use to name grid items?

Answer 26

You can use the `grid-area` property. ``` body { grid-template-areas: "head head head"; } header { grid-area: head; } ```

Question 27

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

Answer 27

A period (.)

Question 28

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

Answer 28

`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

Question 29

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

Answer 29

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

Question 30

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

Answer 30

True

Question 31

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

Answer 31

z-index

Question 32

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

Answer 32

higher, lower

Question 33

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

Answer 33

`text-shadow`

Question 34

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

Answer 34

`box-shadow`

Question 35

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

Answer 35

`offset-x`, `offset-y`, `blur-radius`, `color` `text-shadow: -5px -5px 1px green`

Question 36

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

Answer 36

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

Question 37

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

Answer 37

`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

Question 38

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

Answer 38

`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

Question 39

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

Answer 39

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

Question 40

What are the two types of CSS gradients?

Answer 40

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

Question 41

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

Answer 41

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

Question 42

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

Answer 42

`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.

Question 43

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

Answer 43

`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.

Question 44

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

Answer 44

`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.

Question 45

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

Answer 45

`@keyframes`

Question 46

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

Answer 46

keyframe list

Question 47

What two keyframe selectors does a keyframe list have?

Answer 47

`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

Question 48

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

Answer 48

`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

Question 49

The ____ property controls an animation's speed between keyframes

Answer 49

`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

Question 50

What values does the shorthand property `animation` include?

Answer 50

animation name, duration, timing function, delay, iteration count, and direction ``` animation: move 3s linear 2s infinite normal ```

Question 51

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

Answer 51

transition

Question 52

How does a CSS transition differ from a CSS animation?

Answer 52

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

Question 53

What information must be included in the `transition` property?

Answer 53

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

Question 54

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

Answer 54

`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

Question 55

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

Answer 55

transformation

Question 56

What are three examples of transformation functions?

Answer 56

`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`

Question 57

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

Answer 57

`appearance` Setting `appearance` to none hides the browser version of the widget

Question 58

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.

Answer 58

`::before`, `content`

Question 59

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

Answer 59

preprocessor

Question 60

Sass variables begin with a(n) ____ character

Answer 60

`$`

Question 61

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

Answer 61

brackets, colons

Question 62

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

Answer 62

nested ``` // SCSS .notes { font-size: smaller; strong { color: green; } } ```

Question 63

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

Answer 63

`&` ``` // SCSS a { text-decoration: none; &:hover { color: blue; } } ```

Question 64

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

Answer 64

nested ``` // SCSS p { font: { family: Arial; size: 12pt; weight: bold; } } ```

Question 65

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

Answer 65

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

Question 66

A SassScript variable begins with a(n) ____ character

Answer 66

`$`

Question 67

What variable types can a SassScript variable store?

Answer 67

**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

Question 68

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

Answer 68

mixin, `@mixin`

Question 69

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

Answer 69

directive

Question 70

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

Answer 70

arguments, @include