Brainscape's Knowledge GenomeTM

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


See full index

Front-End Development > CSS > Flashcards

CSS Flashcards

1
Q

What are CSS margins?

A

Margins create space around elements, outside of any defined borders

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

How is clockwise notation used in CSS?

A

It is used to specify things like borders, margins and padding

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

What is clockwise notation in CSS?

A

It describes the order in which to apply styling of a particular attribute (top, right, bottom, left)

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

How would you move an element to the left of it’s container?

A 
#my-element{
    float: left;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What symbol identifies a class in CSS?

A

.

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

What symbol identifies an id in CSS?

A

#

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

What casing type is used within a style element?

A

kebab-case

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

How would you specify all elements of a certain type should appear beneath a “floated” element?

A

element{
clear: both;
}

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

What is the difference between inline and block in CSS?

A

Inline occurs within the “line-level” (i.e. within a sentence), whereas block represents its own HTML block

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

What is a CSS pseudo element?

A

A keyword added to a selector that lets you style a specific part of the selected element

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

What are CSS selectors?

A

The “name” given within a style element that designates the element(s) to be styled (i.e. p {})

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

How is pseudo element syntax different from pseudo class syntax within the style tag?

A

Pseudo elements are prefixed with two colons whereas pseudo classes use one (:: vs :)

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

Where are ::before and ::after pseudo elements positioned in respect to the parent element?

A

Within the parent element and before (or after) the content that the parent element contains

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

Can CSS images have pseudo elements?

A

No

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

In CSS, how would you create a strip above and below the content of an element without using additional elements?

A

Use ::before and ::after pseudo elements with a display:block attribute

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

How would you create a CSS selector for only h3 elements that have an attribute called heading-attribute

A

h3[heading-attribute] {}

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

Using purely CSS, how would you display the value of a custom HTML attribute within the element’s displayed content?

A 
#html-element {
    content: attr(custom-attr-name);
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

How would you remove text wrapping in an html element?

A 
#element {
    white-space: nowrap;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What do CSS transitions do?

A

Make the transitions between two different states of an element (i.e. increase width using :hover)

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

Using pure CSS, how would you create a CSS variable?

A

Within a parent element, use “–variable-name: variable-value;” syntax and then refer to the variable within the children’s styling (i.e. background: –variable-name)

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

What are all of the transition properties?

A 
transition,
transition-delay,
transition-duration,
transition-property,
transition-timing-function
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Why should you use milliseconds as opposed to fractions of a second for transition timing in CSS?

A

Both are effectively the same for CSS, but JavaScript only accepts milliseconds

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

What is the best CSS practice for defining multiple “transition-property” properties (i.e. a rotating and color-changing element)?

A

transition-property: property-one, property-two;

because the “all” value can be excessively CPU heavy

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

In CSS, what does the transition-timing-function property do?

A

Specifies how the transition will be timed (does it ease in or out?)

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

How would you add a gradient to text using CSS?

A

Add the following to the text element’s styling:

background-image: INSERT_GRADIENT;
background-clip: text;
color: transparent;

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

What is the name for a CSS property that is taken from a parent element?

A

Inherited property

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

How do you add an animation to a CSS property?

A

Create the animation using “@keyframes” followed by the animation name (a.k.a. keyframes selector) and add the “animation: ANIMATION_NAME” property to the element’s CSS

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

In CSS, what problem do clearfixes address?

A

Without one, when child elements are all floated, the parent element will go to 0px and disappear from the page

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

What is the syntax for a CSS clearfix?

