Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

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
How would you add a gradient to text using CSS?
Add the following to the text element's styling: background-image: INSERT_GRADIENT; background-clip: text; color: transparent;
26
What is the name for a CSS property that is taken from a parent element?
Inherited property
27
How do you add an animation to a CSS property?
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
28
In CSS, what problem do clearfixes address?
Without one, when child elements are all floated, the parent element will go to 0px and disappear from the page
29
What is the syntax for a CSS clearfix?
``` .parent-element::after { content: ""; clear: both; display: table; } ```
30
How would you get two elements to populate side-by-side?
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;")
31
In CSS, what does "display: inline-block" do?
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)
32
What are the aspects of CSS called that you use to designate a change in style (i.e. color, font-size, etc)
CSS properties
33
What does hsl stand for as a CSS property?
Hue, Saturation and Lightness. | Syntax: hsl(240, 100%, 75%)
34
In CSS, what range of values exist for hue (think hsl)?
0-360
35
In CSS, what are hue numbers for red, green and blue?
Red: 0 Green: 120 Blue: 240
36
In CSS, what is a "declaration"?
The property-value pair (i.e. color: red;)
37
In CSS, what is a "rule"?
The selector and all of its declarations
38
In CSS shorthand, how would you declare 20px top and bottom margins and 30px on either side?
margin: 20px 30px;
39
In CSS shorthand, how would you declare 20px top margin, and 30px on either side, and 40px bottom margin?
margin: 20px 30px 40px;
40
What are the 3 properties it takes to create a border in CSS?
border-width border-color border-style
41
In CSS, what is the shorthand for borders?
Add the width, style and color in any order to the "border" property (i.e. border: 3px solid blue;)
42
Using CSS, how would you add a border to a single side of an element?
border-left, border-right, border-bottom, or border-top
43
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?
border-bottom-style: dotted; | border-bottom-color: yellow;
44
In the box model, what are the 4 parts of an element?
content, padding, margin, border
45
In CSS, what happens when you use a "margin-left: auto" declaration?
All available space fills in on the left margin
46
In CSS, how do you center an element?
margin: 0 auto;
47
In CSS, why does the body element have a default margin value?
It would prevent unstyled HTML text from touching the sides of the window, which ins't visually appealing
48
In CSS, how do you make an element span the entire width of the page, as opposed to the small space on each side?
body { margin: 0; }
49
How do you make a group of elements into a column-structure using flexbox?
In their parent element, declare "display: flex;"
50
In CSS, what happens to h1-h6 elements when you increase the default font-size of the body? ex: body { font-size: 21px; }
The headings increase in size; oftentimes, when changing the default body font-size, the headings' font-sizes are also changed
51
In CSS, how would you affect the text size and justification of all child elements?
.parent-class { text-align: ALIGNMENT-VALUE; font-size: FONT-VALUE; }
52
In CSS, what is the default margin above and below text-related elements?
The font-size of the element (unless it is an h1 element, where it's slightly smaller)
53
In CSS, what is meant by "collapsing margins"?
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
In CSS, how do you prevent a parent element's top margin from merging with their first child's top margin?
Add padding on the top for the parent element
55
Why should you turn off the margin-top default for typography elements?
The margins add extra space and reduce spacing consistency when typography elements are used within a container
56
What is the use case for a "span" element in CSS?
Targeted styling of inline text using a class
57
What are the different pseudo-class states that can be styled for links in CSS?
``` :link :visited :focus :hover :active ```
58
What is the "active" pseudo class in CSS?
On click, the active styling comes into effect
59
What is the "focus" pseudo class in CSS?
It represents the current element that is in "focus" (think of navigating a page with the keyboard and traversing interactive elements)
60
What is the syntax to apply the same style to two CSS selectors at once?
Both selectors separated by a comma a:link, .sample-class { color: hsl(20, 100%, 55%); }
61
In CSS, at minimum, what 4 pseudo classes should be styled for "link" elements?
:link :hover :active :focus
62
In CSS, what order should link pseudo classes be declared in?
``` :link :visited :focus :hover :active ```
63
What is considered best practice when you want to change the default size of your "p" elements?
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
What is inheritance in CSS?
"Child elements" of a parent inherit certain properties from that parent
65
How would you make a font bold using CSS?
font-weight: bold;
66
What should you use for testing the views of different machine types (i.e. iPhone X vs 24" computer screen)?
Emulators such as "Chrome Device Mode"
67
What is the most common use case for inline-block elements?
Creating inline "buttons"
68
What are inline-block elements?
Elements that are inline, but can be styled and treated as if they were a block element
69
When making non-form-related buttons in CSS, why must you style the "a" element and not its parent?
Padding around a parent element is unclickable, whereas padding in an "a" element provides the expected behavior
70
What is a good ratio for custom button padding?
1:2.5 vertical to horizontal. Ex: .button { padding: 20px 50px; }
71
What happens if you declare a class color of green, then afterwards style the element of that class with a color or blue?
It will remain green because of CSS specificity rules
72
In CSS, what is the syntax for compound selectors?
Both selector names separated by a space. Ex: selector-one selector-two { ... }
73
In CSS, why do you want to apply a lot of styling to the "body" element?
This applies all general rules to a central location for each element that can then be overwritten through specificity
74
What is the use case for compound selectors in CSS?
When you have multiple sections of a page that follow the same layout but require different styling
75
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?
.section-one .btn:hover, .section-one .btn:focus { ... }
76
How could you avoid using compound selectors in CSS?
Use very specific class names that allow you to more easily target your elements
77
Why are compound selectors generally avoided?
They can become too obfuscated as to what they're styling and cause specificity wars within the CSS
78
What's the best alternative to compound selectors for avoiding repetitive code?
Use multiple classes to style a more generic version (modifier class) with the common styling. Ex: Click me
79
What is a modifier class in CSS?
A generic class used to modify similar elements without rewriting code. Ex: "btn" vs. "small-submit-btn"
80
In CSS, why is it best practice to avoid colors in class names?
If the color scheme ever changes, you'd need to refactor much more CSS
81
What is the CSS property for changing the font?
font-family

Front-End Development (7 decks)

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