Brainscape's Knowledge GenomeTM

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


See full index

Quiz Questions > CSS > Flashcards

CSS Flashcards

1
Q

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

A

selector { property: value; }

the property-value pairs are called declarations

the curly braces and their contents are called the declaration block

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

elementName { … }

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 three different types of values you can use to specify colors in CSS.

A

RGB values, hex codes, color names

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

What is a pseudo-class?

A

A selector that selects for the state an element is in {ie. active, focus, hover, visited)

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

What are CSS pseudo-classes useful for?

A

Allow you to apply styles based on user events (like click, hover, visited link) and based on an element’s relation to other elements

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

What CSS properties make up the box model?

A

padding, border, margin

Content is also a part of the box model but it’s not a property.

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

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

A

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

What are the four components of “the CSS Cascade”.

A
  1. source order
  2. inheritance
  3. specificity
  4. !important
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

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

A

It is the order in which CSS rules appear in the stylesheet.

The rule that appears further down in the stylesheet is the one that applies.

17
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

Inheritance - elements can inherit CSS property values from their parents; some CSS properties are inherited by default, others can be inherited from the parent using the inherit keyword on the property of the child

18
Q

List the three selector types in order of increasing specificity.

A 
type selector -> class selector -> id selector   
least specific                                                    most specific
19
Q

Why is using !important considered bad practice?

A

The !important keyword has the highest specificity possible so it is near impossible to override a declaration with !important in it. This makes it difficult if you need to change styling afterwards.

Also using !important ‘breaks the cascade’ and this might affect other rules in unexpected ways.

20
Q

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

A

static

21
Q

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

A

Does not affect the position of surrounding elements/document flow.

22
Q

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

A

By itself position: relative doesn’t change an element’s position on the page. But it allows you the change the position of the element relative to its position in the normal document flow using the box offset properties.

23
Q

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

A

Removes element from document flow, meaning it no longer affect position of surrounding elements;

24
Q

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

A

Lets you offset it relative to the first non-static ancestry container using box offset properties.

25
Q

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

A

Set the position property of the containing element/block to relative.

26
Q

What are the four box offset properties?

A

Top, bottom, right, left

27
Q

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

A

Divs are block-level elements so they take up the entire width of their parent. A div following another div must start on a new line.

28
Q

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

A

row

29
Q

What does the transform property do?

A

Changes appearance of element by letting you rotate, scale, skew, or translate an it; changes how the element is rendered to the page

30
Q

Give four examples of CSS transform functions.

A
  1. translate 2. rotate 3. skew 4. transform…and others
31
Q

What are the four components of “the Cascade”.

A
  1. source order 2. inheritance 3. specificity 4. !important (a keyword)
32
Q

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

A

It is the order in which your css rules appear in the stylesheet.

33
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

Elements can inherit CSS property values from their parents;

some properties are inherited by default;
others can be inherited using the inherit keyword

34
Q

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

A
  1. aspect-ratio
  2. viewport width (incl. max-width, min-width) and height
  3. viewport orientation
  4. color
    . . . and others
35
Q

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

A

viewport meta tag; it lets you control layout on mobile browsers

36
Q

What is a breakpoint in responsive Web design?

A

Points at which a media query is introduced

37
Q

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?

A

Relative units give your layout the ability to dynamically adjust to changing screen/viewport size

38
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

Source order; CSS rules apply following their source order (the order they appear in the code)

Quiz Questions (9 decks)

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