Brainscape's Knowledge GenomeTM

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


See full index

My Front End Path > Things to remember CSS > Flashcards

Things to remember CSS Flashcards

1
Q

How to delay animations

A

transition-delay: 250ms;

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

How to deal with stuttered and glitched animations

A

will-change: transform;

Tells browser to use gpu and don’t detour through CPU

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

Most common Transitions and use

A

transition: ease-out; (for things entering the screen)

transition: ease-in; (for things exiting the screen)

transition: ease; (for general Animations without entering or exiting)

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

How to write Text vertical?

A

writing-mode: vertical-lr; (left-right)

writing-mode: vertical-rl; (right-left)

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

What is the shorthand Flex?

A

flex: (grow) (shrink) (basis);

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

The different border styles

A

none, hidden
dotted ….. , dashed —– , solid _____
double , groove , ridge
inset, outset

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

How to shift elements?

A

transform: translate (X, Y);
transform: translateX() or translateY ()

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

Implement different rules for screen sizes with media querrys

A

@media only screen and (max-with: 400px) -> for mobile e.g.

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

What is the diffrence between <div> and <span></span>

A

A <div> is a block-level element. A block-level element always starts on a new line. In a block layout, boxes are laid out one after the other, vertically, beginning at the top of a containing block.

While a <span> is a inline-level element, and layouted inline.</span>

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

What is the short hand in CSS Grid to define rows, columns and areas all at one?

A

grid-template: ;

It accepts rows, then a slsh then columns:

grid-template: 1fr
2fr
/ 2fr 1fr 2fr;

Putting each row on a new line helps resemble the layout.

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

How do items override there order of flow and go first in Grid?

A

row-positioned items are handled first, after which the Gtrid starts again from the top (instead continuing as usual).

item {
grid-row: 2;
}

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

How to change the placement of items in a Grid?

A

With order. Default is:
order: 0;
Higher numbers place it at the end, lower in front.

row-positioned items still have priority.

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

How to change the flow of the grid from rows to columns first?

A

grid-auto-flow: column;

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

How to fill in cells, Grid already skipped?

A

With

grid-auto-flow: dense;

(sparse is the default)

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

How to set up Grid Areas?

A

grid-template-areas: “. rocky rocky .”
“. . dunes .”
“. . dunes .”
“. . dunes .”;

