CSS

Question 1

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

Answer 1

Selector, declaration, property, value

Question 2

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

Answer 2

.class (period followed by the class name)

Question 3

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

Answer 3

Just use the element name followed by {}.

Question 4

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

Answer 4

ID (hashtag followed by the ID name)

Question 5

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

Answer 5

Rgb values, hex codes, color names.

Question 6

What CSS properties make up the box model?

Answer 6

Border, margin , padding, content

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

A keyword added to a selector that specifies a special state of the element.

Question 10

What are CSS pseudo-classes useful for?

Answer 10

• Pseudo-classes allow for stylization of elements in relation to external factors, status of the content, or the position of the mouse.
• Makes changes based on user interaction

Question 11

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

Answer 11

pixels, percentages, em, etc

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

row

Question 14

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

Answer 14

no wrap

Question 15

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

Answer 15

They are block-level elements and will not allow other elements to sit next to it

Question 16

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

Answer 16

row

Question 17

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

Answer 17

Container, column, row

Question 18

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

Answer 18

1

Question 19

What is the purpose of a container?

Answer 19

• Contains everything in the web page to group together
• Gives us a boundary for the web page.

Question 20

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

Answer 20

static

Question 21

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

Answer 21

• Element remains in normal document flow.
• An elements final position can be modified to overlap other elements

Question 22

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

Answer 22

• Will not affect where it appears on the page. It will stay in the same place.
• You can control how far an element is placed from its original position.

Question 23

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

Answer 23

Element will be removed from normal document flow.

Question 24

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

Answer 24

• Element will be positioned relative to closest positioned non-static ancestor.
• The element sits on its own separate layer from all other elements

Question 25

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

Answer 25

• You make the containing block that you want it to be positioned to into a relative position. They will position themselves within the first non-static ancestor.
• Parent element can use (Absolute, sticky, fixed) to be a non static element

Question 26

What are the four box offset properties?

Answer 26

Top, right, bottom, left

Question 27

What are the four components of “the Cascade”.

Answer 27

Source order, inheritance, specificity, !important

Question 28

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

Answer 28

The order that your CSS rules are written your spreadsheet. The last stylization will take effect over the previous one.

Question 29

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

Answer 29

Inheritance

Question 30

List the three selector types in order of increasing specificity.

Answer 30

Class, ID or element type

Question 31

What does the transform property do?

Answer 31

• Applies a 2d or 3d transformation to an element
• Can manipulate the element by rotation, scaling, skewing, or translating

Question 32

Give four examples of CSS transform functions.

Answer 32

translateY(), scale(), skew() , rotate()

Question 33

The transition property is shorthand for which four CSS properties?

Answer 33

Transition is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

Question 34

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

Answer 34

Width , height

Question 35

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

Answer 35

content= viewport

Question 36

What is a breakpoint in responsive Web design?

Answer 36

The point at which a media query is introduced
- Ex: when we set the browser to a specific width, it will change to the respective CSS

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

It will resize according to the screen/device dimensions, whereas pixels will vary between devices