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

a pseudo class is a keyword added to a selector that specifies a special state of the selected elements (pseudo classes are under the browser’s control)

Question 10

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

Answer 10

pseudo classes let you apply style to an element, makes it easier

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 is a boundary for content

Question 20

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

Answer 20

static (normal)

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

Box offset properties
Top or bottom and left or right

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

Question 28

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

Answer 28

the order that your CSS rules are written in your stylesheet
the styling provided last for an element is the styling that will take affect

Question 29

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 29

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 30

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

Answer 30

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 31

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

Answer 31

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 32

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

Answer 32

transition property
transition duration
transition timing function
transition delay

Question 33

CSS Transform:
What does the transform property do?

Answer 33

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

Question 34

CSS Transform:
Give four examples of CSS transform functions

Answer 34

rotate, scale, skew, translate

Question 35

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

Answer 35

color, width, min-width

Question 36

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

Answer 36

viewport

Question 37

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

Answer 37

points (boundaries) where a media query is introduced

Question 38

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 38

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

Question 39

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 39

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