CSS

Question 1

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

Answer 1

• Selector

- Declaration (comprised of a property and its value)

Question 2

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

Answer 2

With the class selector

Ex. .note { } - targets any elements whose class attribute is note

Question 3

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

Answer 3

You select the elements with their name and { }

Ex. h1 { } - this will select all h1 elements

Question 4

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

Answer 4

With the id selector #

Ex. #introduction - targets the element whose id attribute has the value of introduction

Question 5

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

Answer 5

• rgb value (red, green, blue)
  
  • Values are expressed between 0 and 255
  • Ex. rgb (102, 205, 170)
• hex codes
  
  • has 6 characters
  • Ex. #66cdaa

-color names

Question 6

What CSS properties make up the box model?

Answer 6

Margin, padding, border, width, height

*Width & height = content of box

Question 7

Which CSS property pushes boxes away from each other?

Answer 7

Margin

Question 8

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

Answer 8

Padding

Question 9

What is a pseudo-class?

Answer 9

Keywords added to a selector that specifies a special state of the selected elements

Ex. “ : hover “ can be used to change a button’s color when the user’s pointer hovers over it

Question 10

What are CSS pseudo-classes useful for?

Answer 10

It is useful for applying styling to an element that is not only in relation to the content but also in relation to external factors (also good for visual and interactive purposes)

Question 11

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

Answer 11

Pixels, percentages, ems

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

Row (left to right)

Question 14

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

Answer 14

Nowrap (all flex items will be on one line)

Question 15

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

Answer 15

They are block-line elements and block line elements start on new lines

Question 16

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

Answer 16

Row (left to right)

Question 17

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

Answer 17

Position: static (block-level elements sit on top of each other)

Question 18

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

Answer 18

It’ll still remain in flow with the document just like static properties but the only difference is that now its positioned elsewhere

Question 19

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

Answer 19

It’s still in the same in the position on the page, it is just offsetted if an offset property is set

Question 20

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

Answer 20

It no longers exist on the document flow

Question 21

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

Answer 21

Its positioned next to the closest non static position value

Question 22

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

Answer 22

With any properties that isn’t static (absolute or relative)

Question 23

What are the four box offset properties?

Answer 23

top , bottom, left, right

Question 24

What are the four components of “the Cascade”.

Answer 24

• Source order
• Inheritance
• Specificity
• !important

Question 25

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

Answer 25

The order that your CSS rules are written in your stylesheet; the styling provided for an element that is last in the styling sheet is the one that takes effect (bottom styling is stronger)

Question 26

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

Answer 26

It is possible because of inheritance; this process allows child HTML elements to receive value from a parent element if no css for that property [the child] is declared

Question 27

List the three selector types in order of increasing specificity.

Answer 27

• Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
• Class selectors (e.g., .example), attributes selectors (e.g., [type=”radio”]) and pseudo-classes (e.g., :hover).
• ID selectors (e.g., #example)

Question 28

Why is using !important considered bad practice?

Answer 28

It makes debugging more difficult by breaking the natural cascading in your style sheets

Question 29

What does the transform property do?

Answer 29

Lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Question 30

Give four examples of CSS transform functions.

Answer 30

Matrix
Translate
Scale
Rotate

Question 31

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

Answer 31

Update, width, height, hover, etc.

Question 32

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

Answer 32

Viewport meta tag

Question 33

The transition property is shorthand for which four CSS properties?

Answer 33

Transition-property: sets the CSS properties to which a transition effect should be applied.

Transition-duration: sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.

Transition-timing-function: sets how intermediate values are calculated for CSS properties being affected by a transition effect.

Transition-delay: specifies the duration to wait before starting a property’s transition effect when its value changes.

Question 34

What is a breakpoint in responsive Web design?

Answer 34

When certain styles are being applied based on media queries
-Especially device width

Question 35

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 35

Using a percentage allows the browser page to be responsive with different devices; if we use a pixel, the size is fixed and it will remain that size regardless of the device

Question 36

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 36

The smaller width will win if it is placed last due to the ordering rule of CSS (cascading) - things that are placed last get priority