CSS

Question 1

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

Answer 1

a selector and a declaration
(a declaration is made up of a property and property value)

Question 2

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

Answer 2

.nameOfClassAttribute

Question 3

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

Answer 3

just their name

Question 4

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

Answer 4

(pound)nameOfIdAttribute

Question 5

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

Answer 5

rgb values, hex code, color names

Question 6

CSS Box Model:
What CSS properties make up the box model?

Answer 6

margin, border, padding, and content (height/width)

Question 7

CSS Box Model:
What CSS property pushes boxes away from each other?

Answer 7

Margin

Question 8

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

Answer 8

Padding

Question 9

CSS Pseudo Class:
What is a pseudo-class?

Answer 9

it is a selector that selects elements that are in a specific state

Question 10

CSS Pseudo Class:
What are CSS pseudo-classes useful for?

Answer 10

pseudo classes let you apply style to an elements that are in a specific state

Question 11

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

Answer 11

pixels, rem

Question 12

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

Answer 12

font-family

Question 13

CSS Flexbox:
What is the default flex-direction of a flex container?

Answer 13

left to right

Question 14

CSS Flexbox:
What is the default flexwrap of a flex container?

Answer 14

nowrap, all on one line

Question 15

CSS Layout Classes:
Why do two div elements “vertically stack” on one another by default?

Answer 15

They vertically stack because they are block elements

Question 16

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

Answer 16

Row

Question 17

CSS Layout Classes:
What are the three primary components of a page layout? (which helper classes do you need?)

Answer 17

Containers. Rows. Columns.

Question 18

CSS Layout Classes:
What is the minimum number of columns that you should put in a row?

Answer 18

at least ONE

Question 19

CSS Layout Classes:
What is the purpose of a container?

Answer 19

It sets a boundary for the layout (content) by giving it a max-width

Question 20

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

Answer 20

static

Question 21

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

Answer 21

there is no affect to document flow

Question 22

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

Answer 22

it would move relative to where it exists in a static position

Question 23

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

Answer 23

it becomes removed from the document flow completely

Question 24

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

Answer 24

it’ll get positioned within the boundaries of its nearest non-static ancestor

Question 25

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

Answer 25

the container or parent has to be relative

Question 26

CSS Positioning:
What are the four box offset properties?

Answer 26

top/bottom/left/right

Question 27

CSS Cascade:
What are the four components of “the Cascade”?

Answer 27

source order, inheritance, specificity, and !important rule

Question 28

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

Answer 28

it means that the styling provided closer to the bottom of the file will take affect

Question 28

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

Answer 28

through Inheritance:
when certain css properties on a child element can receive value from a parent element if no css for that property is declared on the child element

Question 29

CSS Cascade:
List the three selector types in order of increasing specificity

Answer 29

Id 1-0-0 weight value (highest)
class 0-1-0 weight value
element type 0-0-1 weight value
no value (universal selector) (lowest)

Question 30

CSS Cascade:
Why is using !important considered bad practice?

Answer 30

-it overrides any other declaration within the same cascade layer and origin
-it reverses the cascade order of stylesheets
as long as you understand the cascade, you won’t need to use the !important flag

Question 31

CSS Transform:
What does the transform property do?

Answer 31

the transform property lets you modify an element (rotate, skew, scale, translate)

Question 32

CSS Transform:
Give four examples of CSS transform functions

Answer 32

rotate, scale, skew, translate

Question 33

CSS Transitions:
The transition property is shorthand for which four CSS properties?

Answer 33

transition property
transition duration
transition timing function
transition delay

Question 34

CSS Media Queries:
Give two examples of media features that you can query in an @media rule

Answer 34

min-width, max-width

Question 35

CSS Media Queries:
Which HTML meta tag is used in mobile-responsive web pages?

Answer 35

viewport

Question 36

CSS Responsive Layout:
What is a breakpoint in responsive Web design?

Answer 36

points (boundaries, size of view page) where a media query is introduced

Question 37

CSS Responsive Layout:
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed width (e.g. px) width for a ‘column’ class in a responsive layout?

Answer 37

the layout of the page will adjust (scale) according to the size of the screen or web page

Question 38

CSS Responsive Layout:
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 38

the smaller one will win, because the rules that are closer to the bottom are seen as a priority (source order)