Then on the item to place:
rocky {
grid-area: rocky;

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

What is implicit rows/columns default and how to change it?

A

By default addidtional created rows/coulmns have ‘auto’ as default. They collapse without content.

With
grid-auto-rows/columns: 100px (or 1fr etc.);
you can control the size of new ones.

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

How do items in a grid cell behave when given height or width in %?

A

The % units are relative to the grid cell rather than the grid container

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

How to place items horizontally in a grid cell?

A

justify-items: ;

(start, center, end, stretch)

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

How to override justify-items in CSS Grid?

A

justify-self ;

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

How to place items vertically in a grid cell?

A

align-items: ;

(start, center, end, stretch)

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

How to arrange Columns in CSS Grid if there is more space available than needed?

A

With
justify-content: ;
(start, center, end, space-between, space-evenly, space-around, stretch[auto columns])

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

How to arrange rows in CSS Grid if there is more space available than needed?

A

With
align-content: ;
(start, center, end, space-between, space-evenly, space-around, stretch[auto rowsalign])

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

What is destructured Assignment?

A

A way to pick out parts of an object or array to use it seperately.

const person = {name: ‘Alice’, age: 30, country: ‘USA’};

const {name,age} = person;

So the const declares name and age as values, which gets drafted from the person object.

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

How does the shorthand grid-area work?

A

It is short for grid-row/column start and end lines.

grid-area: 1 (row-start) / 1 (column-start) / 3 (row-end) / 3 (column-end);

it starts with the starting row line and goes clockwise from there.

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

Naming convention of classes in css?

A

.element-design

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

How can you use implicit rows/columns in the grid shorthand?

A

Witch auto-flow instead of fixed scales.

grid: auto-flow / auto-flow 10%;

There will be as many rows as content is there.
Same for columns. But they will all have 10% as size.

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

What is the syntax for variables in CSS?

A

:root {
–name-xy: red;
}

div {
color: var(–name-xy);
}

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

How to import css components into the style.css

A

@import url(“components/avatar.css”);

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

How to prevent buttons to overflow because of text padding?

A

display: inline-block;

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

How to size images to an container?

A

object-fit: cover

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

What flexbox CSS property enables flex-items to be displayed in several lines rather than trying to fit all in one line?

A

It’s flex-wrap: wrap; (default value: no-wrap).

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

How do you center the text of a div with Bootstrap?

A

<div class="text-center"></div>

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

What are the three Bootstrap CSS classes you have to know to design a grid?

A

container
row
col

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

How do you inline items of a list with Bootstrap?

A

*<ul class="list-inline">

<li><i></i></li>

<li><i></i></li>

<li><i></i></li>

</ul>*

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

How do you make an image circular with Bootstrap?

A

<img></img>

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

How do you align text content to the right in a div with Bootstrap?

A

<div class="text-end"></div>

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

What are the key words associated to size screen in the Bootstrap grid?

A

> col- (extra small) for smartphones
col-sm- (small) for tablets
col-md- (medium) for laptops
col-lg- (large) for desk screen
col-xl- (extra large) for screens >= 1200px
col-xxl- (extra extra large) for screens >= 1400px

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

How do you turn an image into a thumbnail with Bootstrap?

A

<img></img>

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

What are the main use cases for a modal?

A

Bring a form to the user or deliver a confirmation message. Use with caution.

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

How do you create a centered div with the width of half the screen on any device?

A

*<div class="container">

<div>
<div>
Hello world!
</div>
</div>

</div>*

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

How do you round corners of an image with Bootstrap?

A

/img src=”example.png” class=”rounded”/

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

Which Bootstrap class make your form inputs look nicer (full-width, rounder edges, etc.)?

A

The form-control class

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

You have two buttons with text in it. You want the buttons to have the same width, independent from the text and you want the text not to wrap rather than the buttons. What do you use?

A

flex: 1 &laquo_space;Flexbasis;
min-width: fit-content;

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

How can you flip an image horizontally using CSS?

A

transform: scaleX(-1)

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

Which property is used to prevent user interaction with an element in CSS?

A

pointer-events: none;

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

What CSS property can be used to add smooth scrolling behavior to a webpage

A

scroll-behavior: smooth;

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

How do you create snapping effects in carousels or listings?

A

Use scroll-snap-type and scroll-snap-align

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

How do you apply a gradient to text?

A

background-clip: text and set color: transparent;

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

How can you make any element resizable by the user?

A

Use resize: both; and overflow: auto;

The resize property in CSS allows you to make an element resizable by the user. This means that the user can click and drag the edges or corners of the element to change its size.

To make an element resizable, you also need to manage the overflow of the content inside the element. Setting overflow: auto;

50
Q

How do you truncate text and add ellipses for overflow content?

A

Use -webkit-line-clamp with -webkit-box-orient: vertical and overflow: hidden;

.element {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

In this example, the .element will display only 3 lines of text. If the text exceeds 3 lines, it will be truncated, and ellipses (…) will be added at the end of the visible text.

51
Q

How can you create responsive Columns in CSS Grid?

A

grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));

auto-fit lets grid figure ot how many columns fit, based on the minmax. In this case 300px is the minimum size and 1fr simply says how big there is space availabel.

52
Q

When using auto-fit and mimax, in CSS Grid, how can you prevent overflow?

A

With the min function inside. It gives to options like one 100% and chooses the biggest one that does not overflow:

grid-template-columns: repeat(auto-fit,minmax(min(300px, 100%), 1fr));

53
Q

How can you align a flex item to the right within a flex container?

A

Use margin-left: auto; on the flex item. This will push it to the right.

54
Q

What does the :focus-visible pseudo-class do and how is it useful?

A

Styling for Inputsfields when focused.

input:focus-visible {
outline: 2px solid blue;
}

55
Q

What is the :focus-within pseudo-class and when would you use it?

A

Styles parent elements when children receive focus.

form:focus-within {
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}

56
Q

How does the @media (hover) feature work and why is it useful?

A

