23.02 CSS Cheatsheet

It’s normal to know what you are searching for, to know how to do something, but what was the naming again? That’s quite relatable, that’s why I am creating this cheat sheet. So that I am able to quickly find all things css.

Whole CSS reference on W3Schools Want the brother-in-law of this cheat sheet? (it’s the one about HTML)

Flexbox

To enable Flexbox, apply display: flex; to the container.

Flex-Properties

Property	Description	Values	Example	Applicable To
flex-direction	Direction of flex container items	row, row-reverse, column, column-reverse	flex-direction: column;	Container
justify-content	Aligns items along the main axis	space-between, flex-start, flex-end, center, space-around, space-evenly, initial, inherit	justify-content: space-between;	Container
flex-wrap	Controls if items should wrap to the next line/column	nowrap, wrap, wrap-reverse, initial, inherit	flex-wrap: wrap;	Container
align-content	Aligns items along the cross axis	stretch, center, flex-start, flex-end, space-between, space-around, space-evenly, initial, inherit	align-content: center;	Container
flex-basis	Initial length of a flexible item	number (2rem), auto, initial, inherit	flex-basis: 100px;	Child
flex-flow	Shorthand for flex-direction and flex-wrap	initial, inherit, flex-wrap values, flex-direction values	flex-flow: row-reverse wrap;	Container
flex-grow	Relative growth factor for flexible items	number (12), initial, inherit	div:nth-of-type(2) {flex-grow: 3;}	Child
flex-shrink	Relative shrink factor for flexible items	number (7), initial, inherit	div:nth-of-type(2) {flex-shrink: 3;}	Child

Other Properties

Property	Description	Values	Example
word-wrap	Allows breaking of long words	normal, break-word, initial, inherit	word-wrap: break-word;
word-spacing	Adjusts white space between words	normal, number (10vw), initial, inherit	word-spacing: 30px;
word-break	Controls how words break at the end of a line	normal, break-all, keep-all, break-word, initial, inherit	word-break: break-all;
user-select	Controls user selection	auto, none, text, all	user-select: none;
white-space	Handles white space inside an element	normal, nowrap, pre, pre-line, pre-wrap, initial, inherit	white-space: pre-line;

Additional Properties

Property	Description	Values	Example
margin	Sets the margin of an element	length, auto, initial, inherit	margin: 10px;
padding	Sets the padding of an element	length, auto, initial, inherit	padding: 20px;
border	Sets the border of an element	width, style, color, initial, inherit	border: 1px solid #000;
border-radius	Sets the border radius of an element	length, percentage, initial, inherit	border-radius: 10px;
background-color	Sets the background color of an element	color, transparent, initial, inherit	background-color: #f0f0f0;
color	Sets the text color of an element	color, transparent, initial, inherit	color: #333;
font-size	Sets the font size of text	length, percentage, initial, inherit	font-size: 16px;
font-weight	Sets the font weight of text	normal, bold, bolder, lighter, initial, inherit	font-weight: bold;
text-align	Aligns text within an element	left, right, center, justify, initial, inherit	text-align: center;
text-decoration	Adds decoration to text	underline, overline, line-through, none, initial, inherit	text-decoration: underline;
display	Sets the display behavior of an element	inline, block, flex, none, initial, inherit	display: inline-block;
position	Sets the positioning method of an element	static, relative, absolute, fixed, initial, inherit	position: relative;
z-index	Sets the stacking order of an element	number, auto, initial, inherit	z-index: 1;
box-shadow	Adds a shadow to an element	offset-x, offset-y, blur-radius, spread-radius, color, inset, initial, inherit	box-shadow: 5px 5px 10px #888888;
opacity	Sets the opacity level of an element	number (0-1), initial, inherit	opacity: 0.8;
transition	Sets the transition properties of an element	property, duration, timing-function, delay, initial, inherit	transition: background-color 0.3s ease;
transform	Applies a 2D or 3D transformation to an element	transform-function, initial, inherit	transform: translate(50px, 20px);
line-height	Sets the height of a line of text	number, normal, length, percentage, initial, inherit	line-height: 1.5;
letter-spacing	Adjusts the space between characters	normal, length, initial, inherit	letter-spacing: 2px;
text-transform	Controls the capitalization of text	none, capitalize, uppercase, lowercase, initial, inherit	text-transform: uppercase;
overflow	Specifies how content should behave when it’s larger than the box	visible, hidden, scroll, auto, initial, inherit	overflow: hidden;
cursor	Defines the type of cursor to be displayed	auto, default, pointer, text, move, initial, inherit	cursor: pointer;
list-style	Sets the style of the list marker	list-style-type, list-style-position, list-style-image, initial, inherit	list-style: square inside url("sqpurple.gif");
text-shadow	Adds a shadow to text	offset-x, offset-y, blur-radius, color, initial, inherit	text-shadow: 2px 2px 4px #888888;
box-sizing	Defines how the width and height of an element are calculated	content-box, border-box, initial, inherit	box-sizing: border-box;
object-fit	Specifies how an or	fill, contain, cover, none, scale-down, initial, inherit	object-fit: cover;
object-position	Specifies the alignment of an or	percentage, length, left, center, right, top, bottom, initial, inherit	object-position: center 20%;
outline	Sets the style of an element’s outline	outline-width, outline-style, outline-color, initial, inherit	outline: 2px solid #000;
outline-offset	Offsets the outline from the border	length, initial, inherit	outline-offset: 5px;
resize	Specifies whether an element is resizable	none, both, horizontal, vertical, initial, inherit	resize: both;
tab-size	Sets the number of spaces a tab character should display	number, initial, inherit	tab-size: 4;
appearance	Allows elements to be styled using platform-native styling based on the operating system’s theme	auto, none, initial, inherit	appearance: none;
clip-path	Clips an element to a basic shape or reference box	url(), inset(), circle(), ellipse(), polygon(), initial, inherit	clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
filter	Applies graphical effects like blur or color shift to an element	filter-function, initial, inherit	filter: blur(5px);
backface-visibility	Defines whether or not an element should be visible when not facing the screen	visible, hidden, initial, inherit	backface-visibility: hidden;

