CSS Flashcards

1
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
2
Q

In CSS, how do you select elements by theirclassattribute?

A

.class-name

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

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

A

Name of the element

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

In CSS, how do you select an element by itsidattribute?

A

id-name

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

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

A
  • Rgba
  • Hex Codes
  • Color Names
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What CSS properties make up the box model?

A

Padding, Margin, Border

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

Which CSS property pushes boxes away from each other?

A

Margin

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

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

A

Padding

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

What is a pseudo-class?

A

Class applied to an element under a specific circumstance

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

What are CSS pseudo-classes useful for?

A

Applying styling based on user actions

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

Name at least two units of type size in CSS.

A

Pixels, percentages, em, rem

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
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
13
Q

What is the defaultflex-directionof aflexcontainer?

A

flex-direction: row;

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

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

A

nowrap;

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

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

A

Div elements are block elements

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

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

A

flex-start

17
Q

What is thedefaultvalue for thepositionproperty of HTML elements?

A

Static

18
Q

How does settingposition: relativeon an element affect document flow?

A

Doesn’t affect document flow. Relative keeps it in place. Then you can edit with position

19
Q

How does settingposition: relativeon an element affect where it appears on the page?

A

Doesn’t affect it initially. Afterwards, you can use position elements such as top, right, bottom left to push

20
Q

How does settingposition: absoluteon an element affect document flow?

A

Removes from the document flow of its parent container.

21
Q

How does settingposition: absoluteon an element affect where it appears on the page?

A

The beginning of the document flow, usually top left.

22
Q

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

A

Absolute positioned elements can get constrained to the edge of the next ancestor block.

23
Q

What are the four box offset properties?

A

Top, right, bottom, left

24
Q

What are the four components of “the Cascade”.

A

Source Order, Inheritance, Specificity, !important

25
Q

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

A

The order that your CSS rules are written in your stylesheet. Last ruleset will ultimately take affect.

26
Q

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

A

Some CSS properties get inherited. Most common are font colors and styles.

27
Q

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

A

1) Type Selectors and Pseudo-Elements
2) Class Selectors and Pseudo-Classes
3) ID Selectors

28
Q

Why is using!importantconsidered bad practice?

A

Overrides any other declaration. It is a bad practice because debugging becomes more difficult because it breaks the natural cascade of stylesheets.
-Also, the value goes at the end of property

29
Q

List the three selector types in order of increasing specificity.

A
  1. Type selector and pseudo-elements
  2. Class selectors and pseudo-classes
  3. ID selectors (most)
30
Q

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

A
  • width and height

- min-width is the most commonly used media feature

31
Q

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

A

viewport meta tag

32
Q

What is abreakpointin responsive Web design?

A

Point at which a websites content and design will change properties. Usually based on a viewport

33
Q

What is the advantage of using a percentage (e.g.50%)widthinstead of a fixed (e.g.px)widthfor a “column” class in a responsive layout?

A
  • % changes based on how the screen changes. Fixed values, are not as responsive.
  • % changes rely on the outside div container max-width.
34
Q

If you introduce CSS rules for a smallermin-widthafterthe styles for a largermin-widthin your style sheet, the CSS rules for thesmallermin-widthwill “win”. Why is that?

A

Cascading Styles. Source Order. Last ruleset will take place

35
Q

What does the transform property do?

A

Allows you to rotate, scale, sckew or translate an element. Modifies the coordinate space of the CSS visual formatting model.

36
Q

Give four examples of CSS transform functions.

A

translate(), scale, rotate, skew are most commonly used.