Brainscape's Knowledge GenomeTM

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


See full index

CSS > Basics of CSS > Flashcards

Basics of CSS Flashcards

1
Q

What is a property in a CSS rule?

A

Properties are the attributes that you can specify values for.

Things like, height, color, text-transform.

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

What is a Selector in a CSS rule?

A

A selector is a descriptor that allows you to target specific elements on a page.

p, .className, #idName are selectors

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

What is a CSS declaration?

A

A declaration is a combination of a Property and a Value

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

What is a CSS rule?

A

AKA a Style, a Rule is a collection of Declarations targeting one or more Selectors:

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

What are we saying with the following rule:

@media (max-width: 300px){

body {color: grey;}

}

A

We are saying that between 0 and 300px of width, text color of the body should be grey.

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

How is min-width used in a Media Rule.

A

Min-width indicates that, from the declared width and above the rule should take effect.

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

@media (max-width: 300px)

Is the max-width here a CSS declaration?

A

No, in this case it is a “media feature”. Not all CSS elements can be used as a media feature and queried like this.

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

How do we typically use pseudo-classes in CSS.

What is the syntax of using a pseudo-class in a selector

A

We use pseudo-classes to affect a certain state of an element.

We use element:state as the selector

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

Name 4 pseudo-classes.

A
  1. :hover
  2. :focus
  3. :active
  4. :checked
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How are pseudo-elements used in CSS?

A

Pseudo-elements are used to target “sub-elements” of an element

For example (input::placeholder, ::before, ::after)

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

Why are pseudo-elements called pseudo-elements?

A

They are termed pseudo-elements because they target elements in the DOM that we have not created with HTML tags

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

What declaration is needed when using ::before or ::after

A

We need to use content: when using ::before and ::after

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

What is a “combinator” in CSS

A

A combinator is a character used to combine multiple selectors in a CSS rule (a whitespace, > or + are all examples of combinators)

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

What does the > combinator do in a CSS rule.

A

The > combinator is the Child combinator applies the rule only to the child or children of the leading element.

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

What does the + combinator do in a CSS rule.

A

The + is the Adjacent Sibling rule and selects the element immediately following the leading element. Sibling elements must have the same parent element

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

What is the descendant combinator in a CSS rule?

A

The Descendant combinator is a white-space between two elements and selects the second element of the rule when it has an ancestor of the first element of the rule.

(Parent, Grandparent, Great-grandparent)

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

How would you describe the :root selector and its use?

A

The :root selector is a pseudo-class selector that matches the root element of a tree representing the document.

It is identical to the html selector except it has a higher specificity.

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

How is the General Sibling Combinator Used?

What is its form?

A

The ~ is the general sibling combinator.

It is used to select all siblings of an element, regardless of whether they are adjacent or not.

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

What is the difference between selecting a child and selecting a sibling?

A

Siblings have the same parent but are on the same level (nested inside the parent)

Children are nested inside the parent.

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

How do em’s determine the size of the attribute they are assigned to?

A

em’s are cumulative, in that they base their size off the base size of their parent elements font-size.

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

How do rem’s determine the size of the attribute they are assigned to?

A

rem’s base their size on the html or :root font-size. It is not cumulative

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

What is the CSS cascade?

A

The cascade is the way CSS browsers resolve competing CSS declarations

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

What is the 1st Tier of the CSS Cascade?

A

The 1st Tier is type of declaration or rule we are looking at.

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

Name the four basic types of declarations and their priority in regards to the cascade?

A
  1. Transition - apply an active transition
  2. !important
  3. Animation - apply an active animation
  4. Normal - almost all other rules
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What is the 2nd Tier of the CSS cascade?

A

Origin - where the rule was defined

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

What are the Origin types for the cascade?

A
  1. Website - which devs control
  2. User - personal settings
  3. Browser - built-in styles

(Note - for !important 1 & 3 are swtiched)

27
Q

What is the 3rd Tier of the CSS Cascade?

A

Specificity - how specific a rule is

28
Q

What are the levels of Specificity regarding selectors in the CSS cascade?