CSS Grid Cheat Sheet

Basics

To enable CSS Grid, apply display: grid; to the container.

Grid Properties

Property	Description	Values	Example	Applicable To
grid-template-columns	Defines the columns of the grid	length, percentage, auto, repeat(), initial, inherit	grid-template-columns: 100px 1fr 2fr;	Container
grid-template-rows	Defines the rows of the grid	length, percentage, auto, repeat(), initial, inherit	grid-template-rows: 50% auto;	Container
grid-template-areas	Defines named grid areas	none, identifier, initial, inherit	grid-template-areas: "header header" "main sidebar" "footer footer";	Container
grid-template	A shorthand for defining columns, rows, and areas	values for grid-template-columns, grid-template-rows, grid-template-areas	grid-template: "header header" 1fr / 1fr 2fr;	Container
grid-column-gap	Sets the size of the gap between columns	length, percentage, initial, inherit	grid-column-gap: 10px;	Container
grid-row-gap	Sets the size of the gap between rows	length, percentage, initial, inherit	grid-row-gap: 20px;	Container
grid-gap	A shorthand for defining column and row gaps	values for grid-column-gap, grid-row-gap	grid-gap: 10px 20px;	Container
grid-auto-columns	Sets the size of implicitly created columns	length, percentage, auto, initial, inherit	grid-auto-columns: 100px;	Container
grid-auto-rows	Sets the size of implicitly created rows	length, percentage, auto, initial, inherit	grid-auto-rows: minmax(100px, auto);	Container
grid-auto-flow	Controls how auto-placed items are inserted in the grid	row, column, dense, initial, inherit	grid-auto-flow: dense;	Container

Positioning Items

Property	Description	Values	Example	Applicable To
grid-area	Assigns a grid item to a named grid area	name, row-start / column-start / row-end / column-end, initial, inherit	grid-area: header;	Child
grid-column	Specifies where a grid item should be placed on the grid	start / end, span, initial, inherit	grid-column: 2 / span 3;	Child
grid-row	Specifies where a grid item should be placed on the grid	start / end, span, initial, inherit	grid-row: 1 / span 2;	Child

Alignment and Justification

Property	Description	Values	Example	Applicable To
justify-items	Aligns grid items along the inline axis	start, end, center, stretch, initial, inherit	justify-items: center;	Container
align-items	Aligns grid items along the block axis	start, end, center, stretch, initial, inherit	align-items: end;	Container
place-items	A shorthand for justify-items and align-items	values for justify-items and align-items	place-items: center start;	Container
justify-self	Aligns a grid item along the inline axis	start, end, center, stretch, initial, inherit	justify-self: end;	Child
align-self	Aligns a grid item along the block axis	start, end, center, stretch, initial, inherit	align-self: center;	Child
place-self	A shorthand for justify-self and align-self	values for justify-self and align-self	place-self: start end;	Child

CSS Animation Cheat Sheet

Basics of CSS Animations

To create animations in CSS, you need to use the @keyframes rule and the animation property.

1. @keyframes Rule

Defines the animation sequence. You can specify keyframes at various percentages of the animation duration.

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

2. animation Property

Applies the animation to an element, specifying the name, duration, timing function, delay, iteration count, and direction.

.element {
  animation: slide-in 1s ease-out 0.5s 1 forwards;
}

• slide-in: Name of the keyframes rule.
• 1s: Duration of the animation.
• ease-out: Timing function (e.g., ease, linear, ease-in-out).
• 0.5s: Delay before the animation starts.
• 1: Number of iterations (or ‘infinite’ for continuous).
• forwards: Animation should retain its final state.

Common Animation Properties

1. animation-name

Specifies the name of the @keyframes you want to use.

.element {
  animation-name: slide-in;
}

2. animation-duration

Sets the duration of the animation.

.element {
  animation-duration: 2s;
}

3. animation-timing-function

Defines the speed curve of the animation.

.element {
  animation-timing-function: ease-in-out;
}

4. animation-delay

Delays the start of the animation.

.element {
  animation-delay: 0.5s;
}

5. animation-iteration-count

Specifies the number of times an animation should run.

.element {
  animation-iteration-count: 3;
}

6. animation-direction

Defines whether an animation should play in reverse on alternate cycles.

.element {
  animation-direction: alternate;
}

7. animation-fill-mode

Specifies a style applied to an element when the animation is not playing.

.element {
  animation-fill-mode: forwards;
}

8. animation-play-state

Pauses or plays the animation.

.element {
  animation-play-state: paused;
}

Example Here’s a simple example combining these properties:

.element {
  animation: slide-in 1s ease-out 0.5s infinite alternate;
}

This will make the element slide in, taking 1 second, easing out, starting after a 0.5-second delay, repeating infinitely, and alternating direction on each cycle.

Feel free to customize these properties based on your specific animation needs!