Things to remember CSS Flashcards
How to delay animations
transition-delay: 250ms;
How to deal with stuttered and glitched animations
will-change: transform;
Tells browser to use gpu and don’t detour through CPU
Most common Transitions and use
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 to write Text vertical?
writing-mode: vertical-lr; (left-right)
writing-mode: vertical-rl; (right-left)
What is the shorthand Flex?
flex: (grow) (shrink) (basis);
The different border styles
none, hidden
dotted ….. , dashed —– , solid _____
double , groove , ridge
inset, outset
How to shift elements?
transform: translate (X, Y);
transform: translateX() or translateY ()
Implement different rules for screen sizes with media querrys
@media only screen and (max-with: 400px) -> for mobile e.g.
What is the diffrence between <div> and <span></span>
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>
What is the short hand in CSS Grid to define rows, columns and areas all at one?
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 do items override there order of flow and go first in Grid?
row-positioned items are handled first, after which the Gtrid starts again from the top (instead continuing as usual).
item {
grid-row: 2;
}
How to change the placement of items in a Grid?
With order. Default is:
order: 0;
Higher numbers place it at the end, lower in front.
row-positioned items still have priority.
How to change the flow of the grid from rows to columns first?
grid-auto-flow: column;
How to fill in cells, Grid already skipped?
With
grid-auto-flow: dense;
(sparse is the default)
How to set up Grid Areas?
grid-template-areas: “. rocky rocky .”
“. . dunes .”
“. . dunes .”
“. . dunes .”;
Then on the item to place:
rocky {
grid-area: rocky;
What is implicit rows/columns default and how to change it?
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 do items in a grid cell behave when given height or width in %?
The % units are relative to the grid cell rather than the grid container
How to place items horizontally in a grid cell?
justify-items: ;
(start, center, end, stretch)
How to override justify-items in CSS Grid?
justify-self ;
How to place items vertically in a grid cell?
align-items: ;
(start, center, end, stretch)
How to arrange Columns in CSS Grid if there is more space available than needed?
With
justify-content: ;
(start, center, end, space-between, space-evenly, space-around, stretch[auto columns])
How to arrange rows in CSS Grid if there is more space available than needed?
With
align-content: ;
(start, center, end, space-between, space-evenly, space-around, stretch[auto rowsalign])
What is destructured Assignment?
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 does the shorthand grid-area work?
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.
Naming convention of classes in css?
.element-design
How can you use implicit rows/columns in the grid shorthand?
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.
What is the syntax for variables in CSS?
:root {
–name-xy: red;
}
div {
color: var(–name-xy);
}
How to import css components into the style.css
@import url(“components/avatar.css”);
How to prevent buttons to overflow because of text padding?
display: inline-block;
How to size images to an container?
object-fit: cover
What flexbox CSS property enables flex-items to be displayed in several lines rather than trying to fit all in one line?
It’s flex-wrap: wrap; (default value: no-wrap).
How do you center the text of a div with Bootstrap?
<div class="text-center"></div>
What are the three Bootstrap CSS classes you have to know to design a grid?
container
row
col
How do you inline items of a list with Bootstrap?
*<ul class="list-inline">
<li><i></i></li>
<li><i></i></li>
<li><i></i></li>
</ul>*
How do you make an image circular with Bootstrap?
<img></img>
How do you align text content to the right in a div with Bootstrap?
<div class="text-end"></div>
What are the key words associated to size screen in the Bootstrap grid?
> 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 do you turn an image into a thumbnail with Bootstrap?
<img></img>
What are the main use cases for a modal?
Bring a form to the user or deliver a confirmation message. Use with caution.
How do you create a centered div with the width of half the screen on any device?
*<div class="container">
<div>
<div>
Hello world!
</div>
</div>
</div>*
How do you round corners of an image with Bootstrap?
/img src=”example.png” class=”rounded”/
Which Bootstrap class make your form inputs look nicer (full-width, rounder edges, etc.)?
The form-control class
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?
flex: 1 «_space;Flexbasis;
min-width: fit-content;
How can you flip an image horizontally using CSS?
transform: scaleX(-1)
Which property is used to prevent user interaction with an element in CSS?
pointer-events: none;
What CSS property can be used to add smooth scrolling behavior to a webpage
scroll-behavior: smooth;
How do you create snapping effects in carousels or listings?
Use scroll-snap-type and scroll-snap-align
How do you apply a gradient to text?
background-clip: text and set color: transparent;
How can you make any element resizable by the user?
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;
How do you truncate text and add ellipses for overflow content?
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.
How can you create responsive Columns in CSS Grid?
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.
If you use it with a filter for the user you can use auto-fill. Than your cards stay in the same size.
When using auto-fit and mimax, in CSS Grid, how can you prevent overflow?
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));
How can you align a flex item to the right within a flex container?
Use margin-left: auto; on the flex item. This will push it to the right.
What does the :focus-visible pseudo-class do and how is it useful?
Styling for Inputsfields when focused.
input:focus-visible {
outline: 2px solid blue;
}
What is the :focus-within pseudo-class?
Styles parent elements when children receive focus.
form:focus-within {
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}
How does the @media (hover) feature work and why is it useful?
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;
}
}
How can accent-color and caret-color be used to style form elements?
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;
}
What is the difference between scroll-padding and scroll-margin, and when would you use each?
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.
What is scroll-snap and how is it used in CSS?
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;
}
How to prevent unwanted scrolling in nested elements?
With overscroll-behavior:
Example: Preventing a dialog’s scroll from affecting the main page scroll:
.dialog {
overscroll-behavior: contain;
}
How can CSS Columns be used to create responsive multi-column layouts?
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;
}
how can you improve text readability?
With
text-wrap: pretty;
Prevents orphans and widows in longer texts.
Example: Ensuring clean text flow in paragraphs.
p {
text-wrap: pretty;
}
What is the difference between filter: drop-shadow and box-shadow in CSS?
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);
}
How to applie visual effects like blur and brightness to elements behind?
With
backdrop-filter
Example: Blurring the background of a modal overlay for a glassmorphism effect.
.modal {
backdrop-filter: blur(10px);
}
How to target all functional links and ignore links without href?
Example: Styling all valid hyperlinks on a page.
:any-link {
color: blue;
}
How to style or hide elements based if they have content?
With the pseudo class :empty
Example: Hiding an empty list until items are added.
ul:empty {
display: none;
}
How to target the first or last child element in css?
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;
}
How can you customize list markers with CSS?
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;
}
What is the shorthand for positioning (top, right, bottom, left)?
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;
}
How do you define a container for container queries?
By using container-type: inline-size in the container element’s CSS.
Example of container query syntax?
@container (min-width: 45ch) { /* styles */ }
What enables transitions on discrete properties like display, which typically do not animate smoothly without this property?
transition-behavior: allow-discrete
Example syntax for a CSS transition on display and opacity?
.transition {
transition-property: display, opacity;
transition-duration: 1s;
transition-behavior: allow-discrete;
}
What is the advantage of using the starting-style property in CSS transitions?
It allows defining the initial state of an element for a smoother transition when animating from ‘display: none’.
What is the :nth-child pseudo-class used for?
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).
How does the :not() pseudo-class work in CSS?
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 */
}
Example of an attribute selector in CSS for catching links with # on it?
a[href=”#”] { color: red; } targets links with an href attribute value of #.
How to define a transformation that skews an element on the 2D plane.
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.
How to center an item with position: absolut?
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
What is a good formula to write responsive font-sizes in CSS?
font-size: calc(15px + 0.390625vw);
How do you declare a right-to-left language direction in HTML?
Use the dir=”rtl” attribute on the HTML element next to lang=xy.
What does text-align: start do in CSS?
Aligns text to the start of the inline axis, which adjusts based on the writing mode (e.g., left for LTR, right for RTL).
Example syntax for setting a border on the start of the inline axis?
border-inline-start: 5px solid red;
How does the float: inline-start property work?
It floats an element to the start of the inline axis, adapting to the text direction (e.g., left for LTR, right for RTL).
What is the benefit of using margin-inline in CSS?
It sets the margin on both the start and end of the inline axis, ensuring consistency across different writing modes.
How do you set an element’s width using logical properties?
Use inline-size for width and block-size for height.
What does the inset property do in CSS?
It is a shorthand for setting the top, right, bottom, and left offsets, adapting to the writing mode.
What does the universal selector (*) in CSS do?
The universal selector (*) targets all elements on the page, applying specified styles to every element without exception.
Why is it problematic to apply position: relative and z-index using the universal selector (*)?
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.
How can you prevent text lines to wrap, until they have to because of running out of space?
min-width: fit-content;
How can you style placeholder text in an input field with CSS?
input::placeholder {
color: #999;
font-style: italic;
}How do you center content both vertically and horizontally using CSS Grid?
body {
display: grid;
place-content: center;
}What is the focus-visible pseudo-class used for?
“focus-visible” applies styles to elements that are focused but only when using keyboard navigation, improving accessibility.
What is the purpose of the ‘box-sizing: border-box;’ property in CSS?
It includes padding and border in the element’s total width and height, making layout calculations easier and more predictable.
How do you implement form validation styles in CSS?
input:invalid {
border: 1px solid red;
}How do you use the ::after pseudo-element to create a shadow effect?
.element::after {
content: '';
position: absolute;
inset: 0;
background: inherit;
filter: blur(1rem);
z-index: -1;
}How do inline, inline-block and block elements differ in terms of layout?
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.
How can you add a funtion in sass that converts pixels into rem?
@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);
}
What is the core concept behind aspect ratio boxes in CSS?
Padding in percentages is based on the parent element’s width, including vertical padding like padding-top and padding-bottom.
How would you create a 3:2 aspect ratio box using CSS?
width: 100vw; padding-bottom: 66.67%;
How do you keep content inside an aspect ratio box when padding pushes everything down?
Use absolute positioning to position the content inside the box.
position: absolute; width: 100%; height: 100%;
How can you access data attributes in CSS?
.classXY {
content: attr(data-xy);
}
What allows you to dynamically update values or retrieve current values from an HTML element in JS?
data attributes:
let element = document.querySelector('.element');
element.dataset.score = 150; // Changes score to 150
How can you use the attribute selectors in CSS to change styles according to the data?
article[data-columns="3"] {
width: 400px;
}
article[data-columns="4"] {
width: 600px;
}
How can you change the bullet points of a list element into a SVG for example?
li::marker {
content: url("/images/marker.svg")
}What does the CSS box-sizing property control?
The box-sizing property allows you to control how the width and height of an element are calculated.
What is the default value of box-sizing in CSS?
content-box
How is the element’s width and height calculated when box-sizing is set to content-box?
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.
How does box-sizing: border-box affect element sizing?
The width and height include the content, padding, and border, keeping the specified dimensions.
What CSS reset applies box-sizing: border-box to all elements on a page?
The global CSS reset with the universal selector:
*,
*:before,
*:after {
box-sizing: border-box;
}
What are the advantages of using box-sizing: border-box?
It prevents the need to manually calculate padding and border in the width and height, simplifying layout management and avoiding unexpected size changes.
How can you create 4 columns in a grid that have the size of the content?
grid-template-columns: repeat(4, auto);
What are the two parts of the new display property syntax?
- 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).
How does the inline-block display differ from inline and block?
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.
What is the contents display value used for in CSS?
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.
Wie kann man ein Icon innerhalb eines <li> elements in der Höhe anpassen, um es an dem Text auszurichten?
Mit vertical-align.
z.B.:
vertical-align: text-top; vertical-align: middle; vertical-align: text-bottom;
Which pattern follows the transition shorthand?
<property> <duration> <timing-function> <delay>
How can you create a masonry layout with css?
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;
How can you affect sibling elements when hovering over one element?
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);
}
What are the six properties in CSS box-shadow and what is the writing order like?
{ offset-x offset-y blur-radius spread-radius color }
or
{ inset offset-x offset-y blur-radius spread-radius color }
What does CSS stand for?
Cascading Style Sheets
What are the three ways to style an HTML document using CSS?
- Inline-styling
- Internal stylesheet
- External stylesheet
What is the primary purpose of a stylesheet in web development?
To decorate the web page
How do CSS selectors function?
They create rules for the elements in the HTML document
How does CSS render on a web page?
It applies CSS to the document from the top to the bottom
What happens if a selector is repeated in the stylesheet?
The newest rule(s) overwrite the previous ones
Which styles have the highest importance in CSS?
- Inline styles
- The !important keyword
What are pseudo-elements in CSS?
Keywords added to a selector to style a specific part of the selected element
Examples include ::first-letter, ::first-line, and ::selection.
What is the purpose of the ::selection pseudo-element?
Styles the <p> tag when a user highlights text in that element
Example: p::selection { background-color: yellow; }.
What are pseudo-classes in CSS?
Keywords added to a selector to control styling when an element is in a particular state
They apply to both the document tree and the location’s history.
What does the button:hover pseudo-class do?
Changes the background color to blue and text color to white when the button is hovered over
Example: button:hover { background-color: blue; color: white; }.
What is the difference between pseudo-elements and pseudo-classes?
Pseudo-elements style specific parts of an element while pseudo-classes style a specific state of an element
Fill in the blank: Pseudo-classes apply to an element’s _______.
[specific state]
True or False: Pseudo-elements can be used to style an entire element.
False
Pseudo-elements are used to style specific parts, not the whole element.
List some examples of pseudo-classes.
- :hover
- :visited
- :active
Fill in the blank: The pseudo-element ___ styles the first letter of an element.
[::first-letter]
What does the a:visited pseudo-class do?
Styles visited links, typically changing their color
Example: a:visited { color: orange; }.
What does the a:hover pseudo-class do?
Changes the color of the link to yellow when hovered over
Example: a:hover { color: yellow; }.
What is the primary function of a preprocessor?
A preprocessor allows you to assign variables, create mixins, and use nested rules.
Name two examples of preprocessors.
- SASS
- LESS
What is one advantage of using a preprocessor?
It simplifies the coding process and allows CSS to be nested like HTML.
What must be done to use a preprocessor in a web project?
It needs to be compiled into a single CSS file.
Fill in the blank: Using a preprocessor cuts down on code reuse, assigns _______ to variables, and prevents unintended behavior.
[color schemes]
How does a preprocessor enhance code dynamicity?
By using variables.
True or False: If you need to change a font or color scheme, you must update it in every location in your code.
False
What is the benefit of declaring a color scheme as a variable in LESS or SASS?
You can change it in one spot instead of multiple locations.
What does the use of variables in a preprocessor help to prevent?
Unintended behavior in the code.
How does a preprocessor improve the readability of CSS?
By allowing nested rules.
What is the CSS Box Model?
The CSS Box Model is a layout model that consists of margin, padding, content, and border.
What does the margin in the CSS Box Model indicate?
The margin indicates how far away you want your boxes to be from each other. It’s the area outside the border.
What is padding in the context of the CSS Box Model?
Padding is the area in between the content and the border. More padding means more room between the content and the border.
Where does the border of a box lay in the CSS Box Model?
The border lays in between the padding and the margin. It frames padding and the content of the box.
What is the feature of the box in the CSS Box Model?
The feature of the box is the content. It’s what makes the box, a box.
What is the default value of the box-sizing property in CSS?
By default, the box-sizing property is content-box.
How can you change the box-sizing property for more control over box sizes?
Change your box-sizing property to border-box using the universal selector (*) at the top of your CSS.
How would you select every paragraph with a class name of about-me that is a child of a div?
div > .about-me {
color: red;
}How can you set seperating lines between columns in a multicolumn layout?
With
column-rule: 1px solid black;
You use it like border
What happens when you set column-width: 200px;?
The browser tries to create columns that are at least 200px wide and adjusts the number of columns accordingly. Remaining spcae will be distributed to the columns.
What does break-after: column; do?
It forces content to start in a new column after the selected element.
How does break-before: column; work?
It forces an element to start at the top of a new column.
What does break-inside: avoid; prevent?
It prevents an element from being split across multiple columns.
How can you make an element span across all columns?
Use column-span: all;
What happens if both column-count and column-width are set?
The browser prioritizes column-width, adjusting the number of columns to fit the available space.
How can you ensure text flows evenly in columns?
Use column-fill: balance; to distribute text evenly across columns.