A
  1. Inline style - most specific
  2. id (#)
  3. class (.), attribute, pseudo-class (pseudo-selector)
  4. type (tag-type), pseudo-element
29
Q

Do CSS combinators affect Specificity?

A

No, they have no effect on specificity.

30
Q

What is an attribute selector in CSS

A

A selector that matches based on the presence of value of a certain attribute [href],[title]

31
Q

Do the selectors specified inside the :not() pseudo-class affect specificity.

A

Yes, they do.

But the pseudo-class itself does not.

32
Q

Does the universal selector (*) affect specificity?

A

No, it does not.

33
Q

How are attribute selectors commonly used in CSS

A

They are used to select specific attributes of an HTML element (href link contents seem applicable)

34
Q

How is specificity determined on rules with multiple selectors?

A

The selectors are “added” to determine the overall specificity of a rule or style

35
Q

What is the 4th tier of the CSS cascade?

A

Order in the CSS document - rules defined later in the document “win” over earlier declarations

36
Q

Generally speaking, what are the two directions that CSS uses

A

Vertical direction - blocks

Horizontal direction - inline

37
Q

What is a more access philosophy when it comes to block direction and inline direction

A

Block direction - perpendicular to text

Inline direction - parallel to text

38
Q

What are logical properties in regards to the flow of CSS elements?
Give an example.

A

Logical Properties are an alternative to the cardinal direction idea of flow.

margin-block-start, margin-inline-end are two examples

39
Q

Describe four aspects of the box model in CSS layout.

A
  1. Content
  2. Padding
  3. Border
  4. Margin
40
Q

What is special about img elements

A

Image elements are considered replaced elements, in that they exist as a element outside the effects of CSS.

41
Q

What can we influence about a replaced element.

A

We can influence the way a containing box (wrapper) displays the replaced element, but not the contents of the replaced element itself.

42
Q

Give examples of replaced elements in CSS

A
  1. iframes
  2. images
  3. video
  4. embed

Others are treated as replaced elements only in certain conditions

43
Q

What is BEM in relation to CSS naming convention?

A

Block - Element - Modifier

  1. Block - a block of HTML that makes up a “component” like Card
  2. Element - an element of that block, a sub-component Card__image
  3. Modifier - something that modifies the original Block Card–light
44
Q

How do block level elements position themselves in the flow of a page.

A

Block elements stack, even if there is room to move beside another element.

45
Q

Should we use border or outline to help debug issues in CSS layout.

A

We should use outline because border can influence positioning of elements.

46
Q

What are anonymous boxes in CSS layout.

A

Anonymous boxes are boxes that surround elements that do not have a corresponding HTML element tag

Think loose text in a div, outside a

element

47
Q

How are anonymous boxes styled?

A

They inherit the style from their parent containing element, but cannot be directly styled themselves.

48
Q

Can anonymous boxes be styled?

A

Not directly, they can only inherit their style from the parental element.

49
Q

Can you set sizing options on inline elements (height, margin, etc).

A

No, you cannot set sizing options on inline elements.

50
Q

Where do we use inline-block elements?

A

We use inline-block elements when we have an inline element that we want to style with sizing declarations (links for example)

51
Q

What display declaration might we use with a link styled as a button?

A

We might use display: inline-block; so that we could add sizing styles to the link/button

52
Q

How do we create a locally scoped CSS variable?

A

We create a locally scoped CSS variable by defining the variable in a containing element. Every contained element will have access to that variable

53
Q

Do CSS custom properties need to be associated with a selector?

A

Yes, they need to be defined within a selector.

Typically we use :root

54
Q

How do we set a fallback value for a CSS variable?

A

by following the var value with a comma and the fallback value.

var(–primary-clr, yellow)

55
Q

How can we overlay a texture on a website but still make links and buttons accessible?

A

We can use:

pointer-events: none.

56
Q

What are attributes in regards to CSS elements?

A

attributes, such as ‘class’, ‘id’, ‘src’, or ‘link’, add functionality to our elements

57
Q

When beginning to write our style.css file, what might we consider doing first?

A

We might focus on the global styles first. Think about broad-reaching effects, on elements (not classes quite yet).

Consider striving for DRY code here. What font-families are shared, what colors, sizes, etc.

58
Q

What is the critical rendering path?

A

The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen.

59
Q

Why is the critical rendering path important to consider?

A

The critical rendering path influences how quickly our webpage can render on the client browser. Having a quick CRP prevents jank.

60
Q

What four aspects make up the CRP (Critical Rendering Path)?

A
  1. Document Object Model (DOM)
  2. CSS Object Model (CCSOM)
  3. Render Tree
  4. Layout
61
Q

What is a render tree?

A

A render tree is basically how a browser combines the DOM and the CSSOM to priorities rendering.

62
Q

What is a meta tag that we should include on all our projects to ensure that mobile sizes are rendered appropriately?

A
63
Q

What is the difference between the values: currentColor and inherit?

A

inherit as a value will only work with text color, currentColor as a value will work on other properties, such as border.

CSS (9 decks)

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