CSS

Question 1

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

Answer 1

selector, declaration, curly brace, property, value

Question 2

How do you select elements by their class attribute?

Answer 2

by adding a period in front:
.example {}

Question 3

How do you select elements by their tag name?

Answer 3

just add the tag name
example {}

Question 4

How do you select an element by its id attribute?

Answer 4

by adding a # in front:
#example {}

Question 5

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

Answer 5

the color name, rgb values, hexcodes

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

pseudo-classes are keywords added next the the selector that specifies a special state of the selected element.

Question 10

Give an example of a pseudo-class

Answer 10

button : hover {
background-color: blue;
}
this would change the color of the button if your cursor hovers over it.
:hover :active :focus are a few other ones

Question 11

What are CSS pseudo-classes useful for?

Answer 11

it helps change an element when a specific action is taken

Question 12

What does the :nth-child() pseudo class do?

Answer 12

an :nth-child() pseudo-class is used to specify between a group of siblings using their positions

Question 13

Name the types of units that can be used to adjust font-size in CSS.

Answer 13

pixels(px), percentages, and ems(em)/rem

Question 14

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

Answer 14

font-family

Question 15

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

Answer 15

row

Question 16

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

Answer 16

nowrap

Question 17

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

Answer 17

because they are block level elements so each div would separate from each other

Question 18

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

Answer 18

row

Question 19

What are the three primary components of a page layout? (Which helper classes do you need?)

Answer 19

container, row, columns

flexbox

Question 20

What is the minimum number of columns that you should put in a row?

Answer 20

one

Question 21

What is the purpose of a container?

Answer 21

To hold the contents needed for the layout

Question 22

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

Answer 22

position: static;

Question 23

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

Answer 23

doesn’t really change the flow of the document but it moves the element

Question 24

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

Answer 24

it moves an element in relation to where it would’ve been

Question 25

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

Answer 25

it changes the flow as the absolute value allows the element to move outside of the box or container

Question 26

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

Answer 26

it can be out of the box/container this means it won’t affect the position of the other elements

Question 27

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

Answer 27

add the position: relative to the parent element

Question 28

What are the four box offset properties?

Answer 28

top, right, bottom, left

Question 29

What are the four components of “the Cascade”.

Answer 29

source-order, inheritance, specificity, !important

Question 30

What does the term “source order” mean with respect to CSS?

Answer 30

the latest or most recent one in order of the css rule sets

Question 31

How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

Answer 31

because child elements inherit the styling of their parent element

Question 32

List the three selector types in order of decreasing specificity.

Answer 32

id, class, type

Question 33

Why is using !important considered bad practice?

Answer 33

us as last resort, it overrides everything, it will be hard to change the element with it, therefore making it hard for team projects//collaborations

Question 34

What does the transform property do?

Answer 34

it transforms the element, either it changes its form, direction, etc.

Question 35

Give four examples of CSS transform functions.

Answer 35

rotate, scale, translate, skew

Question 36

The transition property is shorthand for which four CSS properties?

Answer 36

transition-property , transition-duration , transition-timing-function , and transition-delay

Question 37

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

Answer 37

min-width, max-height, resolution, aspect-ratio

Question 38

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

Answer 38

the viewport meta tag

Question 39

What is a breakpoint in responsive Web design?

Answer 39

it’s a point where the change of the style happens

Question 40

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 40

for smaller devices like phones it will scale the width by percentage instead of a set px since the px set is probably too big for the phones (tldr. good and efficient for smaller devices)

Question 41

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 41

because of the source order. whichever is last on the order “wins” only time the source order rule is overpowered is when the specificity is higher/stronger id/class/tag