It distinguishs if the device can hover (mouse) or not (touch).

/* Styles for devices that can hover */
@media (hover: hover) {
.button:hover {
background-color: blue;
color: white;
}
}

/* Styles for devices that cannot hover */
@media (hover: none) {
.button {
background-color: grey;
color: black;
}
}

57
Q

How can accent-color and caret-color be used to style form elements?

A

accent-color: Styles form elements like checkboxes and radio buttons.
caret-color: Sets the color of the text input caret.

input[type=”checkbox”], input[type=”radio”] {
accent-color: blue;
}
input {
caret-color: red;
}

58
Q

What is the difference between scroll-padding and scroll-margin, and when would you use each?

A

scroll-padding: Adds padding within the scroll container, useful for avoiding sticky headers.
scroll-margin: Adds margin around elements within the scroll container, useful for scroll snapping.

59
Q

What is scroll-snap and how is it used in CSS?

A

Creates smooth, intuitive scroll interfaces with scroll-snap-type and scroll-snap-align.
Example: Implementing a horizontal scroll gallery with snapping points.

css

.scroll-container {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
.scroll-item {
scroll-snap-align: start;
}

60
Q

How to prevent unwanted scrolling in nested elements?

A

With overscroll-behavior:

Example: Preventing a dialog’s scroll from affecting the main page scroll:

.dialog {
overscroll-behavior: contain;
}

61
Q

How can CSS Columns be used to create responsive multi-column layouts?

A

Uses column-count, column-width, and column-gap for responsive layouts.
Example: Splitting a long article into newspaper-style columns.

.article {
column-count: 3;
column-gap: 20px;
}

62
Q

how can you improve text readability?

A

With
text-wrap: pretty;

Prevents orphans and widows in longer texts.
Example: Ensuring clean text flow in paragraphs.

p {
text-wrap: pretty;
}

63
Q

What is the difference between filter: drop-shadow and box-shadow in CSS?

A

drop-shadow: Applies shadows to the shape of the element.
box-shadow: Applies shadows to the box of the element.

Example: Adding a shadow to a circular icon without extra space.

.icon {
filter: drop-shadow(2px 4px 6px black);
}

64
Q

How to applie visual effects like blur and brightness to elements behind?

A

With
backdrop-filter

Example: Blurring the background of a modal overlay for a glassmorphism effect.

.modal {
backdrop-filter: blur(10px);
}

65
Q

How to target all functional links and ignore links without href?

A

Example: Styling all valid hyperlinks on a page.

:any-link {
color: blue;
}

66
Q

How to style or hide elements based if they have content?

A

With the pseudo class :empty

Example: Hiding an empty list until items are added.

ul:empty {
display: none;
}

67
Q

How to target the first or last child element in css?

A

With :first-child, :last-child, :first-of-type, and :last-of-type pseudo-classes

Targets specific child elements within a parent.

Example: Removing the border from the last item in a navigation menu.

.menu-item:not(:last-child) {
border-bottom: 1px solid gray;
}

68
Q

How can you customize list markers with CSS?

A

Use list-style-type and @counter-style to change list markers.
Example: Using emojis as list markers in an unordered list.

@counter-style custom-counter {
system: cyclic; //cyles through the symbols
symbols: ‘🍎’ ‘🍊’ ‘🍋’ ‘🍉’ ‘🍇’ ‘🍓’;
suffix: ‘ ‘;
}

ul {
list-style-type: custom-counter;
}

69
Q

What is the shorthand for positioning (top, right, bottom, left)?

A

inset

Example: Centering an absolutely positioned element with inset: 0 and margin: auto.

.centered-element {
position: absolute;
inset: 0;
margin: auto;
width: 100px;
height: 100px;
}

70
Q

How do you define a container for container queries?

A

By using container-type: inline-size in the container element’s CSS.

71
Q

Example of container query syntax?

A

@container (min-width: 45ch) { /* styles */ }

72
Q

What enables transitions on discrete properties like display, which typically do not animate smoothly without this property?

A

transition-behavior: allow-discrete

73
Q

Example syntax for a CSS transition on display and opacity?

A

.transition {
transition-property: display, opacity;
transition-duration: 1s;
transition-behavior: allow-discrete;
}

74
Q

What is the advantage of using the starting-style property in CSS transitions?

A

It allows defining the initial state of an element for a smoother transition when animating from ‘display: none’.

75
Q

What is the :nth-child pseudo-class used for?

A

The :nth-child pseudo-class targets elements based on their position within a parent, using a pattern (e.g., :nth-child(2n) for every second element).

76
Q

How does the :not() pseudo-class work in CSS?

A

The :not() pseudo-class excludes elements that match a specified selector, allowing broad styling while excluding specific cases.

e.G:
/* Style all paragraphs to have a blue background, except those with the class “exclude” /
p:not(.exclude) {
background-color: #ADD8E6; / Light blue background /
color: #000000; / Black text */
}

