CSS

Question 1

What are the names of the individual pieces of a CSS rule? Describe the syntax.

Answer 1

Selector / Declaration block made up of Properties / Values

Selector followed by an opening curly brace.
Property, colon, value, semicolon. You can add as many properties and values you want to one rule. End the rule for that selector with the closing curly brace.

Question 2

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

Answer 2

Element-type-name { }

EX: body { } - this selects the body element

Question 3

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

Answer 3

id-name { }

Question 4

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

Answer 4

.note { }

This will select any element whose class attribute has a value of “note”

Question 5

What is a Universal Selector?

Answer 5

• { } - This targets all elements on the page

Question 6

In CSS how do you select an element that is a child of another element?

Answer 6

li > a { } - This targets any < a > elements that are children of an < li > element (but not other < a > elements in the page and not the < li > element itself)

Question 7

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

Answer 7

RGB Values (values for red, green, and blue are expressed as numbers between 0 and 255)

Hex Codes (Hex values represent values for red, green, and blue in a hexadecimal code)

Color Names (colors are represented by predefined names, however they are very limited in number)

Question 8

What CSS properties make up the box model?

Answer 8

Margin, Border, Padding, Content

Question 9

Which CSS property pushes boxes away from each other?

Answer 9

Margin

Question 10

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

Answer 10

Padding

Question 11

What is a pseudo-class?

Answer 11

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example :hover can be used to change a buttons color when the user’s pointer hovers over it.

Question 12

What are CSS pseudo-classes useful for?

Answer 12

Pseudo-classes allow you to change the styling/ appearance of elements when a user is interacting with them.

Question 13

Name at least 2 units of type size in CSS

Answer 13

Pixels (px), Percentages(%), Ems (em), REM

Question 14

What CSS Property controls the font used for the text inside an element

Answer 14

font-family property

Question 15

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

Answer 15

row - left to right

Question 16

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

Answer 16

nowrap - all flex items will be on one line

Question 17

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

Answer 17

Because div elements are block elements - so by default they start on a new line

Question 18

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

Answer 18

row - left to right

Question 19

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

Answer 19

Static = normal flow

Question 20

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

Answer 20

Relative Positioning does not affect the document flow. The surrounding elements still observe the relative element as if they were in the same position.

Question 21

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

Answer 21

Setting position:relative does not affect where it appears on the page. You must modify the box offset properties to change the positioning on the page.

Question 22

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

Answer 22

An element set with Absolute positioning is taken out of normal flow.

The document and surrounding elements to not observe that element exists

Question 23

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

Answer 23

Setting position:absolute is now positioned in relation to its containing element.

Question 24

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

Answer 24

The parent containing element must not be static. (use relative)

Question 25

What are the four box offset properties?

Answer 25

top, right, bottom, left

Question 26

What are the 4 components of “the Cascade”?

Answer 26

Source order, specificity, inheritance, ! important

Question 27

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

Answer 27

The order that your CSS rules are written in your stylesheet. The styling provided for an element LAST in your stylesheet is the styling that will ultimately take effect.

Question 28

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

Answer 28

By using and inherited property - a property which by default are set to the computed value of the parent element.

Question 29

Why is using ! important considered bad practice?

Answer 29

It makes debugging more difficult by breaking the natural cascading in your stylesheets. ! important is very difficult to override.

Question 30

What does the transform property do?

Answer 30

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

Question 31

Give four examples of CSS transform functions.

Answer 31

translate( ); skew ( );

rotate ( ); scale ( );

Question 32

The transition property is shorthand for which 4 CSS properties?

Answer 32

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

Question 33

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

Answer 33

width (min or max also) - most common — more on MDN

Question 34

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

Answer 34

The Viewport meta tag.

< meta name=”viewport… >

Question 35

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

Answer 35

Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.

Question 36

What is a breakpoint in responsive Web design?

Answer 36

The point at which a media query is introduced.

Question 37

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 37

Using a percentage changes the size relative to the parent/s - which allows for scaleability

Question 38

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 38

Due to CSS source order - the last rule on the page will take effect and the rule for a larger width will not be read