CSS

Question 1

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

Answer 1

Each new rule is called a rule set. A rule set consist of a selector, followed by a declaration. Inside a declaration, we have a property followed
by a value

Question 2

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

Answer 2

Class attributes are selected by starting with a . followed by a value. ie, .note selects all elements with class attribute that has a value of note

Question 3

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

Answer 3

We would type the element name as the selector

Question 4

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

Answer 4

ID attributes are selected by # followed by
their value. ie, #introduction targets elements whose id attributes has a value of introduction

Question 5

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

Answer 5

RGB values, hex codes, and color names

Question 6

What CSS properties make up the box model?

Answer 6

Content, padding, border, and margin makes up the
box model

Question 7

Which CSS property pushes boxes away from each other?

Answer 7

The margin pushes boxes away from each
other

Question 8

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

Answer 8

Padding adds space between a box’s content and its border

Question 9

What is a pseudo-class?

Answer 9

They are classes that allow changes in appearance for an element when a user
is interacting with them. They are :hover, :active, and :focus

Question 10

What are CSS pseudo-classes useful for?

Answer 10

They are useful for responding to user inputs and adding
effects due to user interaction

Question 11

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

Answer 11

Pixels, percentages (default web
browser is 16 px. This gives us a percentage of the default), em (this is allowing us to change the text
size based off of being relative to the parent class), rem

Question 12

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

Answer 12

font-family controls the font
used for the text inside an element

Question 13

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

Answer 13

The default flex-direction of a flex container is
row

Question 14

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

Answer 14

nowrap is default. This will insure all flex items will
be on one line

Question 15

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

Answer 15

this is because they are display block elements and takes up the whole space on a row

Question 16

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

Answer 16

Flex row is the default direction

Question 17

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

Answer 17

The default value is static

Question 18

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

Answer 18

This will not affect document
flow. However, This moves the an element from the position where it would normally be to any
direction without affecting the surrounding elements. It is like, taking up the same space it would
normally does, but visually it will be displaced

Question 19

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

Answer 19

It will be shifted
vertically/horizontally from it’s normal position

Question 20

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

Answer 20

The element with absolute
positioning is taken out of the normal flow. It will have no affect on the other elements in the flow

Question 21

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

Answer 21

The absolute
element will position to be the closest non-static ancesto

Question 22

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

Answer 22

We can use the containing element by giving it a position of non-static. This will give a boundary to their decedents. They
are used to be a container for their children

Question 23

What are the four box offset properties?

Answer 23

The four box offset properties are: top, bottom, left, and
right

Question 24

What are the four components of ”the Cascade”.

Answer 24

Source order, inheritance, specificity, and important

Question 25

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

Answer 25

he order in which the css appears in
the code

Question 26

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

Answer 26

They inherit the format

Question 27

List the three selector types in order of increasing specificity.

Answer 27

ID, Class, then Type

Question 28

Why is using !important considered bad practice?

Answer 28

This command will override all other declarations
associated. So, it may ruin the style elsewhere in a page

Question 29

What does the transform property do?

Answer 29

They allow us to modify something on a webpage

Question 30

Give four examples of CSS transform functions.

Answer 30

matrix, translate, scale, rotate, skew, and scale-
translate

Question 31

The transition property is shorthand for which four CSS properties?

Answer 31

It is a short hand for transition-property, transition-duration, transition-timing-function, and transition-delay.

Question 32

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

Answer 32

media height and width

Question 33

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

Answer 33

The viewport meta tag

Question 34

What is a breakpoint in responsive Web design?

Answer 34

Breakpoint is a “point” at which a website’s content
and design will adapt in a certain way in order to provide the best possible user experience

Question 35

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 35

Using percentages will allows us to be able to always adapt
properly to the device the page is being viewed on

Question 36

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 36

This is because the order in
which the rules are executed matter. Since the lower rule is being looked at later, that rule is the most
current one. This is called the source order of the cascade