A 
.parent-element::after {
    content: "";
    clear: both;
    display: table;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

How would you get two elements to populate side-by-side?

A

You can use floats, CSS grid, or flexbox - float likely has the best compatibility, but flex allows for better layouts (flex syntax is “display: flex;”)

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

In CSS, what does “display: inline-block” do?

A

It causes all of the content of the styled element to display inline (if it has multiple child elements or a list, they would display alongside one another)

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

What are the aspects of CSS called that you use to designate a change in style (i.e. color, font-size, etc)

A

CSS properties

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

What does hsl stand for as a CSS property?

A

Hue, Saturation and Lightness.

Syntax: hsl(240, 100%, 75%)

34
Q

In CSS, what range of values exist for hue (think hsl)?

A

0-360

35
Q

In CSS, what are hue numbers for red, green and blue?

A

Red: 0
Green: 120
Blue: 240

36
Q

In CSS, what is a “declaration”?

A

The property-value pair (i.e. color: red;)

37
Q

In CSS, what is a “rule”?

A

The selector and all of its declarations

38
Q

In CSS shorthand, how would you declare 20px top and bottom margins and 30px on either side?

A

margin: 20px 30px;

39
Q

In CSS shorthand, how would you declare 20px top margin, and 30px on either side, and 40px bottom margin?

A

margin: 20px 30px 40px;

40
Q

What are the 3 properties it takes to create a border in CSS?

A

border-width
border-color
border-style

41
Q

In CSS, what is the shorthand for borders?

A

Add the width, style and color in any order to the “border” property

(i.e. border: 3px solid blue;)

42
Q

Using CSS, how would you add a border to a single side of an element?

A

border-left, border-right, border-bottom, or border-top

43
Q

In CSS, if an element has a border using “border: 20px blue solid;”, how would you change the style/color of the bottom to dotted?

A

border-bottom-style: dotted;

border-bottom-color: yellow;

44
Q

In the box model, what are the 4 parts of an element?

A

content,
padding,
margin,
border

45
Q

In CSS, what happens when you use a “margin-left: auto” declaration?

A

All available space fills in on the left margin

46
Q

In CSS, how do you center an element?

A

margin: 0 auto;

47
Q

In CSS, why does the body element have a default margin value?

A

It would prevent unstyled HTML text from touching the sides of the window, which ins’t visually appealing

48
Q

In CSS, how do you make an element span the entire width of the page, as opposed to the small space on each side?

A

body {
margin: 0;
}

49
Q

How do you make a group of elements into a column-structure using flexbox?

A

In their parent element, declare “display: flex;”

50
Q

In CSS, what happens to h1-h6 elements when you increase the default font-size of the body? ex:

body {
font-size: 21px;
}

A

The headings increase in size; oftentimes, when changing the default body font-size, the headings’ font-sizes are also changed

51
Q

In CSS, how would you affect the text size and justification of all child elements?

A

.parent-class {
text-align: ALIGNMENT-VALUE;
font-size: FONT-VALUE;
}

52
Q

In CSS, what is the default margin above and below text-related elements?

A

The font-size of the element (unless it is an h1 element, where it’s slightly smaller)

53
Q

In CSS, what is meant by “collapsing margins”?

A

Margin values “collapse” into one another

If a top-element has a margin-bottom: 40px; and a bottom-element has a margin-top: 35px; - there will only be 40px between them, not 75

54
Q

In CSS, how do you prevent a parent element’s top margin from merging with their first child’s top margin?

A

Add padding on the top for the parent element

55
Q

Why should you turn off the margin-top default for typography elements?

A

The margins add extra space and reduce spacing consistency when typography elements are used within a container

56
Q

What is the use case for a “span” element in CSS?

A

Targeted styling of inline text using a class

57
Q

What are the different pseudo-class states that can be styled for links in CSS?

A 
\:link
\:visited
\:focus
\:hover
\:active
58
Q

What is the “active” pseudo class in CSS?

A

On click, the active styling comes into effect

59
Q

What is the “focus” pseudo class in CSS?

A

It represents the current element that is in “focus” (think of navigating a page with the keyboard and traversing interactive elements)

60
Q

What is the syntax to apply the same style to two CSS selectors at once?

A

Both selectors separated by a comma

a:link, .sample-class {
color: hsl(20, 100%, 55%);
}

61
Q

In CSS, at minimum, what 4 pseudo classes should be styled for “link” elements?

A

:link
:hover
:active
:focus

62
Q

In CSS, what order should link pseudo classes be declared in?

A 
\:link
\:visited
\:focus
\:hover
\:active
63
Q

What is considered best practice when you want to change the default size of your “p” elements?

A

Changing the font-size attribute of the body instead to also affect other elements (i.e. “a”) that aren’t within a “p” element

64
Q

What is inheritance in CSS?

A

“Child elements” of a parent inherit certain properties from that parent

65
Q

How would you make a font bold using CSS?

A

font-weight: bold;

66
Q

What should you use for testing the views of different machine types (i.e. iPhone X vs 24” computer screen)?

A

Emulators such as “Chrome Device Mode”

67
Q

What is the most common use case for inline-block elements?

A

Creating inline “buttons”

68
Q

What are inline-block elements?

A

Elements that are inline, but can be styled and treated as if they were a block element

69
Q

When making non-form-related buttons in CSS, why must you style the “a” element and not its parent?

A

Padding around a parent element is unclickable, whereas padding in an “a” element provides the expected behavior

70
Q

What is a good ratio for custom button padding?

A

1:2.5 vertical to horizontal. Ex:

.button {
padding: 20px 50px;
}

71
Q

What happens if you declare a class color of green, then afterwards style the element of that class with a color or blue?

A

It will remain green because of CSS specificity rules

72
Q

In CSS, what is the syntax for compound selectors?

A

Both selector names separated by a space. Ex:

selector-one selector-two {
…
}

73
Q

In CSS, why do you want to apply a lot of styling to the “body” element?

A

This applies all general rules to a central location for each element that can then be overwritten through specificity

74
Q

What is the use case for compound selectors in CSS?

A

When you have multiple sections of a page that follow the same layout but require different styling

75
Q

What is the syntax for a CSS selector that refers to a “btn” class in the “section-one” section for both the hover and focus styling?

A

.section-one .btn:hover, .section-one .btn:focus {
…
}

76
Q

How could you avoid using compound selectors in CSS?

A

Use very specific class names that allow you to more easily target your elements

77
Q

Why are compound selectors generally avoided?

A

They can become too obfuscated as to what they’re styling and cause specificity wars within the CSS

78
Q

What’s the best alternative to compound selectors for avoiding repetitive code?

A

Use multiple classes to style a more generic version (modifier class) with the common styling. Ex:

<a>Click me</a>

79
Q

What is a modifier class in CSS?

A

A generic class used to modify similar elements without rewriting code. Ex:

“btn” vs. “small-submit-btn”

80
Q

In CSS, why is it best practice to avoid colors in class names?

A

If the color scheme ever changes, you’d need to refactor much more CSS

81
Q

What is the CSS property for changing the font?

A

font-family

Front-End Development (7 decks)

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