CSS Flashcards

1
Q

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

A

CSS rule set consists of:
A selector & declaration.
Inside declaration is a 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 with theirclassattribute?

A

Period & class value.

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

Just simply write their element name.

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 with itsidattribute?

A

Hashtag & 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

HEX codes, writing out the color names, & the RGB value.

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

Height & Width (from the content), padding, border, & margin.

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

A pseudo-class isa class applied by the browser that selects elements that are in a specific state.

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

Styling links, & responding to users by highlighting their current position.

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

Name two types of units that can be used to adjustfont-sizein CSS.

A

Pixel, em, rem & percent.

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 property.

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

What is the defaultflex-directionof aflexcontainer?

A

Left to right (row).

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

What is the defaultflex-wrapof aflexcontainer?

A

No wrap.

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

Because they are block elements, by default.

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

What is the defaultflex-directionof an element withdisplay: flex?

A

Left to right (row).

17
Q

What is thedefaultvalue for thepositionproperty of HTML elements?

A

The “static” position.

18
Q

How does settingposition: relativeon an element affect document flow?

A

Relative positioning moves an element in relation to where it would have been in the NORMAL FLOW (aka static).

19
Q

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

A

Same spot. Nothing changes.

20
Q

How does settingposition: absoluteon an element affect document flow?

A

It doesn’t affect the document flow at all. The idea of the value “absolute”, is that the box is taken out of normal flow and no longer affects the position of other elements on the page.

21
Q

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

A

Position absolute takes the document out of the document flow. This means that it no longer takes up any space like what static and relative does. When position absolute is used on an element, it is positioned absolutely with reference to the closest parent that has a position relative value.

22
Q

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

A

Change the position to fixed.

23
Q

What are the four box offset properties?

A

Top, bottom, left, right.

24
Q

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

A

CSS rule set consists of:
A selector & declaration.
Inside declaration is a property & value.

25
Q

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

A

CSS rule set consists of:
A selector & declaration.
Inside declaration is a property & value.

26
Q

What are the four components of “the Cascade”.

A

Source order, inheritance, specificity & the important rule.

27
Q

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

A

Property values sorted by ascending order value in which it goes from weakest to strongest value.

28
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

The inheritance feature.

29
Q

List the three selector types in order of increasing specificity.

A

Type, class & ID.

30
Q

Why is using!importantconsidered bad practice?

A

Using !important is bad practice & should be avoided because itmakes debugging more difficult by breaking the natural cascadingin your stylesheets.

31
Q

What does the transform property do?

A

The CSS transform property lets you rotate, scale, skew, or translate an element.

32
Q

Give four examples of CSS transform functions.

A

rotate, skew, scale, translate.

33
Q

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

A
Height = height of the viewport.
Width = Width of the viewport including the scrollbar.
34
Q

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

A

The viewport meta tag.

35
Q

The transition property is shorthand for which four CSS properties?

A

Transition-property: sets the CSS properties to which a transition effect should be applied.
Transition-duration: sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.
Transition-timing-function: sets how intermediate values are calculated for CSS properties being affected by a transition effect.
Transition-delay: specifies the duration to wait before starting a property’s transition effect when its value changes.

36
Q

What is abreakpointin responsive Web design?

A

A breakpoint is the“point” at which a website’s content and design will adapt in a certain wayin order to provide the best possible user experience. Instead of catering to every specific dimensions for every specific device, breakpoint caters to specific needs when every range is catered for.

37
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

Percentages are fluid. Pixels are fixed so therefore will cause complications when dealing with different layout sizes.

38
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

Because in CSS, the style sheets cascade by order of importance.
The key is do order each ruleset from smallest width to largest width.