Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Dev > CSS > Flashcards

CSS Flashcards

1
Q

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

A

A ruleset has a selector and a declaration block

A declaration block consists of at least 1 declaration

A declaration is one property and one 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 their class attribute?

A

“.className”

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 state it

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 its id attribute?

A

“#elementId”

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

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

A
  • hexadecimals
  • colors
  • RGB
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
  • margin
  • border
  • padding
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What 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

Keyword added to CSS selectors to target elements under certain states

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

Helps with responding to users, making the page feel more interactive

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

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

A
  • px

- em

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 the element?

A

Font-family

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

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

A

Row, which means items will be arranged horizontally from left to right

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

No-wrap, which means all items will fit on one line

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

Row (left to right)

17
Q

What is the purpose of the “container” class in the layout class system?

A

Holds the rows and columns of the page layout. Generally contains ‘max-width’ and ‘margin’

18
Q

What is the purpose of the “row” class in the layout class system?

A

Sections off vertical chunks of content in the page

Row class contains display: flex

Contains column

19
Q

What is the purpose of the “column” class in the layout class system?

A

Sections off horizontal chunks of content in the page

Column class contains width value

Can contain rows (which could contain further columns)

20
Q

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

A

Position: static

21
Q

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

A

It doesn’t affect document flow

22
Q

How does position relative on an element affect where it appears on the page?

A

It doesn’t affect where it appears, but the element can be shifted from that position using ‘top’, ‘bottom’, ‘left’, ‘right’

23
Q

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

A

The element is taken out of the document flow and other elements act as if it wasn’t there

24
Q

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

A

Once the other elements are in place, the absolute element that was taken out of place is now relative to the first non-static parent

If there is no non-static parent, the element is positioned relative to its containing block

25
Q

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

A

Because absolutely positioned elements are positioned relative to the closest non-static parent, you would make the containing block non-static

26
Q

What are the 4 box offset properties?

A
  • top
  • bottom
  • left
  • right
27
Q

What are the 4 components of “the Cascade”.

A
  • Source order
  • Inheritance
  • Specificity
  • !important
28
Q

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

A

If an element has 2 competing CSS rules with the same level of specificity applied, the one that comes later in the stylesheet takes priority

29
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 are inherently inherited from parent elements if not speficied

30
Q

List 3 selector types in order of increasing specificity.

A

element < class < id

31
Q

Why is using !important considered bad practice?

A

It breaks the natural cascade which makes it difficult to debug issues.

32
Q

What does the transform property do?

A

It allows an element to be scaled, skewed, rotated, to transformed depending on what transform function is being used for the value

33
Q

Give 4 examples of CSS transform functions.

A
  • Rotate
  • TranslateY
  • TranslateX
  • Scale
34
Q

The ‘transition’ property is shorthand for which 4 CSS properties?

A
  • Transition property
  • Transition duration
  • Transition delay
  • Transition timing function
35
Q

Give 2 examples of media features that you can query in a @media rule.

A
  • Screen width (min width)

- Screen height

36
Q

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

A

Viewport meta tag

37
Q

What is a breakpoint in responsive Web design?

A

A breakpoint is a condition that, when met, will adjust the CSS of the page to be responsive to the device/conditions

38
Q

What is the advantage of using a percentage (ex- 50%) width instead of a fixed (ex- px) width for a column class in a responsive layout?

A

Using pixels could lead to inconsistent breakpoint across devices since not all devices operate on the same scaling rules. Percentages provide more consistency

39
Q

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?

A

The source order

Web Dev (8 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions