General

Question 1

css: box-sizing: border-box

Answer 1

Makes the size inclusive of border and padding

Question 2

css: margin: 0 auto;

Answer 2

helps to centre horizontally, a width must be set for it to work

Question 3

css: .breadcrumb li+li::before {
content: “>”;
}

Answer 3

Separator in breadcrumbs

Question 4

css: display: flex;
Or. display: inline-flex

Answer 4

Designate an item as a flex container

Question 5

css {
justify-content: flex-start;
flex-end;
centre;
space-around;
space-between

Answer 5

Five commonly used options to distribute within a flex-container.

Question 6

css {
align-items: flex-start;
flex-end;
center
baseline;
stretch;

Answer 6

5 commonly used align-items properties to flex vertically -cross axis- within a flex-container

Question 7

css {
flex-basis: npx
}

Answer 7

To specify a width of an item before it stretches or shrinks.

Question 8

css {
flex-wrap: wrap;
wrap-reverse;
no-wrap;

Answer 8

Use on containers to apply to child items

Question 9

css {
align-content: flex-start;
flex-end;
center;
space-between;
space-around;
stretch;

Answer 9

For aligning multiple rows vertically in a flex container. essentially shares values with align items.

Question 10

css: {
flex-flow:

Answer 10

Shorthand for flex direction and flex-wrap (in this order).

Question 11

css {
flex: (flex-grow flex-shrink flex-basis)

Answer 11

Flex is shorthand for the 3 values

Question 12

css {
display: grid;
}

Answer 12

Setup a grid!

Question 13

css: cursor: pointer;

Answer 13

Change the arrow to a point hand

Question 14

css: ELEMENT:hover {

Answer 14

pseudo class to do something when the cursor is over it

Question 15

css {
gap: rowpx colpx;
}

Answer 15

Set row and column spacing

Question 16

CSS {
grid-template-ROWS/COLUMNS: npx minmax(npx, npx) npx;
}

Answer 16

Define rows or columns sizes with middle one having size limits set for scaling

Question 17

CSS {
grid-template-ROWS/COLUMNS: repeat(n, 100px)
}

Answer 17

Repeat a unit size n times

Question 18

CSS {
grid-template: npx n% nfr / n% npx;
}

Answer 18

Shorthand for grid-template-ROWS/COLUMNS
Actually laid out rows / columns

Question 19

CSS {
grid-row: n / n;
(or grid-column)
}

Answer 19

Short hand for row-start and row-end (in that order)

Question 20

CSS {
grid-area: rowStart / colStart / row end / col end;
}

Answer 20

Short hand for grid-row and grid-column combined

Question 21

css {
grid-template-areas:
“header header”
“left right “
“footer footer”;
}

Answer 21

Allows you to name sections (elements or classes) to define grid-row-start etc.
Declare it in the grid container

Question 22

CSS {
grid-area: left/right/footer;
}

Answer 22

How to define a grid area for an grid element within a grid container

Question 23

css {
z-index: 5;
}

Answer 23

Brings an object forward or back in layers (especially in grid overlaps)

Question 24

CSS {
grid-auto-COLUMNS/ROWS;

Answer 24

Specifies the HEIGHT/WIDTH of those implicitly added to the grid

Question 25

CSS {
grid-auto-flow: ROW/COLUMN

Answer 25

Specify in which direction implicit elements should be created

Question 26

.container {
width: 50%;
height: 200px;
overflow: hidden;
}

. container img {
max-width: 100%
height: auto;
display: block;
}

Answer 26

Represents a container div.
Setting to overflow hose ensure any content with dims larger than the container will be hidden
Second rule images scale with the container.
In block rather than inline-block (which is default) so that they don’t try aligning with other things.
This should be memorised. Handy for images and videos!!

Question 27

CSS a[href*=“example”] {

Answer 27

An attribute selector:
The * permits a partial match on the substring
A ^ selects all string with a substring
Using a $ would be for ending with a substring (like a file extension for eg)

Question 28

<meta name=“viewport” content=“width =device-width, initial-scale =1”>

Answer 28

meta tag to instruct the browser how to render scale and dimensions
=Same width as screen
=same width as device
=zoom level

Question 29

@media only screen and (max-width: 480px) { body {
then nest any media specific css
}
}

Answer 29

Media query being applied to screens smaller than 480px (cell phones in landscape)