77
Q

Example of an attribute selector in CSS for catching links with # on it?

A

a[href=”#”] { color: red; } targets links with an href attribute value of #.

78
Q

How to define a transformation that skews an element on the 2D plane.

A

skew(ax) or skew(ax, ay)

The skew() function is specified with either one or two values, which represent the amount of skewing to be applied in each direction.

79
Q

How to center an item with position: absolut?

A

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

80
Q

What is a good formula to write responsive font-sizes in CSS?

A

font-size: calc(15px + 0.390625vw);

81
Q

How do you declare a right-to-left language direction in HTML?

A

Use the dir=”rtl” attribute on the HTML element next to lang=xy.

82
Q

What does text-align: start do in CSS?

A

Aligns text to the start of the inline axis, which adjusts based on the writing mode (e.g., left for LTR, right for RTL).

83
Q

Example syntax for setting a border on the start of the inline axis?

A

border-inline-start: 5px solid red;

84
Q

How does the float: inline-start property work?

A

It floats an element to the start of the inline axis, adapting to the text direction (e.g., left for LTR, right for RTL).

85
Q

What is the benefit of using margin-inline in CSS?

A

It sets the margin on both the start and end of the inline axis, ensuring consistency across different writing modes.

86
Q

How do you set an element’s width using logical properties?

A

Use inline-size for width and block-size for height.

87
Q

What does the inset property do in CSS?

A

It is a shorthand for setting the top, right, bottom, and left offsets, adapting to the writing mode.

88
Q

What does the universal selector (*) in CSS do?

A

The universal selector (*) targets all elements on the page, applying specified styles to every element without exception.

89
Q

Why is it problematic to apply position: relative and z-index using the universal selector (*)?

A

Applying position: relative and z-index with the universal selector creates a new stacking context for every element, leading to unexpected layering and positioning issues.

90
Q

How can you prevent text lines to wrap, until they have to because of running out of space?

A

min-width: fit-content;

91
Q

How can you style placeholder text in an input field with CSS?

A 
input::placeholder {
  color: #999;
  font-style: italic;
}
92
Q

How do you center content both vertically and horizontally using CSS Grid?

A 
body {
  display: grid;
  place-content: center;
}
93
Q

What is the focus-visible pseudo-class used for?

A

“focus-visible” applies styles to elements that are focused but only when using keyboard navigation, improving accessibility.

94
Q

What is the purpose of the ‘box-sizing: border-box;’ property in CSS?

A

It includes padding and border in the element’s total width and height, making layout calculations easier and more predictable.

95
Q

How do you implement form validation styles in CSS?

A 
input:invalid {
  border: 1px solid red;
}
96
Q

How do you use the ::after pseudo-element to create a shadow effect?

A 
.element::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(1rem);
  z-index: -1;
}
97
Q

How do inline, inline-block and block elements differ in terms of layout?

A

display: inline let element sit next to each other, but padding is not respected and gets overflown (useage: span, a, strong tag)

display: inline-block let elements also sit next to each other, but the padding gets respected(buttons)

block elements are like inline-block, but force a line break(divs, h1s, p tags)

If you want elements to flow inline with the text, use inline. For elements that need to behave like inline but also have block-level properties, inline-block is the answer. And if you need to create distinct sections or containers, block is your strongman.

98
Q

How can you add a funtion in sass that converts pixels into rem?

