CSS

Question 1

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

Answer 1

Selectors and Declarations

Property and Value

Question 2

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

Answer 2

You put a period . in front of the class attribute value

.class-name

Question 3

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

Answer 3

You put whatever element type is followed by curly braces

p {} h1 {} h2 {} div {} em {} span {}

Question 4

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

Answer 4

id-name

You put a pound symbol # in front of the id attribute value

Question 5

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

Answer 5

RGB Value, Hex Codes, Color Names

Question 6

What CSS properties make up the box model?

Answer 6

border, margin, and padding

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

A keyword added to a selector that specifies a special state of the selected element(s)

Pseudo-classes only apply when the element is in a certain state

Question 10

What are CSS pseudo-classes useful for?

Answer 10

Webpage interaction

Pseudo-classes allow us to write less code

Question 11

Name at least two units of type size in CSS.

Answer 11

Em, pixels, and percentages

Question 12

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

Answer 12

Font-family

Question 13

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

Answer 13

The default direction is row - from left to right

Question 14

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

Answer 14

No-wrap is the default which makes all the items try to fit on one line

Wrap allows the content to be displayed on multiple lines from top to bottom

Question 15

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

Answer 15

They are block elements so they begin on a new line

Question 16

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

Answer 16

Rows, from left to right

Question 17

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

Answer 17

Static - No difference from the normal flow

Question 18

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

Answer 18

It does not. Other elements stay in the position they would be in normal flow

Question 19

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

Answer 19

You can move the element top, right, bottom, or left of its original position

Question 20

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

Answer 20

It places the element in relation to its containing element. Absolute positioned elements will MOVE as you scroll on the page.

It no longer has a place in the document flow.

When it is positioned to absolute, it needs to be positioned to it’s parent element or class. It cannot be a static positioning.

Question 21

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

Answer 21

It positions itself relative to the parent element or class, as long as the parent element or class is not static.

Question 22

What are the four box offset properties?

Answer 22

Top, bottom, left, and right

Question 23

What are the four components of “the Cascade” (What gets prioritized)?

Answer 23

Source Order, Specificity, Inheritance, !important

Question 24

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

Answer 24

Whichever class or element comes last in the stylesheet will be the rule that is applied

Question 25

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

Answer 25

Inheritance - Children elements inherit the parent elements css rule.

Question 26

List three selector type in order of increasing specificity.

Answer 26

Type Selectors > Class Selectors > ID Selectors (Weakest to strongest specificity)

Question 27

Why is using !important considered bad practice?

Answer 27

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

Question 28

What does the transform property do?

Answer 28

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

Question 29

Give four examples of CSS transform functions.

Answer 29

rotate, scale, skew, translate

Question 30

The transition property is shorthand for which four CSS properties?

Answer 30

Delay, Duration, Property, Timing-Function

Question 31

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

Answer 31

display mode, forced colors, height, hover, screen, print

Question 32

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

Answer 32

meta name=”viewport”

content=”width=device-width, initial-scale=1”

Question 33

What is a breakpoint in responsive web design?

Answer 33

A breakpoint is the point at which a media query is introduced.

It’s where you want to snap your layout to a different set of proportions.

Question 34

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 34

This allows you to adjust the size of the elements in comparison to the size of the browser or viewport instead of a static/hard coded pixel size

This influences a ‘fluid’ design rather than ‘static’ design

Question 35

If you introduce CSS rules for a smaller min-width after the style for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?

Answer 35

Source order.