CSS

Question 1

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

Answer 1

selector, declaration, property, value

Question 2

In CSS, how do you select elements by theirclassattribute?

Answer 2

put a dot in front of value of class attribute and curly brackets

Question 3

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

Answer 3

just the name and curly brackets

Question 4

In CSS, how do you select an element by itsidattribute?

Answer 4

put a # in front of value id attribute and curly brackets

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

Question 8

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

Answer 8

padding

Question 9

What is a pseudo-class?

Answer 9

Class that is applied to an element by the browser under specific circumstances.

Question 10

What are CSS pseudo-classes useful for?

Answer 10

Adding functionality to certain elements based on user interaction. Applying styling based on user actions.

Question 11

Name at least two units of type size in CSS.

Answer 11

pixels, percentages, ems, pt

Question 12

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

Answer 12

font-family property.

Question 13

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

Answer 13

The defaultflex-directionof aflexcontainer isrow. The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

Question 14

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

Answer 14

no wrap. The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines.

Question 15

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

Answer 15

div elements are by default block-level elements.

Question 16

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

Answer 16

row.

Question 17

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

Answer 17

Static.

Question 18

How does setting positions to relative on an element affect document flow?

Answer 18

This moves element from the position it would be in normal flow. Does not affect document flow.

Question 19

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

Answer 19

Shifts to the top, right, bottom, or left of where it would have been placed. Setting position to relative will need positioning. By itself does nothing.

Question 20

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

Answer 20

This positions the element in relation to its containing element. It is taken out of normal flow, meaning that it does not affect the position of any surrounding elements. Removed from the document flow immediately.

Question 21

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

Answer 21

Absolutely positioned elements move as users scroll up and down the page. Out of the document flow.

Question 22

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

Answer 22

Using position relative

Question 23

What are the four box offset properties?

Answer 23

Top, right, bottom, left

Question 24

What does the transform property do?

Answer 24

lets you rotate, scale. Skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
Adjusting how the element looks on its coordinate.

Question 25

Give four examples of CSS transform functions.

Answer 25

translate. Matrix, scale, rotate, skew.

Question 26

The transition property is shorthand for which four css properties?

Answer 26

transition property, transition duration, transition timing function, transition delay.

Question 27

What is abreakpointin responsive Web design?

Answer 27

a breakpoint is the point at which a websites content and design will adapt in a certain way.
Point where your styling will shift. Width of the viewport is the most common way.

Question 28

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

Answer 28

adapts to the screen size instead of having to specify px value.

Question 29

If you introduce CSS rules for a smallermin-widthafterthe styles for a largermin-widthin your style sheet, the CSS rules for thesmallermin-widthwill “win”. Why is that?

Answer 29

because of source order.

Question 30

What is flexbox?

Answer 30

Flexbox is a collection of CSS properties that allow you to easily control the layout and alignment of elements on a web page.

Question 31

What is position property in CSS?

Answer 31

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.