CSS

Question 1

how to enable flexbox

Answer 1

display: flex;

Question 2

how to justify flexbox

Answer 2

justify-content:

Question 3

what are the options to justify content in flexbox

Answer 3

centre
flex-start
flex-end
space-around
apace-between

Question 4

how to vertically align items in flexbox

Answer 4

align-items:

Question 5

what are the vertical alignment options in flexbox

Answer 5

centre
flex-start
flex-end
baseline
stretch

Question 6

how to specify the direction

Answer 6

flex-direction: row, column

Question 7

default direction of flexbox

Answer 7

row (side by side)

Question 8

flex shortcut

Answer 8

flex: 0 0 10px (grow shrink basis)

Question 9

use a media query

Answer 9

@media (max-height: 800px){ 
    p {
    font-size: 10px;
      }
  }

Question 10

what does align-self do?

Answer 10

Center the alignments for one of the items inside a flexible element

allows to switch up elements alignment individually

Question 11

The align-self property ____ the flexible container’s align-items property.

Answer 11

overrides

Question 12

How to make images responsive? (Example code)

Answer 12

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

Question 13

what are viewport units relative to?

Answer 13

device

Question 14

what are % units relative to?

Answer 14

size of the container

Question 15

The grid-column is a shorthand property for

Answer 15

grid-column-start and grid-column-end.

Question 16

grid-column specifies

Answer 16

grid item’s size and location within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement

Question 17

default flex justification

Answer 17

flex-start

Question 18

justify-content aligns down the ___ axis

Answer 18

vertical

Question 19

align-items aligns down the ___ axis

Answer 19

horizontal

Question 20

flex: grow shrink basis - what do they mean?

Answer 20

flex-basis: sets the size
flex-shrink: sets the shrink factor of elements
flex-grow: sets the grow factor of elements

Question 21

what is the css equivalent of <strong></strong>

Answer 21

font-weight: bold;

Question 22

How to create overlapping elements with CSS (code)

Answer 22

first {
position: absolute;
}

second {

position: absolute;
top: 90px;}

Question 23

center block with

Answer 23

margin: auto;

Question 24

box-shadow settings

Answer 24

offset-x
offset-y
blur-radius
spread-radius
color

Question 25

rgba():

Answer 25

same as rgb() + a for opacity (0,1)

Question 26

how to make the text strikethrough with css ()

Answer 26

text-decoration: line-through;

Question 27

how to italicise text in css (<em>)</em>

Answer 27

font-style: italic;

Question 28

how to underline text with css (<u>)</u>

Answer 28

text-decoration: underline;

Question 29

enable css grid

Answer 29

display: grid
grid-template-columns:
grid-template-rows:

Question 30

set gap between grid

Answer 30

grid-gap: 10px
//both
grid-gap: 10px 5px
// row col

Question 31

grid-column or grid-row usage

Answer 31

grid-column: 1/3
//start on column 1 and span 3 columns
grid-row: 1/3
//start on row 1 and span 3 rows

Question 32

alignment methods in grid

Answer 32

justify-self: stretch/center/end
align-self: “-“
justify-items: //does both

Question 33

methods available in grid-column

Answer 33

repeat (x, [sizing])
minmax(min,max)
auto-fill
auto-fit

Question 34

grid-template-areas syntax

Answer 34

grid-template-areas:
“header header header”
“content content content”
“footer footer footer”

then…

item {
grid-area: header}