CSS

Question 1

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

Answer 1

A CSS rule is made up of a Selector, Property, and Value (property and value stored in key-value pairs within the declaration block)

Question 2

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

Answer 2

.classname

denoted with a period

Question 3

In CSS, how do you select elements by their tag name?

Answer 3

elementname

example:

h1 {
     font-size: 24px;
}

Question 4

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

Answer 4

#idname

denoted with a hashtage (#)

example:

#language {
     color: red;
}

Question 5

Name three different types of values you can use to set color in CSS

Answer 5

Keywords (Color name)
Hex Codes
RGB
RGBA
HSL
HSLA

Question 6

What CSS properties make up the box model?

Answer 6

Margin, Border, Padding, Height, Width

refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties

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 and what is it useful for?

Answer 9

a selector that specifies a special state of the selected element(s)
a class that cannot be forced but must be achieved with a special state (ex. user interaction)

Question 10

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

Answer 10

em, ch, ex, cm, rem

preferred: rem

Question 11

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

Answer 11

font-family

Question 12

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

Answer 12

row (left-to-right)

Question 13

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

Answer 13

nowrap

Question 14

What are the three primary components of a page layout?

Answer 14

Container, Row, and Column

Question 15

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

Answer 15

At least one, even if that column takes up the full space

Question 16

What is the purpose of a container?

Answer 16

It helps with grouping together the components within a page to make layout control easier.

Question 17

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

Answer 17

static

Question 18

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

Answer 18

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the box offset properties

Question 19

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

Answer 19

The offset does not affect the position of any other elements in the document flow.

Question 20

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

Answer 20

Absolutely positioned elements are removed entirely from the document flow

Question 21

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

Answer 21

the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.

Question 22

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

Answer 22

Define each offset property to define the boundary within the containing block

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, and Important

Question 25

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

Answer 25

The order in which the rules are written, with rules written towards the bottom over-writing those on top.

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

Inheritance (set desired property to inherit from parent and apply style to parent if its not a property with inherit as a default)

Question 27

List the three selector types in order of increasing specificity.

Answer 27

No value > Element Type > Class > ID

Question 28

Why is using !important considered bad practice?

Answer 28

Since it overrides everything it would be difficult to debug, as well as defeat the purpose of the other three components of the Cascade. If rules are written respecting source order, inheritance, and specificity there should be no need to use !important.

Question 29

The transition property is shorthand for which four CSS properties?

Answer 29

transition-property -selects property to apply transition
transition-duration -sets duration of transition effect
transition-timing-function -sets acceleration curve of effect
transition-delay -sets delay before transition begins (can be negative)

Question 30

What does the transform property do?

Answer 30

It allows you to rotate, scale, skew, or translate an element.

Question 31

Give four examples of CSS transform functions.

Answer 31

rotate();
translate();
skew();
scale();

note that many are shorthands for function-axis such as rotateX() or translateY()

Question 32

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

Answer 32

width, height
link to list of media features

Question 33

What is the affect of setting an element to display: none?

Answer 33

The element is not displayed and removed from the document flow.

Question 34

What is a breakpoint in responsive Web design?

Answer 34

It is a point in which content starts to “break” from the viewport sizing.

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

If it uses a percentage content will scale with viewport size instead of always being a set unit’s size.

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

This is due to source order, with things at the bottom of the stylesheet taking more importance than those above it.