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?

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;

30
Q

How to size images to an container?

A

object-fit: cover

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).

32
Q

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

A

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

33
Q

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

A

container
row
col

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>*

35
Q

How do you make an image circular with Bootstrap?

A

<img></img>

36
Q

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

A

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

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

38
Q

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

A

<img></img>

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.

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>*

41
Q

How do you round corners of an image with Bootstrap?

A

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

42
Q

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

A

The form-control class

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;

44
Q

How can you flip an image horizontally using CSS?

A

transform: scaleX(-1)

45
Q

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

A

pointer-events: none;

46
Q

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

A

scroll-behavior: smooth;

47
Q

How do you create snapping effects in carousels or listings?

A

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

48
Q

How do you apply a gradient to text?

A

background-clip: text and set color: transparent;

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 on their 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
A

My Front End Path (4 decks)

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