CSS Flashcards
(348 cards)
1
Q
What are the ‘methods’ for writing CSS called? / what is the word for any coding language’s ‘language’?
A
syntaxes
2
Q
Give two types of syntaxes for CSS / two ways of writing and applying CSS
A
ruleset in CSS
and
inline style (used in HTML)
3
Q
What do all CSS syntaxes use?
A
declarations
4
Q
What do declarations do in CSS
A
apply style to the selected element
5
Q
What is the extension for CSS files?
A
.css
6
Q
How do you write CSS within an HTML file?
A
by enclosing the code in a style tag < style >
7
Q
Define this Ruleset(.css) syntax term: selector
selector {
}
A
the beginning of the ruleset used to target the element that will be styled
8
Q
Define this Ruleset syntax term: declaration block
A
the code in-between (and including) the curly braces { } that contains the CSS declaration(s).
9
Q
Define this ruleset (.css) syntax term: declaration
A
the group name for a property and value pair that applies a style to the selected element
10
Q
Define this Ruleset syntax term: property
A
The first part of the declaration that signifies what visual characteristic of the element is to be modified
11
Q
Define this Ruleset syntax term: value
A
the second part of the declaration that signifies the value of the property
12
Q
Define this Ruleset inline style term: opening tag
A
the start of an HTML element. This is the element that will be styled
13
Q
Define this Ruleset inline style term: attribute
A
the style attribute is used to add CSS inline styles to an HTML element
14
Q
Define this Ruleset inline style term: declaration
A
the group name for a property and value pair that applies a style to the selected element
15
Q
Define this Ruleset inline style term: property
A
the first part of the declaration that signifies what visual characteristic of the element is to be modified
16
Q
Define this Ruleset inline style term: value
A
the second part of the declaration that signifies the value of the property
17
Q
How do you close off inline style attributes?
A
With a semicolon ;
18
Q
Are inline styles the best way to style HTML?
A
no
19
Q
What is the CSS code written/nested within the < style > element of HTML called?
A
internal stylesheet
20
Q
Where must an internal stylesheet be placed?
A
Within the < head > element
21
Q
Why is an external stylesheet useful?
A
because you don’t have to sacrifice the readability and maintainability of your HTML code
22
Q
When using an external style sheet (.css file) what must you do?
A
Link the .css file to the .html file
23
Q
How do you like a .css file to a .html file?
A
with the < link > element, which must be placed within the < head >
24
Q
What two attributes does a < link > linking a .css file to a .html file need?
A
an href=”” which links to the .css file
a real attribute, which describes the relationship between the HTML file and the CSS file
25
What should the red attribute be set to when linking a .css file to an .html file?
rel = 'stylesheet'
< link href="insert link to .css file here" rel='stylesheet' >
26
What is the symbol for universal selector in CSS?
the asterisk *
27
How do you select an HTML element by its class?
a period ( . ) must be prepended to the class's name ie .brand (with brand being class='brand' in HTML
28
How do you style a single element uniquely?
using the id="" attribute in HTML
29
How many values does the class='' attribute accept?
Many
30
How many values does the id="" attribute accept?
only one, and can be used only once per page
31
how do you select an element's id in CSS?
```
prepend id with #
#id, #large-title
```
32
how can the attribute selector be used?
to target HTML elements that already contain attributes, and elements of the same type can be targeted differently by their attribute or attribute value
33
how do you select attributes in CSS?
with [ ] around the attribute
ie. [href] {
}
34
What are pseudo-class selectors?
selectors that change the appearance of elements after user interaction
35
give examples of pseudo-class selectors
:focus :visited :disabled :active
36
how is a pseudo-class attached to a selector
with a colon
ie: p:hover {
}
37
what is specificity?
the order in which the browser decides which CSS styles will be displayed
38
What is best practice with specificity?
to style elements with the lowest degree of specificity so that if an element needs a new style, it is easy to override
39
what is the most specific selector in CSS
the id selector
40
how do you select a class
. with a period
41
how can you make styles easier to edit?
style with a type selector
42
what is it called when we combine multiple selectors?
chaining
43
What does the font-weight property control in CSS?
how bold or thin the text appears
44
What properties can you use with text-align?
justify, left, right, center
45
what does foreground color apply to?
the element being styled with color - ie giving a header a color is giving it a foreground color
46
what does the css syntax for giving an element a background image look like?
.main-banner {
background - image: url( 'https: insert link here ' );
}
47
what does the relative path for an image look like?
for image with file name mountains.jpg:
url('images/mountains.jpg');
48
What can you use to override any style in css?
! important ;
49
how do you affect the transparency of an element?
with the opacity: property
50
What values can you give to the opacity property?
a number in the range 0.0 to 1.0
or
a percentage from 0% to 100%
```
h2 {
opacity: 0.50;
or
opacity: 50%
}
```
51
what is meant by the box model?
elements on the page being interpreted as "living" inside a box
52
What does the box model include?
a page's content's area size (width and height), and its padding, border, and margin
width, height, padding, border, mardin
53
how many dimensions does an element's content have?
two: height and width
54
What are the dimensions of an HTML box set to by default?
by default it holds the raw contents of the box
55
what happens when an element's dimensions are set in pixels (px)
the element will be the same size on all devices - something that fits a laptop screen will overflow a phone or tablet screen
56
What can you set to change a border?
width, style, and colour
57
how do you changer a border's width?
in pixels, or with keywords: thin, medium, or thick
58
How many styles can web browsers render for borders?
10 - including: none; dotted; solid
59
What is the default border?
medium none color
60
how do you modify the corners of an element's border box
with the border-radius property
61
how do you create a border that is a perfect circle?
by creating an element with the same width and height, then setting the radius to half the width of the box, which is 50%
border-radius: 50%;
62
when would border-radius: 100%; not give a perfect circle border?
when the height and width are not the same, ie you need a square element to create a circle border
63
What is the space between the contents of a box and the borders of a box called?
the padding
64
what is padding
the space between the borders of a box and the contents of a box
padding is like the space between a picture and the frame
65
how can you be more specific about padding?
```
with more specific padding properties:
padding-right
padding-left
padding-top
padding-bottom
```
66
What do you call a declaration that uses multiple properties as values?
shorthand property
67
how does padding shorthand work
in clockwise rotation
68
how do you use padding shorthand if the left and right padding are equal?
with 3 values, the first is padding-top, second value is padding left and right, and the last is padding-bottom
69
how do you use padding shorthand if padding top and bottom are equal, and padding left and right are equal?
with two values, the first sets padding top and bottom, and the second sets padding right and left
70
What does margin refer to?
the space directly outside of the box
71
How can you use margin to centre content?
with the instructions: margin: 0 auto;
72
how does margin: 0 auto; work?
the 0 sets the top and bottom margins to 0 pixels, and the auto instructs the browser to adjust left and right margins until the element is centred within the containing element
73
What needs to be set for an element to be centred?
the width
74
when is it not possible to centre an element?
when it takes up the full width of the page
75
padding is space added ____ an element's border
inside
76
margin is space added ___ an element's border
outside
77
what is the difference between vertical margins and horizontal margins?
vertical margins collapse, whereas horizontal margins do not collapse
78
how far apart would two side-by-side elements be?
as far apart as the sum of their adjacent margins
vertical margins do NOT do this
79
do horizontal margins collapse?
no
80
do vertical margins collapse?
yes
81
What can you do to prevent elements changing size too much on different devices?
with the min-width and max-width properties, as well as min and max height
82
what happens if an element's max-height is set too low?
the content might spill out of the box, making the content illegible
83
how are the total dimensions of an element calculated?
by adding all of the vertical dimensions and all of horizontal dimensions together
84
how do you control overflow?
with the overflow property
85
what are some values you can use with the overflow property?
hidden (any content that overflows is hidden) scroll (any content that overflows can be made visible with a scrollbar) visible (overflow content is displayed outside of the containing element - this is the default value)
86
What is the default overflow value?
visible
87
Where is the overflow property set?
On a parent element, so that the browser is instructed properly on how to render child elements too
88
What is a browser's default stylesheet called?
user agent stylesheet
| user agent in this case is a technical term for the browser
89
When properties are set to 0, do they need a unit of measurement?
no
90
How do developers start with a clean slate for their CSS coding?
```
with:
* {
margin: 0;
padding: 0;
}
```
91
how do you hide elements?
with the visibility propety
92
what can you use to set the visibility property?
hidden (hides an element - but still leaves space where the element was intended to be), visible (displays an element), collapse (collapses an element)
93
What's the difference between display: none and visibility: hidden?
display: none will completely remove an element from a page
visibility: hidden will not be visible but the space reserved for the element will be visible
94
How do you change the spacing between individual letters in text?
with the letter-spacing property
95
What is the limitation of the box model?
everything added to the box, such as borders, padding, height and width, etc increases the box 'size', making it difficult to accurately size a box
96
What is the 'formula' for the actual rendered width of an element's box when content-box is the value of the box-sizing property?
width + padding + border = actual rendered width
97
What property controls the type of box model the browser should be using?
the box-sizing property
98
What is the default value of the box-sizing property?
content-box
99
How do you 'reset' the box model?
by assigning the value border-box to the box-sizing property:
box-sizing: border-box;
100
What does the value border-box do the property box-sizing?
| box-sizing: border-box;
height and width of the box remain fixed, and border thickness and padding will be included inside of the box - therefore the overall dimensions of the box don't change
101
What is the universal selector?
* {
| }
102
All HTML elements are ____?
boxes
103
All HTML elements are boxes made up of _ components
4
104
What are the 4 components of HTML elements (box model)
content container, padding, border, margin
105
What is the order of the box model?
```
CPBM
Content
Padding
Border
Margin
```
CPBM!
106
How do you /does the browser calculate the width of the box of an HTML element?
the sum of: content width + padding left and padding right width + border left and border right width = total width of an HTML element's box
107
How do you / does the browser calculate the total size of an HTML element's height?
the sum of: content height + padding top and padding bottom height + border top and border bottom height = total height of an HTML element's box
108
Why is margin not included in the calculations to find an HTML element's box height/width size?
because margin adds space only around the outside of an HTML element's box, so it doesn't affect how big or small an HTML element box is (only affects how near or far other HTML elements can come to it)
109
What is the default position for block-level elements?
on the left side of the browser
110
How can you change the default position of an element?
by changing its position property
111
Give 5 values the position property can take as values
static (refers to default behaviour), relative, absolute, fixed, sticky
112
What needs to go with the declaration 'position: relative'?
offset properties: top, bottom, right, left, which can be specified in pixels
113
What happens when you set 'position' to absolute?
other elements ignore that element and will act like it's not present on the page, and scrolls outside of view of the user scrolls away
114
What happens when you set an element's 'position' to fixed?
it is fixed in place and stays on the page when the user scrolls
115
What is 'position: fixed;' often used for?
Navigation bars or fixed headers at the top of pages
116
Which position declarations stay in the normal flow of a document?
static, relative, sticky
117
Which position declarations are removed from the normal flow of a document?
fixed and absolute
118
What property controls how far back or far forward an element should appear when elements on the page overlap?
the z-index property
| can be thought of as the depth element, with deeper elements appearing behind shallower elements
119
What values does the z-index property accept?
integer values, which instruct the browser on the order elements should be layered on the page
120
What element property does z-index not work on?
static
121
give 3 values for the display property
inline, block, inline-block
122
Which elements have default display of 'inline'?
< em >, < strong >, < a >
123
What does the display: inline; property do to elements?
Inline elements have a tight box around them, only taking up the necessary amount of space
and renders inline elements on the same line as other inline elements immediately before or after if there are any
inline elements can share lines with other elements
124
What can you not declare for elements that are display: inline by default?
height and width
125
What are elements called that are not displayed in the same line as the content around them?
block-level elements
126
What is the default width and height of block-level elements?
block-level elements fill the width of a page by default, and their height is the necessary size to accommodate their content
127
What are some elements that are block-level by default?
all headings ( < h1 > to < h6 > ), < p >, < div >, and < footer >
128
What is the float property useful for, and commonly used for?
moving an element as far left or as right as possible, and wrapping text around an image
129
What must float elements have specified?
the width
130
What property specifies how elements should behave when they bump into each other on a page?
the 'clear' property
131
What values can the clear property take?
left (left side of the element will not touch any other elements within the same containing element)
right (right side of the element will not touch any other elements within the same containing element)
both (neither side of the element will touch any other element within the same containing element)
none (the element can touch either side)
132
In terms of display, what is the difference between < div > and < span >
Div is a block element, which takes up the whole space of a line
Span is an inline element
133
What is the difference between inline and inline-block?
inline-block allows you to set width and height
134
What does the property 'display' do?
set an element's behaviour to inline, inline-block, or block
135
Do inline-block elements start on a new line?
no
136
What are the 3 ways color can be described in CSS?
named colors: also known as keyword colors
RBG: numeric values that describe a mix of red green and blue
HSL: numeric values that describe a mix of hue, saturation, and lightness
137
How do you style foreground, and background color?
color:
| background-color:
138
What is the syntax used for hex colors?
hexadecimal, beginning with #
139
How many characters are used in hexadecimal syntax?
3 or 6
140
How many digits does the hexadecimal system have?
16 ( 0 - 15 ), represented by the letters A - F
141
What is the syntax for RGB?
color: rgb(x, x, x);
142
What is the range of RGB values?
Each of the 3 values can have a number ranging from 0-255
143
What is the total number of colors that RGB and HEX can represent?
16,777,216
144
What does HSL stand for?
Hue, Saturation, Lightness
144
What does HSL stand for?
Hue, Saturation, Lightness
145
What is the numerical range of hue in HSL?
0 - 360 degrees of hue
146
How are saturation and lightness represented in HSL?
with percentages
147
What does hue actually refer to?
the angle on the color wheel: for example, red is 0, green is 120, blue is 240,
148
Where is 'normal' lightness in HSL?
50%
149
How do you change opacity using HSL?
add A to the end of HSL - HSLA (hue saturation lightness alpha)
150
How is alpha (opacity) written in HSLA
as a decimal number from 0 to 1
151
What happens if Alpha in HSLA is set to 0?
the colour would be completely transparent
152
What happens if Alpha in HSLA is set to 1?
The colour would be completely opaque
153
Can you add opacity to RGB?
yes, with alpha - RGBA
154
How do you add opacity to HEX code?
With two extra values for a 6 number hex or 1 extra value for a 3 number hex
155
What is the range of opacity in HEX?
00 ( transparent) to FF (opaque)
156
What is the named colour keyword for zero opacity?
transparent
157
How do you specify a typeface with multiple words?
put it in quotation marks - 'Times New Roman'
158
What are web safe fonts?
fonts that appear the same across all browsers and operating systems
159
What is it called when you specify a group of / more than one font(s) in 'font-family:'
font stack
used for having fallback fonts
160
What is a fallback font?
a font at the end of a font stack that is used if the other fonts in the stack aren't available
161
What else can be added as a fallback in a font stack?
serif or sans-serif
162
What does the font-weight property do?
controls how bold or thin text appears
163
How do you specify the font-weight property?
with keyword values (bold, normal, lighter, bolder)
| or numerical values
164
What is the range of numerical values specified for font-weight?
1 (lightest) to 1000 (boldest)
165
What is the numerical value for font-weight that is equal to font-weight: normal?
400
166
What is the numerical value for font-weight that is equal to font-weight: bold?
700
167
How do you italicise text?
with the font-style property
168
What is the default value for font-style?
normal
169
What is the property for styling text all uppercase or lowercase?
text-transform
170
What property do you use for adjusting horizontal space between individual characters in an element?
letter-spacing
171
What property do you use for adjusting horizontal space between words in an element?
word-spacing
172
What value in units do the word-spacing and letter-spacing properties take?
pixels (px) or em
173
What property do you use to control how tall each line of text is?
line-height
174
What values can line-height take?
unitless numbers, or length values in pixels, percentages, or in em
175
What is the preferred value for line-height and why?
a unitless number, because it is responsible based on the size of the text - chaining size of the font automatically readjusts the line height
176
How do you connect your HTML document to font hosts?
with < link > in the < head > element in HTML
177
What can you use as an alternative to < link > in the head of the HTML to source a font?
use the @font-face ruleset in the CSS stylesheet
178
Give different font file formats
OTF - open type font
TTF - true type font
WOFF - web open font format
WOFF2 - web open font format 2
179
What HTML can override all CSS style declarations?
in-line style in HTML
180
How do you create a CSS variable?
give a name with two -- in front
--penguin-skin:
181
What is the CSS declaration for strikethrough?
text-decoration: line-through
182
what is a flex container
an element on a page that contains flex items
183
are children elements of a flex container flex items?
yes
184
how do you designate an element as a flex container?
set the element's display property to flex or inline-flex
185
what elements can be flex containers?
any
186
how do you position flex elements from left to right?
with the property justify-content:
187
give 5 common values for the justify-content: property
flex-start; all items will be positioned in order starting from the left of the parent container, with no extra space between or before them
flex-end; all items will be positioned in order, with the last item starting on the right side of the parent container, with no extra space between or after them
center; all items will be positioned in order, in the center of the parent container with no extra space before, between, or after them.
space-around; items will be positioned with equal space before and after each item, resulting in double the space between elements.
space-between; items will be positioned with equal space between them, but no extra space before the first or after the last elements.
no extra space means: margins and borders will be respected, but no more space (than is specified in the style rule for the particular element) will be added between elements.
188
how do you space elements vertically using flex?
with the align-items: property
189
give 5 common values for the align-items property in flex
flex-start; all elements will be positioned at the top of the parent container
flex-end; all elements will be positioned at the bottom of the parent container
center; the center of all elements will be positioned halfway between the top and bottom of the parent container
baseline; the bottom of the content of all items will be aligned with each other
stretch; if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch)
190
what does the flex-grow property do?
allows us to specify if items should grow to fill a container and which items should grow proportionally more or less than others
191
what is the default value of flex-shrink?
1
192
what is the default value of flex-grow?
0
193
margins are ___ by flex-grow and flex-shrink
margins are unaffected by flex-grow and flex-shrink
194
how can you set width and height with flex?
with the flex-basis property
195
what does flex-basis do?
allows us to specify the width of an item before it stretches or shrinks
196
what does the flex property allow you to code?
flex-grow, flex-shrink, and flex-basis;
197
what is the order for declaring flex values within flex: ?
flex-grow, flex-shrink, flex-basis;
198
what does flex-wrap do?
moves flex items to the next line when necessary
199
what 3 values can flex-wrap accept?
wrap; child elements of a flex container that don’t fit into a row will move down to the next line
wrap-reverse; the same functionality as wrap, but the order of rows within a flex container is reversed (for example, in a 2-row flexbox, the first row from a wrap container will become the second in wrap-reverse and the second row from the wrap container will become the first in wrap-reverse)
nowrap; prevents items from wrapping; this is the default value and is only necessary to override a wrap value set by a different CSS rule.
200
what is the default value of flex-wrap?
nowrap
201
the flex-wrap property is declared on ___ ?
the flex-wrap property is declared on flex containers
202
align-items is for aligning elements within _ ___ __
align-items is for aligning elements within a single row
203
how do you align the content of a flex-container that has multiple rows?
with the align-content property
204
give some commonly used align-content values
flex-start; all rows of elements will be positioned at the top of the parent container with no extra space between
flex-end; all rows of elements will be positioned at the bottom of the parent container with no extra space between
center; all rows of elements will be positioned at the center of the parent element with no extra space between
space-between; all rows of elements will be spaced evenly from the top to the bottom of the container with no space above the first or below the last
space-around; all rows of elements will be spaced evenly from the top to the bottom of the container with the same amount of space at the top and bottom and between each element
stretch; if a minimum height or no height is specified, the rows of elements will stretch to fill the parent container from top to bottom (default value)
205
flex containers have ___ axes
flex containers have 2 axes
206
flex containers have 2 axes, a __ axis and a ___ axis
a main axis and a cross axis
207
the 'main' axis for flex items is ___
the main axis is horizontal
208
by default the cross axis is ___
the cross axis is vertical
209
what properties are used with the main axis?
justify-content, flex-wrap, flex-grow, flex-shrink
210
what properties are used to position items with the cross axis?
align-items, align-content
211
are the main and cross axis interchangeable?
yes
212
how can you switch the main and the cross axis to interchange them?
with the flex-direction property
| flex-direction: column; orders flex items vertically, not horizontally
213
what are the 4 values that flex-direction can accept?
row; elements will be positioned from left to right across the parent element starting from the top left corner (default)
row-reverse; elements will be positioned from right to left across the parent element starting from the top right corner
column; elements will be positioned from top to bottom of the parent element starting from the top left corner
column-reverse; elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner
214
where is the flex-direction property declared?
on flex containers
215
the shorthand flex-flow: property is used to declare what properties in one line?
flex-flow is used to declare both flex-wrap and flex-direction in one line
216
the flex-flow property is declared on __
flex-flow property is declared on flex containers
217
the first value in the flex-flow declaration is ____
| the second value in the flex-flow declaration is ____
the first value is flex-direction
| the second value is flex-wrap
218
to set up a grid you need ____ and _____
a grid container and grid items
219
to turn an HTML element into a grid container you must set the element's ___ property to one of two values: ____ or ____
set the element's display property to grid (for a block level grid) or inline-grid (for an inline grid)
220
by default grids contain ____ column
by default grids contain 1 column
221
how do you define columns of a grid?
with the css property grid-template-columns
222
what 2 changes does the grid-template-columns create?
defines the number of columns in the grid
and
sets the width of each column
223
what measurements can you use to set the size of a grid's columns?
size in pixels, or as percentages of the total size of the grid
224
what property do you use to set the number and size of rows in a grid?
grid-template-rows:
225
rows are defined as a percentage of the grid's ___
rows are defined as a percentage of the grid's height
226
columns are defined as a percentage of the grid's ___
columns are defined as a percentage of the grid's width
227
what is the shorthand for grid-template-columns and grid-template-rows?
grid-template
228
when using grid-template, the values before the slash / determine the size of each ___
when using grid-template, the values before the slash / determine the size of each row
229
when using grid-template, the values after the slash / determine the size of each ___
when using grid-template, the values after the slash / determine the size of each column
230
what is the new relative sizing unit you can use with css grid?
fr - fraction
231
what function can you use with grid-template-columns:
repeat ( )
232
what function can you use to resize the grid according to browser size?
minmax() function
233
what properties put blank space between every row and column in the grid?
row-gap and column-gap
234
what do grid gap properties not do?
they don't add space at the beginning or end of the grid
235
what is the shorthand for row-gap and column-gap?
gap
236
how is the shorthand gap property different from other grid shorthand properties?
it does not need a slash / between values
237
what properties can you use to make single grid items take up multiple rows?
grid-row-start and grid-row-end
238
what values do grid-row-start and grid-row-end take?
grid lines (as numbers)
239
row grid lines and column grid lines start at ___ and end at a value that is ____ than the number of rows or columns the grid has
row grid lines and column grid lines start at 1 and end at a value that is 1 greater than the number of rows or columns the grid has
240
the value for grid-row-start should be the row at which you want the grid item to ___
the value for grid-row-end should be ___ than the row at which you want the grid item to end.
to begin
| one greater
241
what is the shorthand property for grid-row-start and grid-row-end?
grid-row:
242
what is the shorthand for grid-column-start and grid-column-end?
grid-column:
243
what can you use instead of giving the grid lines for grid-column?
span - to give how many columns the grid item spans
244
why is using span with grid-row and grid-column useful?
it helps avoid errors in calculating
245
what property refactors both the grid-column and the grid-row properties?
grid-area
246
the grid-area property takes __ values
the grid-area property takes 4 values
247
what is the order of the 4 grid-area properties?
1. grid-row-start
2. grid-column-start
3. grid-row-end
4. grid-column-end
248
where is grid-template-areas property declared?
on grid containers
249
what does the grid-template-areas property allow you to do?
it allows you to name sections of your webpage to use as values in the: grid-row-start, grid-row-end, grid-column-start, grid-column-end, and grid-area properties
ie:
grid-template-areas: "header header"
"nav nav"
"left right"
with each item taking up in the " " as many columns as it takes up in the grid
250
what is generally the easiest property to use when overlapping elements?
the grid-area property with grid-row names
251
where is the justify-items property declared?
it is declared on grid containers
252
what are some of the more useful values that justify-items accepts?
start; aligns items to the left side of the grid area
end; aligns items to the right side of the grid area
center; aligns items to the centre of the grid area
stretch; stretches all items to fit the grid area
as well as:
space-around; gives an equal amount of space on either side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
space-between; gives an equal amount of space between grid items and no space at either end
space-evenly; places an equal amount of space between grid items as well as at either end of the grid
253
what is the difference between justify-content and align-items?
justify-content positions items across the horizontal axis
| align-items positions items across the vertical axis
254
justify-items specifies how grid items contained within a single container position themselves along the ___ axis
row
255
align-items specifies how grid items contained within a single container position themselves along the ___ axis
column
256
justify-self specifies how an ____ ____ should position itself with respect to the ____ axis
individual element
| row axis
257
align-self specifies how an ____ ____ should position itself with respect to the ____ axis
individual element
| column axis
258
what is the implicit grid?
an algorithm built into CSS that determines default behaviour for the placement of elements when there are more than fit into the grid specified by CSS
259
what is the default behaviour of implicit grid?
items fill up rows first, adding new rows when necessary
| new grid rows will only be tall enough to contain the content within them
260
what properties specify the size of grid tracks added implicitly?
grid-auto-rows and grid-auto-columns
261
where are the properties grid-auto-rows and grid-auto-columns declared?
on grid containers
262
what are the explicit (as opposed to implicit) counterparts to grid-auto-rows and grid-auto-columns
grid-template-rows and grid-template-columns
263
what values do the explicit grid-template-rows and grid-template-columns, and implicit grid-auto-columns and grid-auto-rows take?
pixels - px
fractions - fr
percentages - %
and the repeat function : repeat ( )
264
how do you specify the order in which implicit rows/columns are rendered?
with the property grid-auto-flow
265
what values does the grid-auto-flow property take?
grid-auto-flow: row; specifies new elements should fill rows from left to right and create new rows when there are too many elements (also the default)
grid-auto-flow: column; specifies new elements should fill columns from top to bottom and create new columns when there are too many elements
grid-auto-flow: dense; this invokes an algorithm that attempts to fill holes earlier in the grid layout if smaller elements are added
266
what aspects of a transition can be controlled with CSS?
which CSS property transitions
how long a transition lasts
how much time there is before a transition begins
how a transition accelerates
267
to create a simple transition in CSS, what 2 aspects are needed?
the property that we want to transition
| the duration of the transition
268
what is the value for transition time?
in seconds or milliseconds
269
what is the default time value for transitions / if there is no transition
0s
270
what property describes the pace of a transition
transition-timing-function:
271
what is the default value for transition-timing-function?
ease; which starts the transition slowly, speeds up in the middle, and slows down again at the end
272
what values can transition-timing-function take?
ease: starts transition slowly, speeds up in the middle, and slows down at the end
ease-in; starts slow, accelerates quick, stops abruptly
ease-out; begins abruptly, slows down, and ends slowly
ease-in-out; starts slow, gets fast in the middle, and ends slowly
linear; constant speed throughout
273
what property can you use to specify the amount of time before a transition starts?
transition-delay:
273
what property can you use to specify the amount of time before a transition starts?
transition-delay:
274
what is the default value of transition-delay?
0 - no transition delay
275
how can you combine the four transition property declarations?
with the shorthand 'transition:'
276
what is the order that properties are specified in using the shorthand 'transition'?
1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay
277
what happens if you leave out one of the four properties in the refactored transition property? (excluding the exception)
it will assume the default value of the property with the missing value
278
what is the exception for the refactored transition values - what property needs a value?
delay - you must set a duration if you want a delay
279
what is the advantage of the shorthand transition as opposed to the 4 individual transition declarations?
you can describe transitions for multiple properties and combine them
280
how do you combine transitions within the shorthand transition property?
using commas ,
281
when you're setting the same transition properties for many different elements, what value can you give to transition-property:
all
282
what is the benefit of relative measurements?
they allow for the proportions of the webpage to remain intact regardless of screen size or layout
283
what did the measurement em traditionally represent?
the width of a capital letter M in the typeface and size being used
284
what does the measurement em represent now?
the font-size of the current element or default base font-size set by the browser if none is given
285
what is normally the default size of text in a browser?
16 pixels
286
what does the unit of measurement rem stand for?
root em
287
how does the unit of measurement rem work?
it checks the root element's size
| the root element is the < html > tag
288
what is the advantage of using the rem measurement?
all elements are compared to the same font size value which makes it easy to predict how big or small a font will appear, and it makes sizing elements consistently across a website easier
289
when is em better than rem for measurement
if you want to size elements in comparison to elements nearby, as opposed to site wide
290
how can you size elements relative to their parent elements?
using percentages
291
when should sizing of 100% only be used?
when content doesn't have padding, border, or margin (otherwise it can overflow its parent element box-model)
292
when padding and margin are set with percentages, they are calculated based on only the ___ of the parent element
width
293
When using relative sizing, ___ and ___ should be used to size text and dimensions on the page related to text size (i.e. padding around text).
ems and rems
294
what is the default block state of images?
inline-block
295
what value can you declare to background-size to make a background image cover the entire background and scale proportionally?
background-size: cover;
296
what does CSS use to adapt a website's content to different screen sizes?
media queries
297
what is screen used for in a media query?
screen is the media type always used for displaying content, no matter the type of device
298
what does DPI stand for
dots per inch
299
what values do min-resolution and max-resolution accept?
dpi (dots per inch) or dpc (dots per centimetres)
300
what do you use to separate media features in a media query if only one of the conditions needs to be met?
commas ,
301
what are the points at which media queries are set called?
breakpoints
302
what are breakpoints?
the screen size(s) at which your web page doesn't appear properly
303
instead of setting breakpoints based on all device screen sizes, what should you set breakpoints at?
to where your page naturally breaks based on its content in your browser
304
what are CSS variables called?
Custom Properties
305
what must CSS variables start with?
double hyphen: --
306
are CSS variables case sensitive?
yes
307
how do you use variables in CSS?
the variable's name must be specified as an argument inside the var() function
308
what is a scope in CSS?
the scope is what determines where a variable will work based on where it is declared
309
what are the two types of scope a variable can have?
local and global
310
a locally scoped CSS variable will only affect _____ along with ____
a locally scoped CSS variable will only affect the specific HTML element that it is declared in, along with any children that element may contain
311
where are globally scoped variables declared?
in the :root pseudo-class
312
in most cases, the root element is actually the ____ element
< html > element
313
if a variable is not explicitly defined on a child element, the value of its ___ is used (if there is one)
the value of its parent variable is used
314
what properties aren't inherited by child elements?
width, margin, padding, and border
315
how do you set fallback values for variables?
by giving fallback values as the second argument in a function, separated from the first argument by a comma
316
how do you set a css variable as a fallback variable within a function?
it must be passed using another var() function
317
what is the maximum number of arguments the var ( ) function accepts?
2
318
how many arguments does the url ( ) function take?
just 1
319
what does the calc() function do?
takes a mathematical expression as its argument and returns the calculated value
320
the calc() function requires ___ between the operator and the numbers in the expression
requires whitespace
321
what do the min() and max() functions do?
select the smallest or largest value from a range of value and set that as the associated property's value
322
the min() function defines the ___ the class can have
min function defines the maximum
323
what does the clamp( ) function do?
the clamp function enables specified value to be kept within an upper and lower bound
324
how many parameters does the clamp function take?
3
325
what 3 parameters does the clamp function take?
1. a minimum value, 2. a preferred value, 3. a maximum allowed value
326
what are the main CSS color functions?
the rgb() function, the rgba() function, the hsl() function, and the hsla() function
327
what kind of blur does the blur ( ) function apply?
a Gaussian blur
328
what is the default value for the brightness ( ) function?
100% or 1.0
329
what are the required arguments for the drop-shadow function?
offset-x and offset-y
330
what does the scale ( ) function do?
scale resizes an element horizontally and vertically on the 2D plane
331
what values can the scale ( ) function take?
1 value scales the same across both the x and y axes
| 2 values scale in the order of 1. scale on the x axis, 2. scale on the y axis
332
what property is the scale ( ) function used with?
the transform: property
333
what does the rotate ( ) function do?
rotates an element around a fixed point on a 2D plane
334
what value must be given to the rotate ( ) function?
a number for degrees, specified with the deg (degrees) unit
335
what is the recommended font size for smaller screens?
18 to 20px
336
what is the default line-height property in most browsers?
1.2
337
what do the Web Content Accessibility Standards recommend as a minimum line-height?
1.5
338
what is the default property of letter-spacing?
normal
339
how many characters are recommended per line in a paragraph?
45 - 85 characters per line
340
what is 1ch equivalent to?
the width of the 0 character
341
what is the difference between two colours on the colour wheel called?
contrast ratio
342
what is the range for contrast ratio and what do the values mean?
1: 1 - both compared colours are the same
21: 1 black and white
343
how do you set an element to be hidden from screen readers?
with the aria-hidden attribute within html, and setting it to 'true'
aria-hidden='true'
344
what are browsers based on and what do these things do?
browsers are based on browser engines and these are the components responsible for rendering HTML, CSS, and JavaScript
345
what are vendor prefixes?
prefixes for property names that were developed as a way of testing new CSS features or standards before browsers fully supported them
346
what are polyfills?
JavaScript codes that allow older browsers to behave as though they understand more advanced features than they actually do
