CSS Flashcards
What are the ‘methods’ for writing CSS called? / what is the word for any coding language’s ‘language’?
syntaxes
Give two types of syntaxes for CSS / two ways of writing and applying CSS
ruleset in CSS
and
inline style (used in HTML)
What do all CSS syntaxes use?
declarations
What do declarations do in CSS
apply style to the selected element
What is the extension for CSS files?
.css
How do you write CSS within an HTML file?
by enclosing the code in a style tag < style >
Define this Ruleset(.css) syntax term: selector
selector {
}
the beginning of the ruleset used to target the element that will be styled
Define this Ruleset syntax term: declaration block
the code in-between (and including) the curly braces { } that contains the CSS declaration(s).
Define this ruleset (.css) syntax term: declaration
the group name for a property and value pair that applies a style to the selected element
Define this Ruleset syntax term: property
The first part of the declaration that signifies what visual characteristic of the element is to be modified
Define this Ruleset syntax term: value
the second part of the declaration that signifies the value of the property
Define this Ruleset inline style term: opening tag
the start of an HTML element. This is the element that will be styled
Define this Ruleset inline style term: attribute
the style attribute is used to add CSS inline styles to an HTML element
Define this Ruleset inline style term: declaration
the group name for a property and value pair that applies a style to the selected element
Define this Ruleset inline style term: property
the first part of the declaration that signifies what visual characteristic of the element is to be modified
Define this Ruleset inline style term: value
the second part of the declaration that signifies the value of the property
How do you close off inline style attributes?
With a semicolon ;
Are inline styles the best way to style HTML?
no
What is the CSS code written/nested within the < style > element of HTML called?
internal stylesheet
Where must an internal stylesheet be placed?
Within the < head > element
Why is an external stylesheet useful?
because you don’t have to sacrifice the readability and maintainability of your HTML code
When using an external style sheet (.css file) what must you do?
Link the .css file to the .html file
How do you like a .css file to a .html file?
with the < link > element, which must be placed within the < head >
What two attributes does a < link > linking a .css file to a .html file need?
an href=”” which links to the .css file
a real attribute, which describes the relationship between the HTML file and the CSS file
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’ >
What is the symbol for universal selector in CSS?
the asterisk *
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
How do you style a single element uniquely?
using the id=”” attribute in HTML
How many values does the class=’’ attribute accept?
Many
How many values does the id=”” attribute accept?
only one, and can be used only once per page
how do you select an element’s id in CSS?
prepend id with # #id, #large-title
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
how do you select attributes in CSS?
with [ ] around the attribute
ie. [href] {
}
What are pseudo-class selectors?
selectors that change the appearance of elements after user interaction
give examples of pseudo-class selectors
:focus :visited :disabled :active
how is a pseudo-class attached to a selector
with a colon
ie: p:hover {
}
what is specificity?
the order in which the browser decides which CSS styles will be displayed
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
what is the most specific selector in CSS
the id selector
how do you select a class
. with a period
how can you make styles easier to edit?
style with a type selector
what is it called when we combine multiple selectors?
chaining
What does the font-weight property control in CSS?
how bold or thin the text appears
What properties can you use with text-align?
justify, left, right, center
what does foreground color apply to?
the element being styled with color - ie giving a header a color is giving it a foreground color
what does the css syntax for giving an element a background image look like?
.main-banner {
background - image: url( ‘https: insert link here ‘ );
}
what does the relative path for an image look like?
for image with file name mountains.jpg:
url(‘images/mountains.jpg’);
What can you use to override any style in css?
! important ;
how do you affect the transparency of an element?
with the opacity: property
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%
}
what is meant by the box model?
elements on the page being interpreted as “living” inside a box
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
how many dimensions does an element’s content have?
two: height and width
What are the dimensions of an HTML box set to by default?
by default it holds the raw contents of the box
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
What can you set to change a border?
width, style, and colour
how do you changer a border’s width?
in pixels, or with keywords: thin, medium, or thick
How many styles can web browsers render for borders?
10 - including: none; dotted; solid
What is the default border?
medium none color
how do you modify the corners of an element’s border box
with the border-radius property
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%;
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
What is the space between the contents of a box and the borders of a box called?
the padding
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
how can you be more specific about padding?
with more specific padding properties: padding-right padding-left padding-top padding-bottom
What do you call a declaration that uses multiple properties as values?
shorthand property
how does padding shorthand work
in clockwise rotation
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
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
What does margin refer to?
the space directly outside of the box
How can you use margin to centre content?
with the instructions: margin: 0 auto;
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
What needs to be set for an element to be centred?
the width
when is it not possible to centre an element?
when it takes up the full width of the page
padding is space added ____ an element’s border
inside
margin is space added ___ an element’s border
outside
what is the difference between vertical margins and horizontal margins?
vertical margins collapse, whereas horizontal margins do not collapse
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
do horizontal margins collapse?
no
do vertical margins collapse?
yes
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
what happens if an element’s max-height is set too low?
the content might spill out of the box, making the content illegible
how are the total dimensions of an element calculated?
by adding all of the vertical dimensions and all of horizontal dimensions together
how do you control overflow?
with the overflow property
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)
What is the default overflow value?
visible
Where is the overflow property set?
On a parent element, so that the browser is instructed properly on how to render child elements too
What is a browser’s default stylesheet called?
user agent stylesheet
user agent in this case is a technical term for the browser
When properties are set to 0, do they need a unit of measurement?
no
How do developers start with a clean slate for their CSS coding?
with:
* {
margin: 0;
padding: 0;
}how do you hide elements?
with the visibility propety
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)
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
How do you change the spacing between individual letters in text?
with the letter-spacing property
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
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
What property controls the type of box model the browser should be using?
the box-sizing property
What is the default value of the box-sizing property?
content-box
How do you ‘reset’ the box model?
by assigning the value border-box to the box-sizing property:
box-sizing: border-box;
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
What is the universal selector?
- {
}
All HTML elements are ____?
boxes
All HTML elements are boxes made up of _ components
4
What are the 4 components of HTML elements (box model)
content container, padding, border, margin
What is the order of the box model?
CPBM Content Padding Border Margin
CPBM!
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
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
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)
What is the default position for block-level elements?
on the left side of the browser
How can you change the default position of an element?
by changing its position property
Give 5 values the position property can take as values
static (refers to default behaviour), relative, absolute, fixed, sticky
What needs to go with the declaration ‘position: relative’?
offset properties: top, bottom, right, left, which can be specified in pixels
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
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
What is ‘position: fixed;’ often used for?
Navigation bars or fixed headers at the top of pages
Which position declarations stay in the normal flow of a document?
static, relative, sticky
Which position declarations are removed from the normal flow of a document?
fixed and absolute
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
What values does the z-index property accept?
integer values, which instruct the browser on the order elements should be layered on the page
What element property does z-index not work on?
static
give 3 values for the display property
inline, block, inline-block
Which elements have default display of ‘inline’?
< em >, < strong >, < a >
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
What can you not declare for elements that are display: inline by default?
height and width
What are elements called that are not displayed in the same line as the content around them?
block-level elements
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
What are some elements that are block-level by default?
all headings ( < h1 > to < h6 > ), < p >, < div >, and < footer >
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
What must float elements have specified?
the width
What property specifies how elements should behave when they bump into each other on a page?
the ‘clear’ property
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)
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
What is the difference between inline and inline-block?
inline-block allows you to set width and height
What does the property ‘display’ do?
set an element’s behaviour to inline, inline-block, or block
Do inline-block elements start on a new line?
no
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
How do you style foreground, and background color?
color:
background-color:
What is the syntax used for hex colors?
hexadecimal, beginning with #
How many characters are used in hexadecimal syntax?
3 or 6
How many digits does the hexadecimal system have?
16 ( 0 - 15 ), represented by the letters A - F
What is the syntax for RGB?
color: rgb(x, x, x);
What is the range of RGB values?
Each of the 3 values can have a number ranging from 0-255
What is the total number of colors that RGB and HEX can represent?
16,777,216
What does HSL stand for?
Hue, Saturation, Lightness
What does HSL stand for?
Hue, Saturation, Lightness
What is the numerical range of hue in HSL?
0 - 360 degrees of hue
How are saturation and lightness represented in HSL?
with percentages
What does hue actually refer to?
the angle on the color wheel: for example, red is 0, green is 120, blue is 240,
Where is ‘normal’ lightness in HSL?
50%
How do you change opacity using HSL?
add A to the end of HSL - HSLA (hue saturation lightness alpha)
How is alpha (opacity) written in HSLA
as a decimal number from 0 to 1
What happens if Alpha in HSLA is set to 0?
the colour would be completely transparent
What happens if Alpha in HSLA is set to 1?
The colour would be completely opaque
Can you add opacity to RGB?
yes, with alpha - RGBA
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
What is the range of opacity in HEX?
00 ( transparent) to FF (opaque)
What is the named colour keyword for zero opacity?
transparent
How do you specify a typeface with multiple words?
put it in quotation marks - ‘Times New Roman’
What are web safe fonts?
fonts that appear the same across all browsers and operating systems
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
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
What else can be added as a fallback in a font stack?
serif or sans-serif
What does the font-weight property do?
controls how bold or thin text appears
How do you specify the font-weight property?
with keyword values (bold, normal, lighter, bolder)
or numerical values
What is the range of numerical values specified for font-weight?
1 (lightest) to 1000 (boldest)
What is the numerical value for font-weight that is equal to font-weight: normal?
400
What is the numerical value for font-weight that is equal to font-weight: bold?
700
How do you italicise text?
with the font-style property
What is the default value for font-style?
normal
What is the property for styling text all uppercase or lowercase?
text-transform
What property do you use for adjusting horizontal space between individual characters in an element?
letter-spacing
What property do you use for adjusting horizontal space between words in an element?
word-spacing
What value in units do the word-spacing and letter-spacing properties take?
pixels (px) or em
What property do you use to control how tall each line of text is?
line-height
What values can line-height take?
unitless numbers, or length values in pixels, percentages, or in em
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
How do you connect your HTML document to font hosts?
with < link > in the < head > element in HTML
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
Give different font file formats
OTF - open type font
TTF - true type font
WOFF - web open font format
WOFF2 - web open font format 2
What HTML can override all CSS style declarations?
in-line style in HTML
How do you create a CSS variable?
give a name with two – in front
–penguin-skin:
What is the CSS declaration for strikethrough?
text-decoration: line-through
what is a flex container
an element on a page that contains flex items
are children elements of a flex container flex items?
yes
how do you designate an element as a flex container?
set the element’s display property to flex or inline-flex
what elements can be flex containers?
any
how do you position flex elements from left to right?
with the property justify-content:
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.
how do you space elements vertically using flex?
with the align-items: property
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)
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
what is the default value of flex-shrink?
1
what is the default value of flex-grow?
0
margins are ___ by flex-grow and flex-shrink
margins are unaffected by flex-grow and flex-shrink
how can you set width and height with flex?
with the flex-basis property
what does flex-basis do?
allows us to specify the width of an item before it stretches or shrinks
what does the flex property allow you to code?
flex-grow, flex-shrink, and flex-basis;
what is the order for declaring flex values within flex: ?
flex-grow, flex-shrink, flex-basis;
what does flex-wrap do?
moves flex items to the next line when necessary
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.
what is the default value of flex-wrap?
nowrap
the flex-wrap property is declared on ___ ?
the flex-wrap property is declared on flex containers
align-items is for aligning elements within _ ___ __
align-items is for aligning elements within a single row
how do you align the content of a flex-container that has multiple rows?
with the align-content property
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)
flex containers have ___ axes
flex containers have 2 axes
flex containers have 2 axes, a __ axis and a ___ axis
a main axis and a cross axis
the ‘main’ axis for flex items is ___
the main axis is horizontal
by default the cross axis is ___
the cross axis is vertical
what properties are used with the main axis?
justify-content, flex-wrap, flex-grow, flex-shrink
what properties are used to position items with the cross axis?
align-items, align-content
are the main and cross axis interchangeable?
yes
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
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
where is the flex-direction property declared?
on flex containers
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
the flex-flow property is declared on __
flex-flow property is declared on flex containers
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
to set up a grid you need ____ and _____
a grid container and grid items
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)
by default grids contain ____ column
by default grids contain 1 column
how do you define columns of a grid?
with the css property grid-template-columns
what 2 changes does the grid-template-columns create?
defines the number of columns in the grid
and
sets the width of each column
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
what property do you use to set the number and size of rows in a grid?
grid-template-rows:
rows are defined as a percentage of the grid’s ___
rows are defined as a percentage of the grid’s height
columns are defined as a percentage of the grid’s ___
columns are defined as a percentage of the grid’s width
what is the shorthand for grid-template-columns and grid-template-rows?
grid-template
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
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
what is the new relative sizing unit you can use with css grid?
fr - fraction
what function can you use with grid-template-columns:
repeat ( )
what function can you use to resize the grid according to browser size?
minmax() function
what properties put blank space between every row and column in the grid?
row-gap and column-gap
what do grid gap properties not do?
they don’t add space at the beginning or end of the grid
what is the shorthand for row-gap and column-gap?
gap
how is the shorthand gap property different from other grid shorthand properties?
it does not need a slash / between values
what properties can you use to make single grid items take up multiple rows?
grid-row-start and grid-row-end
what values do grid-row-start and grid-row-end take?
grid lines (as numbers)
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
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
what is the shorthand property for grid-row-start and grid-row-end?
grid-row:
what is the shorthand for grid-column-start and grid-column-end?
grid-column:
what can you use instead of giving the grid lines for grid-column?
span - to give how many columns the grid item spans
why is using span with grid-row and grid-column useful?
it helps avoid errors in calculating
what property refactors both the grid-column and the grid-row properties?
grid-area
the grid-area property takes __ values
the grid-area property takes 4 values
what is the order of the 4 grid-area properties?
- grid-row-start
- grid-column-start
- grid-row-end
- grid-column-end
where is grid-template-areas property declared?
on grid containers
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
what is generally the easiest property to use when overlapping elements?
the grid-area property with grid-row names
where is the justify-items property declared?
it is declared on grid containers
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
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
justify-items specifies how grid items contained within a single container position themselves along the ___ axis
row
align-items specifies how grid items contained within a single container position themselves along the ___ axis
column
justify-self specifies how an ____ ____ should position itself with respect to the ____ axis
individual element
row axis
align-self specifies how an ____ ____ should position itself with respect to the ____ axis
individual element
column axis
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
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
what properties specify the size of grid tracks added implicitly?
grid-auto-rows and grid-auto-columns
where are the properties grid-auto-rows and grid-auto-columns declared?
on grid containers
what are the explicit (as opposed to implicit) counterparts to grid-auto-rows and grid-auto-columns
grid-template-rows and grid-template-columns
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 ( )
how do you specify the order in which implicit rows/columns are rendered?
with the property grid-auto-flow
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
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
to create a simple transition in CSS, what 2 aspects are needed?
the property that we want to transition
the duration of the transition
what is the value for transition time?
in seconds or milliseconds
what is the default time value for transitions / if there is no transition
0s
what property describes the pace of a transition
transition-timing-function:
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
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
what property can you use to specify the amount of time before a transition starts?
transition-delay:
what property can you use to specify the amount of time before a transition starts?
transition-delay:
what is the default value of transition-delay?
0 - no transition delay
how can you combine the four transition property declarations?
with the shorthand ‘transition:’
what is the order that properties are specified in using the shorthand ‘transition’?
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
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
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
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
how do you combine transitions within the shorthand transition property?
using commas ,
when you’re setting the same transition properties for many different elements, what value can you give to transition-property:
all
what is the benefit of relative measurements?
they allow for the proportions of the webpage to remain intact regardless of screen size or layout
what did the measurement em traditionally represent?
the width of a capital letter M in the typeface and size being used
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
what is normally the default size of text in a browser?
16 pixels
what does the unit of measurement rem stand for?
root em
how does the unit of measurement rem work?
it checks the root element’s size
the root element is the < html > tag
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
when is em better than rem for measurement
if you want to size elements in comparison to elements nearby, as opposed to site wide
how can you size elements relative to their parent elements?
using percentages
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)
when padding and margin are set with percentages, they are calculated based on only the ___ of the parent element
width
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
what is the default block state of images?
inline-block
what value can you declare to background-size to make a background image cover the entire background and scale proportionally?
background-size: cover;
what does CSS use to adapt a website’s content to different screen sizes?
media queries
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
what does DPI stand for
dots per inch
what values do min-resolution and max-resolution accept?
dpi (dots per inch) or dpc (dots per centimetres)
what do you use to separate media features in a media query if only one of the conditions needs to be met?
commas ,
what are the points at which media queries are set called?
breakpoints
what are breakpoints?
the screen size(s) at which your web page doesn’t appear properly
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
what are CSS variables called?
Custom Properties
what must CSS variables start with?
double hyphen: –
are CSS variables case sensitive?
yes
how do you use variables in CSS?
the variable’s name must be specified as an argument inside the var() function
what is a scope in CSS?
the scope is what determines where a variable will work based on where it is declared
what are the two types of scope a variable can have?
local and global
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
where are globally scoped variables declared?
in the :root pseudo-class
in most cases, the root element is actually the ____ element
< html > element
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
what properties aren’t inherited by child elements?
width, margin, padding, and border
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
how do you set a css variable as a fallback variable within a function?
it must be passed using another var() function
what is the maximum number of arguments the var ( ) function accepts?
2
how many arguments does the url ( ) function take?
just 1
what does the calc() function do?
takes a mathematical expression as its argument and returns the calculated value
the calc() function requires ___ between the operator and the numbers in the expression
requires whitespace
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
the min() function defines the ___ the class can have
min function defines the maximum
what does the clamp( ) function do?
the clamp function enables specified value to be kept within an upper and lower bound
how many parameters does the clamp function take?
3
what 3 parameters does the clamp function take?
- a minimum value, 2. a preferred value, 3. a maximum allowed value
what are the main CSS color functions?
the rgb() function, the rgba() function, the hsl() function, and the hsla() function
what kind of blur does the blur ( ) function apply?
a Gaussian blur
what is the default value for the brightness ( ) function?
100% or 1.0
what are the required arguments for the drop-shadow function?
offset-x and offset-y
what does the scale ( ) function do?
scale resizes an element horizontally and vertically on the 2D plane
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
what property is the scale ( ) function used with?
the transform: property
what does the rotate ( ) function do?
rotates an element around a fixed point on a 2D plane
what value must be given to the rotate ( ) function?
a number for degrees, specified with the deg (degrees) unit
what is the recommended font size for smaller screens?
18 to 20px
what is the default line-height property in most browsers?
1.2
what do the Web Content Accessibility Standards recommend as a minimum line-height?
1.5
what is the default property of letter-spacing?
normal
how many characters are recommended per line in a paragraph?
45 - 85 characters per line
what is 1ch equivalent to?
the width of the 0 character
what is the difference between two colours on the colour wheel called?
contrast ratio
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
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’
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
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
what are polyfills?
JavaScript codes that allow older browsers to behave as though they understand more advanced features than they actually do
