CSS

Question 1

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

Answer 1

css declarations:
selector { declaration }
declaration consists of {property: value}

Question 2

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

Answer 2

.classname { }

Question 3

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

Answer 3

elementname { ]

Question 4

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

Answer 4

idname { }

Question 5

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

Answer 5

rgb values
ex: rgb (200, 200,200)

hex codes
ex: #ee3e80

colors names
ex: white

hsl
ex: hsl(hue, saturation, lightness)

Question 6

What CSS properties make up the box model?

Answer 6

• Content
• Padding: distance between inside content and border
• Border
• Margin: space between border and outside edge of the element

Question 7

Which CSS property pushes boxes away from each other?

Answer 7

margin

Question 8

What is a pseudo-class?

Answer 8

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

Question 9

What are CSS pseudo-classes useful for?

Answer 9

allows us to apply style to an element in relation to external factors, like the history of the navigator (:visited), the status of its content(:, or position of the mouse (:hover)

Question 10

What are CSS pseudo-classes useful for?

Answer 10

allows us to apply style to an element in relation to external factors, like the history of the navigator (:visited), the status of its content, or position of the mouse (:hover)

extended functionality

Question 11

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

Answer 11

px - pixels
% - percentages
em - width of a letter m

Question 12

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

Answer 12

font or font-family

Question 13

What are the four components of “the Cascade”.

Answer 13

source order
inheritance
specificity
important

Question 14

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

Answer 14

prioritizing the bottom properties, as styles.css is read from top to bottom

Question 15

Why is using !important considered bad practice?

Answer 15

you can end up in a weird place where everything is important, so nothing is important. it just gets too confusing

Question 16

List the three selector types in order of increasing specificity.

Answer 16

tag
class
id

Question 17

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

Answer 17

row

Question 18

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

Answer 18

nowrap

Question 19

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

Answer 19

because div elements are block elements

Question 20

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

Answer 20

row

Question 21

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

Answer 21

position static

normal flow - every block-level element appears on a new line

Question 22

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

Answer 22

does not affect the position of surrounding elements; they treat like it is where it would normally be

Question 23

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

Answer 23

moves an element from the position it would be in normal flow, shifting it to the top, right, bottom, or left of where it would have been placed

Question 24

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

Answer 24

it does not affect the position
of any surrounding elements (as they simply ignore the space it would have taken up)

will always cause other elements around it to move, since they no longer treat it like it exists

Question 25

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

Answer 25

it stays where you set it to and moves as users scroll up and down on a page.

Question 26

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

Answer 26

set the parent container to absolute: relative

or any non-static properties

Question 27

What are the four box offset properties?

Answer 27

top
bottom
left
right

Question 28

The transition property is shorthand for which four CSS properties?

Answer 28

transition-property: sets any CSS property (ex: background-color to which the effect is applied

transition-duration: how long it’ll take to complete transition // by default it’s 0, so always make sure to set something

transition-timing-function: speed of the function

transition-delay: how to long wait before a transition begins

Question 29

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

Answer 29

color
width
height

Question 30

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

Answer 30

super important. if you don’t use this, it will be using “virtual viewport” (old school)

Question 31

What is a breakpoint in responsive Web design?

Answer 31

points at which a media query is introduced (adjusting for changes in screen size)

mobile first responsive design - working with a smaller width first and adding @media as the screen grows larger (best practice)

Question 32

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 32

it will keep adjusting to the screen size as it changes

Question 33

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 33

source order - css rules are read from top to bottom, so last one will take priority