CSS Properties

Question 1

Color

Answer 1

Color

Question 2

Size of font

Answer 2

font-size

Question 3

Sans serif

Answer 3

font-family: sans-serif

Question 4

Uppercase

Answer 4

text-transform: uppercase

Question 5

Font style

Answer 5

font-style: italic

Question 6

Line height
Where to set this property?

Answer 6

line-height: 1.5

Good thing to set this in the body tag! (Just as for example sans-serif property)
All the lines for all the text will now adjust to what you set here

Question 7

Text align

Answer 7

text-align: center

Puts the text in the middle of the element block

Question 8

Set under line text

Answer 8

text-decoration: underline dotted orangered

Question 9

Sets list style back to default

Answer 9

list-style: none;

Question 10

Background color

Answer 10

background-color: #00ffff

Question 11

Hexadecimal value

Answer 11

00ffff

Each pair of 2 characters refers to a hexadecimal value in RGB

Question 12

Set border

Answer 12

border-top: 5px solid #1098ad;

Question 13

Border 3 elements?

Answer 13

Border always has 3 values: Line size, fill and color

Question 14

Padding elements?

Answer 14

padding: 20px 40px;

First value refers to top-bottom, second value refers to left-right

Question 15

Create extra white space at the bottom outside of the element

Answer 15

margin-bottom:10px;

Question 16

What happens when margins overlap?

Answer 16

When margins overlap, it will not add them up but rather takes the largest

Question 17

How to use margin to set content to center of page?

Answer 17

.container{
width: 700px;
margin-left: auto;
margin-right: auto;
}

When setting the margin left and right BOTH to auto, the left and right side will both be the same, which results in the centering of the page

Question 18

What does this do?

width: 100%

Answer 18

Width will be taken from parent

Question 19

How to position something to top left of viewport?

Answer 19

position: absolute;
top: 0;
left: 0;

Question 20

Position something relative to another element, for example the body

Answer 20

body{
position: relative;
}

button{
position: absolute;
}

The button will be placed relative to the body

Question 21

When relatively position an element, which element will it be relative to?

Answer 21

It looks at the first relative parent element

Question 22

Set top down margin zero and left right to auto

Answer 22

margin: 0 auto;

Question 23

Square bullets

Answer 23

list-style: square

Question 24

Show cursor on button

Answer 24

cursor: pointer;

Question 25

Set 50px margin on top and same width left and right

Answer 25

margin: 50px auto;

Question 26

Would this work?

.more-info:link, .more-info:visited {
margin-bottom:30px;
color: black;
}

Answer 26

No, margin does not work on small elements such as anchor

Question 27

How to space out area between list elements?

Answer 27

Use a descended selector.
The class refers to the list and the element to the list elements, like this:

.details-list li{
margin-bottom: 10px;
}

Question 28

Stretch out button all over the length of the container

Answer 28

width:100%