CSS

Question 1

h1, h2, p {
text-align: center;
}

Answer 1

aligns to center of page

Question 2

id value

Answer 2

selected to target a specific element with an id attribute

Question 3

/* */

Answer 3

creates a comment

Question 4

margin-left: auto;
margin-right: auto;

Answer 4

margin as invisible space around an element.

Question 5

.class

Answer 5

another way to link <div> to css

Question 6

background-image: url()

Answer 6

sets background image

Question 7

.item p {
display: inline-block;
}

Answer 7

displays code on the same line even if they are different paragraphs

Question 8

padding-left,right,bottom,top

Answer 8

gives some space between the content and the sides.

Question 9

max-width

Answer 9

prevent width from growing too wide.

Question 10

font-family

Answer 10

allows you to change the font

Question 11

What is this doing?
font-family: Impact,serif;

Answer 11

Acting as a allbacks are used in instances where the initial is not found/available.

Question 12

font-size

Answer 12

size of text

Question 13

border-color

Answer 13

changes color of border

Question 14

a:visited {
color: grey;
}

Answer 14

changes the color to grey when page is visited.

Question 15

a:hover {
color: brown;
}

Answer 15

if you hover over a text it will change the color to brown

Question 16

a:active{
color: white;
}

Answer 16

changes link color to white if link to clicked.

Question 17

what do the inputs mean hsl(240,100%,50%)

Answer 17

hue of color wheel, saturation and lightness

Question 18

rgb(200,13,45)

Answer 18

mixed of red green and blue on rgb wheel

Question 19

linear-gradient(90deg,hex,rgb or hsl)

Answer 19

allows to add a gradient of two colors on each side and joins them together

Question 20

opacity

Answer 20

transparently of an item 0% is solid and 100% see through.

Question 21

border-left

Answer 21

shorthand property lets you to set the left border’s width, style, and color at the same time.

Here is the syntax:

border-left: width style color;

Question 22

box-shadow
box-shadow: offsetX offsetY color;

Answer 22

property lets you apply one or more shadows around an element.

Question 23

offsetX

Answer 23

a positive offsetX value moves the shadow right and a negative value moves it left

Question 23

offsetY

Answer 23

a positive offsetY value moves the shadow down and a negative value moves it up

Question 24

rem

Answer 24

The rem unit stands for root em, and is relative to the space inbetween new lines of while using the display: block in css html element.

Question 25

1,2,3,em

Answer 25

In CSS (Cascading Style Sheets), em is a unit of measurement which indicates size relative to the size of the font. 1em means “equal to the current font size”, and 2em means 2 times the current font size.

Question 26

vh

Answer 26

stands for viewport height, and is relative to 1% of the height of the viewport.

Question 27

vw

Answer 27

vw stands for Viewport Width and represents a percentage of the width of the viewport. The number placed before vw is the percentage of the width of the viewport this length will be. For example if you wrote 10vw then this would represent a length of 10% of the width of your viewport.

Question 28

unset

Answer 28

un does what was done in a different css style

Question 29

p:last-of-type { }

Answer 29

That will select the last p element. Create a new selector that targets the last element of p

Question 30

Overflow: hidden

Answer 30

changing the element back to its original dimensions.

Question 31

filter: blur(2px);

Answer 31

adds a blur filter

Question 32

transform: rotate(-0.6deg);

Answer 32

rotate it counter clockwise by 0.6 degrees.

Question 33

box-sizing: can add border-box or content-box ;

Answer 33

does a box around your item you want

Question 34

text-transform: uppercase, lowercase ;

Answer 34

allows you to change text to upper or lower case

Question 35

Flexbox
display: flex;

Answer 35

Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.

Question 36

flex-direction: row, row-reverse, column, column-reverse ;

Answer 36

The main axis is defined by the flex-direction property, which has four possible values:

row (default): horizontal axis with flex items from left to right
row-reverse: horizontal axis with flex items from right to left
column: vertical axis with flex items from top to bottom
column-reverse: vertical axis with flex items from bottom to top
Note: The axes and directions will be different depending on the text direction. The values shown are for a left-to-right text direction

Question 37

flex-wrap: wrap, nowrap;

Answer 37

The flex-wrap property determines how your flex items behave when the flex container is too small. Setting it to wrap will allow the items to wrap to the next row or column. nowrap (default) will prevent your items from wrapping and shrink them if needed.

Question 38

justify-content: center,left,right space-between;

Answer 38

allows you to align the flexbox

Question 39

align-items property

Answer 39

The align-items property positions the flex content along the cross axis.

Question 40

object-fit: cover;

Answer 40

object-fit property to determine how images should behave.

property and set it to cover. This will tell the image to fill the img container while maintaining aspect ratio, resulting in cropping to fit.

Question 41

The gap property and its row-gap and column-gap

Answer 41

provide this functionality for flex, grid, and multi-column layout.

Question 42

border-radius

Answer 42

smooth out edges

Question 43

::after{}

Answer 43

The ::after pseudo-element creates an element that is the last child of the selected element.

Question 44

*

Answer 44

used to select all elements

Question 45

font-weight

Answer 45

makes font a lot darker

Question 46

letter-spacing

Answer 46

property can be used to adjust the space between each character of text in an element.