A 
@function rem($pixel) {
    @if math.is-unitless($pixel) {
        @return math.div($pixel,16) + rem;
    } else {
        @error 'Dont\'t use units when using the rem() function; only numbers.';
    }
}

Than just use:

e.g.
p {
    font-size: rem(16);
}
99
Q

What is the core concept behind aspect ratio boxes in CSS?

A

Padding in percentages is based on the parent element’s width, including vertical padding like padding-top and padding-bottom.

100
Q

How would you create a 3:2 aspect ratio box using CSS?

A 
width: 100vw;
 padding-bottom: 66.67%;
101
Q

How do you keep content inside an aspect ratio box when padding pushes everything down?

A

Use absolute positioning to position the content inside the box.

position: absolute;
width: 100%;
height: 100%;
102
Q

How can you access data attributes in CSS?

A 
.classXY {
  content: attr(data-xy);
}
103
Q

What allows you to dynamically update values or retrieve current values from an HTML element in JS?

A

data attributes:

let element = document.querySelector('.element');
element.dataset.score = 150; // Changes score to 150
104
Q

How can you use the attribute selectors in CSS to change styles according to the data?

A 
article[data-columns="3"] {
  width: 400px;
}
article[data-columns="4"] {
  width: 600px;
}
105
Q

How can you change the bullet points of a list element into a SVG for example?

A 
li::marker {
  content: url("/images/marker.svg")
}
106
Q

What does the CSS box-sizing property control?

A

The box-sizing property allows you to control how the width and height of an element are calculated.

107
Q

What is the default value of box-sizing in CSS?

A

content-box

108
Q

How is the element’s width and height calculated when box-sizing is set to content-box?

A

The width and height are calculated based on the content inside the element, excluding padding and borders. Padding and border are added to the width and height, increasing the total element size.

109
Q

How does box-sizing: border-box affect element sizing?

A

The width and height include the content, padding, and border, keeping the specified dimensions.

110
Q

What CSS reset applies box-sizing: border-box to all elements on a page?

A

The global CSS reset with the universal selector:

*,
*:before,
*:after {
  box-sizing: border-box;
}
111
Q

What are the advantages of using box-sizing: border-box?

A

It prevents the need to manually calculate padding and border in the width and height, simplifying layout management and avoiding unexpected size changes.

112
Q

How can you create 4 columns in a grid that have the size of the content?

A 
grid-template-columns: repeat(4, auto);
113
Q

What are the two parts of the new display property syntax?

A
  • Display Outside: Defines the element’s own display type (e.g., block, inline).
  • Display Inside: Defines how its children are laid out (e.g., flex, grid).
114
Q

How does the inline-block display differ from inline and block?

A

inline-block allows an element to behave like inline but with added ability to apply dimensions (e.g., height, width) and box model styles like padding.

115
Q

What is the contents display value used for in CSS?

A

The contents value removes the element from the visual layout while preserving its children. It’s useful for grouping elements without affecting layout but should not be used for accessibility-critical elements like buttons.

116
Q

Wie kann man ein Icon innerhalb eines <li> elements in der Höhe anpassen, um es an dem Text auszurichten?

A

Mit vertical-align.

z.B.:

vertical-align: text-top;

vertical-align: middle;

vertical-align: text-bottom;
117
Q

Which pattern follows the transition shorthand?

A 
<property> <duration> <timing-function> <delay>
118
Q

How can you create a masonry layout with css?

A

With:

// Fixed minimum size for responsiveness
columns: 300px;

or

// Fixed number of columns
columns: 3;

or

// Fixed minimum size and max number of coulumns
columns: 300px 4;
119
Q

How can you affect sibling elements when hovering over one element?

A

With + and ~ (tilde)

//element before
.elemet:has(+ *:hover) {
   transform: scale(1.5);
}

//element
.elemet:hover {
   transform: scale(2);
}

//element before
.elemet:hover + * {
   transform: scale(1.5);
}
120
Q

What are the six properties in CSS box-shadow and what is the writing order like?

A 
{ offset-x    offset-y    blur-radius   spread-radius   color }

or

{ inset    offset-x    offset-y    blur-radius   spread-radius   color }

My Front End Path (8 decks)

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