CSS

Question 1

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

Answer 1

CSS rule consist of a selector and a declaration block

Question 2

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

Answer 2

With .class name

Question 3

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

Answer 3

You write the name of the element as the selector

Question 4

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

Answer 4

With #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

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 pseudo-class is keywords that are added to a selector that specifies a special state of the selected elements

Question 10

What are CSS pseudo-classes useful for?

Answer 10

They are useful in applying style to an element without having to additional classes

Question 11

Name at least two units of type size in CSS

Answer 11

pixels, percentage, ems

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 - horizontal

Question 14

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

Answer 14

No wrap

Question 15

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

Answer 15

Static - Normal Flow

Question 16

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

Answer 16

You can shift element without affecting surrounding text and document flow

Question 17

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

Answer 17

It stays where it is unless you shift it

Question 18

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

Answer 18

t’s removed from the document flow

Question 19

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

Answer 19

Find the boundary and look for a non-static position. Appears nearest non-static parent

Question 20

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

Answer 20

Set up non-static position

Question 21

What are the four box offset properties?

Answer 21

Top, bottom, left, right

Question 22

What are the four components of “the Cascade”.

Answer 22

Source order, inheritance, specificity, !important

Question 23

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

Answer 23

Styling provided for an element last in your stylesheet gets priority

Question 24

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

Answer 24

Through inheritance if no CSS for that property is directly declared on the child element.

Question 25

List the three selector types in order of increasing specificity.

Answer 25

type, class, id

Question 26

Why is using !important considered bad practice?

Answer 26

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

Question 27

The transition property is shorthand for which four CSS properties?

Answer 27

shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay

Question 28

What event is fired when a user places their cursor in a form control?

Answer 28

focus

Question 29

What event is fired when a user's cursor leaves a form control?

Answer 29

blur

Question 30

what event is fired as a user changes the value of a form control?

Answer 30

input

Question 31

What event is fired when a user clicks the "submit" button within a ?

Answer 31

submit

Question 32

What does the event.preventDefault() method do?

Answer 32

prevents default actions

Question 33

What does submitting a form without event.preventDefault() do?

Answer 33

Automatically load the form values

Question 34

What property of a form element object contains all of the form's control?

Answer 34

elements property

Question 35

What property of form a control object gets and sets its value?

Answer 35

value property

Question 36

What is one risk of writing a lot of code without checking to see if it works so far?

Answer 36

It's hard to know where the error is

Question 37

What is an advantage of having your console open when writing a JavaScript program?

Answer 37

A

Question 38

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

Answer 38

max-width, min-width, height, grid, orientation, etc

Question 39

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

Answer 39

viewport

Question 40

What is a breakpoint in responsive Web design?

Answer 40

point where our styling can break or styling changes and where the media query is introduced

Question 41

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 41

with percentages the layout adapts to the exact dimensions of the viewport's width.

Question 42

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 42

the cascade system.