CSS Flashcards

(46 cards)

1
Q

body {
color: #090302;
font-family: sans-serif;
}

A
  1. CSS rule set
  2. body (selector) (CSS selector for the body element)
  3. opening curly brace for declaration block (block of declarations)
  4. color: #090302; (declaration)
  5. color (property)
  6. # 090302; (value)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

shorthand property

A

multiple values

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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

A

selector, declaration block, property, value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

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

A

.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

element name

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

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

A

#

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

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

A

rgb, hsl, hcv, color keywords

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

rgb (244,249,251)

A

css function rgb with arguments 244 249 251

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What CSS properties make up the box model?

A

It consists of: height, width, margins, borders, padding, and the actual content.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Which CSS property pushes boxes away from each other?

A

margin (puffy jacket, you’re same size)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

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

A

padding (weight you put on) (pee-pad)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is a pseudo-class?

A

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user’s pointer hovers over the button and this selected button can then be styled.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are CSS pseudo-classes useful for?

A

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

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

A

pixels, percentage, ems

preferred: rem

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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

A

font-family

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

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

A

row - horizontal

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

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

A

default flex-wrap: nowrap

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

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

A

block element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

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

A

row-horizontal

20
Q

What are the three primary components of a page layout? (Which helper classes do you need?)

A

container, column, row

21
Q

What is the minimum number of columns that you should put in a row?

22
Q

What is the purpose of a container?

A

boundary for content

23
Q

container class

A

only max-width: (800px) and margin: 0 auto;

24
Q

.column-full

A

always flex-basis: 100%

25
donkey and mario
calc(200% / 3)
26
What is the default value for the position property of HTML elements?
Normal flow (static) Every block-level element appears on a new line, causing each item to appear lower down the page than the previous one.
27
How does setting position: relative on an element affect document flow?
Relative Positioning (out of body experience) This 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. This does not affect the position of surrounding elements; they stay in the position they would be in in normal flow
28
How does setting position: relative on an element affect where it appears on the page?
This 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.
29
How does setting position: absolute on an element affect document flow?
Absolute positioning This positions the element in relation to its containing element. It is taken out of normal flow, meaning that it does not affect the position of any surrounding elements (as they simply ignore the space it would have taken up). Absolutely positioned elements move as users scroll up and down the page. The heading is positioned to the top right, and the paragraphs start at the top of the screen (as if the heading were not there).
30
How does setting position: absolute on an element affect where it appears on the page?
This positions the element in relation to its containing element. It is taken out of normal flow, meaning that it does not affect the position of any surrounding elements (as they simply ignore the space it would have taken up). (looks for a non static ancestor) (use only to layer something on top of another element)
31
How do you constrain an absolutely positioned element to a containing block?
Floating Elements Floating an element allows you to take that element out of normal flow and position it to the far left or right of a containing box. The floated element becomes a block-level element around which other content can flow
32
What are the four box offset properties?
offset properties (top or bottom and left or right)
33
.pokemon > img { }
img direct child of pokemon
34
Give two examples of media features that you can query in an @media rule.
min-width & orientation
35
Which HTML meta tag is used in mobile-responsive web pages?
36
What is a breakpoint in responsive Web design?
There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targeting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way.
37
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?
scaling
38
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?
source order
39
What are the four components of "the Cascade".
source order / inheritance /specificity / !important
40
What does the term "source order" mean with respect to CSS?
Source order is, simply put, the order that your CSS rules are written in your stylesheet. The styling provided for an element last(bottom) in your stylesheet is the styling that will ultimately take effect.
41
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance
42
List the three selector types in order of increasing specificity.
no value -> type -> class -> ID
43
Why is using !important considered bad practice?
When conflicting declarations from the same origin and cascade layer with the !important flag are applied to the same element, the declaration with a greater specificity is applied.
44
The transition property is shorthand for which four CSS properties?
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.
45
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element.
46
Give four examples of CSS transform functions.
matrix, perspective, scale, skew (translate/rotate most common)