CSS

Question 1

What are the names of the individual pieces of a CSS rule?

Answer 1

selector
opening curly brace for declaration block
property: value;
ending curly brace of the css rule

Question 2

In CSS, how do you select elements by their class attribute?

Answer 2

.class-name {

Question 3

In CSS, how do you select elements by their type?

Answer 3

element name

Question 4

In CSS, how do you select an element by its id attribute?

Answer 4

id-name {

Question 5

Name three different types of values you can use to specify colors in CSS.

Answer 5

RGB values, Hex codes, Color names

Question 6

What CSS properties make up the box model?

Answer 6

Border Margin Padding

Question 7

Which CSS property pushes boxes away from each other?

Answer 7

Margin - sits on the outside of the border

Question 8

Which CSS property add space between a box’s content and its border?

Answer 8

padding -Is the space between the border of a box and any content.

Question 9

What is the box model

Answer 9

Box model uses border margin padding to decide the size of a single box

Question 10

Size of box is calculated with what (width)

Answer 10

width + padding-left + padding-right + border-left + border-right

Question 11

Size of box is calculated with what (height)

Answer 11

height + padding-top+ padding- bottom + border-top + border bottom

Question 12

What is a pseudo-class?

Answer 12

class applied by the browser in certain situations.

Question 13

Name 3 pseudo-classes

Answer 13

hover, active, focus

Question 14

What are CSS pseudo-classes useful for?

Answer 14

More interactive webpage

Question 15

Name at least two units of type size in CSS.

Answer 15

pixels, percentages, ems

Question 16

What CSS property controls the font used for the text inside an element?

Answer 16

Font-family

Question 17

What is the default flex-direction of a flex container?

Answer 17

Row

Question 18

What is the default flex-wrap of a flex container?

Answer 18

It’s just a straight line there is no wrap at all.

Question 19

Why do two div elements “vertically stack” on one another by default?

Answer 19

because divs are block elements

Question 20

What is the default flex-direction of an element with display: flex?

Answer 20

row

Question 21

What is the default value for the position property of HTML elements?

Answer 21

static

Question 22

How does setting position: relative on an element affect document flow?

Answer 22

does not affect the position or surrounding element

Question 23

How does setting position: relative on an element affect where it appears on the page?

Answer 23

Shifts in element in left right top bottom direction and does not affect the position

Question 24

How does setting position: absolute on an element affect document flow?

Answer 24

The element is taken out of normal flow and doesn’t affect the positioning of surrounding elements.. Element gets ignored

Question 25

How does setting position: absolute on an element affect where it appears on the page?

Answer 25

Absolutely positioned elements
move as users scroll up and
down the page.

Question 26

How do you constrain an absolutely positioned element to a containing block?

Answer 26

needs to find a non-static parent, or neighbor if not uses the viewport

Question 27

What are the four box offset properties?

Answer 27

top, bottom, left, right

Question 28

What does the transform property do?

Answer 28

it allows you to modify the coordinate x y z space of the css

Question 29

Give four examples of CSS transform functions?

Answer 29

matrix, translate, scale, rotate, skew

Question 30

The transition property is shorthand for which four CSS properties?

Answer 30

transition-delay
transition-duration
transition-property
transition-timing-function

Question 31

Give two examples of media features that you can query in an @media rule.

Answer 31

color, height, min-width

Question 32

Which HTML meta tag is used in mobile-responsive web pages?

Answer 32

viewport

Question 33

What is a breakpoint in responsive Web design?

Answer 33

The points at which a media query is introduced are known as breakpoints. So it makes the webpage responsive when the screen-size gets bigger or smaller

Question 34

What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?

Answer 34

flexibility with different viewports

Question 35

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?

Answer 35

Source-order