6. More CSS Flashcards
____ 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.
Flexbox
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
display, flex, inline-flex
A ____ is a child element of a flex container that is positioned and sized according to various CSS flexbox properties
flex item
The ____ property defines the direction of flex items within the container using values
flex-direction
What are the different values for the flex-direction property?
row
row-reverse
column
column-reverse
The ____ property defines the space between flex items.
gap
gap: 10px;
The ____ property justifies the flex items within the container using values
justify-content
What are the different values for the justify-content property?
flex-start
flex-end
center
space-between
space-around
space-evenly
The ____ property determines if or how flex items wrap onto multiple rows when the container is not wide enough to hold all items
flex-wrap
What are the different values for the flex-wrap property?
nowrap (default)
wrap
wrap-reverse
A flex item’s width is determined by the combination of what three properties?
flex-basis
flex-grow
flex-shrink
What does flex-basis do, and what values can it be set to?
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
What does the flex-grow property do, and what values can it be set to?
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
What does the flex-shrink property do, and what values can it be set to?
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
The shorthand ____ property establishes the ____, ____, and ____ properties, in that order, for flex items
flex, flex-grow, flex-shrink, flex-basis
____ 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.
Grid
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
container, grid, inline-grid
A grid ____ is a child element of a grid container that is by default placed into a single grid cell.
item
The ____ property defines the grid container’s number of columns and optionally the width of each column.
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
What does the gap property do in the grid layout?
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
What property do you use to determine the row height in a grid?
grid-template-rows
grid-template-rows: 20px 40px;
This makes the first row 20px tall and the second row 40px tall
What are the different values for the justify-content and align-content property with grids?
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
What does the following grid property and value mean?
grid-row: 1 / 3;
The grid item starts in row line 1 and ends in row line 3 of the grid.
What does the following grid property and value mean?
grid-column: 1 / 4;
The grid item starts in column line 1 and ends in column line 4 of the grid.
What does the following grid property and value mean?
grid-area: 1 / 2 / 3 / 4;
The grid item starts in row line 1 and column line 2 and ends in row line 3 and column line 4
What property can you use to name grid items?
You can use the grid-area property.
```
body {
grid-template-areas: “head head head”;
}
header {
grid-area: head;
}
~~~
What character can you use in the grid-template-areas property to represent an empty grid cell?
A period (.)
What are the four different values that the position property can use?
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
When an element’s position is absolute, its position is based on the nearest positioned ____ element that uses fixed, absolute, or relative positioning.
ancestor
If no positioned ancestor element exists, the element is positioned relative to the document body
True or false: an absolute-positioned element scrolls with the document unless an ancestor element is using fixed positioning
True
The CSS ____ property is used to specify a relative distance that orders the appearance of elements
z-index
Elements with a ____ z-index value are placed on top of elements with a ____ z-index value
higher, lower
What CSS property do you use to add drop shadow to text?
text-shadow
What CSS property do you use to add drop shadow to a box?
box-shadow
What property values can be specified for the text-shadow property?
offset-x, offset-y, blur-radius, color
`text-shadow: -5px -5px 1px green`
What property values can be specified for the box-shadow property?
inset (draws the shadow inside the box, indicate with the string “inset”), offset-x, offset-y, blur-radius, spread-radius, color
An element border’s corners can be rounded using the CSS property ____, which is assigned one to four radius values
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
The CSS property ____ renders an element’s border using sections of an image
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
A ____ is a prefix added to an experimental or nonstandard CSS property that only works on a specific browser type.
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
What are the two types of CSS gradients?
- linear gradient - a gradient that follows a straight line
- radial gradient - a gradient that radiates outward into an ellipse
How do you declare a linear gradient with a certain degree or direction and specific colors?
background: linear-gradient(to bottom right, black, red);
The ____ function repeats a linear gradient where the color values are supplied an optional percent.
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.
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
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.
A radial gradient’s ellipse or circle is centered by default in the enclosing rectangle, but the center position can be specified using “____”
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.
A CSS animation’s behavior is defined with the ____ rule, which contains a keyframe list
@keyframes
A ____ has a name and contains the keyframes or the properties and values that will be animated.
keyframe list
What two keyframe selectors does a keyframe list have?
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
To create an animation, what two CSS properties need to be defined?
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
The ____ property controls an animation’s speed between keyframes
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
What values does the shorthand property animation include?
animation name, duration, timing function, delay, iteration count, and direction
animation: move 3s linear 2s infinite normal
A CSS ____ animates an element’s evolution from one state to another when an element’s CSS property changes value
transition
How does a CSS transition differ from a CSS animation?
- 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
What information must be included in the transition property?
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;
}
The ____ property can be used to control the speed of a transition
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
A ____ is a graphical operation that alters the position, shape, or orientation of an object.
transformation
What are three examples of transformation functions?
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`
The CSS property ____ is used to control a widget’s appearance based on the operating system’s theme.
appearance
Setting appearance to none hides the browser version of the widget
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.
::before, content
Sass is a popular CSS ____ that uses CSS-like syntax to build complex CSS stylesheets
preprocessor
Sass variables begin with a(n) ____ character
$
SCSS uses ____ and ____, whereas the original Sass syntax does not
brackets, colons
Selectors may be ____ in Sass to create child selectors that only apply to the parent selector
nested
// SCSS
.notes {
font-size: smaller;
strong {
color: green;
}
}
The ____ character in SCSS is used to reference the parent selector from a child selector’s properties
&
// SCSS
a {
text-decoration: none;
&:hover {
color: blue;
}
}
For CSS properties that begin with the same prefix (e.g., font-family, font-size), Sass allows these properties to be ____ under the prefix.
nested
// SCSS
p {
font: {
family: Arial;
size: 12pt;
weight: bold;
}
}
____ is a set of extensions to CSS that allow properties to use variables, arithmetic, and functions
SassScript
SassScript also provides basic control directives for performing conditional logic and looping
A SassScript variable begins with a(n) ____ character
$
What variable types can a SassScript variable store?
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
A ____ is set of reusable styles and is defined by the ____ directive
mixin, @mixin
A ____ is an extension to the CSS at-rules, which are statements that begin with the @ character
directive
Mixins can take ____ and are included in a document using the ____ directive.
arguments, @include
