Ali Ihsan Gunes

July 5, 2025 • 7 min read

CSS Cheat Sheet

CSS (Cascading Style Sheets) is a powerful stylesheet language used to define the visual style and layout of your web pages. It's packed with numerous features that can completely transform the look and feel of your website.

Font Properties

You can use font properties to change the appearance of your text.

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

Specifies the typeface of the text. If multiple fonts are listed, the browser uses the first available one.

font-style: italic;

Makes the text italic or normal.

font-variant: small-caps;

Can display text in small-caps.

font-weight: bold;

Sets the thickness of the text (bold, normal, light, etc.).

font-size: larger;

Determines the size of the text.

font: style variant weight size family;

Combines the above font properties into a single line.

Text Properties

These are used to manipulate text alignment, spacing, decoration, indentation, and more.

text-align: justify;

Sets the alignment of text (left, right, center, justify).

letter-spacing: .15em;

Adjusts the space between characters.

text-decoration: underline;

Adds decorations to text, such as underline, overline, or line-through.

word-spacing: 0.25em;

Adjusts the space between words.

text-transform: uppercase;

Transforms text to uppercase, lowercase, or capitalize the first letter of each word.

text-indent: 0.5cm;

Indents the first line of text.

line-height: normal;

Determines the height (spacing) between lines of text.

Background Properties

These are used to configure the background of your page or an element.

background-image: url("Path");

Adds a background image.

background-position: right top;

Sets the position of the background image.

background-size: cover;

Determines the size of the background image.

background-repeat: no-repeat;

Specifies how the background image repeats.

background-attachment: scroll;

Determines the scrolling behavior of the background image (fixed or scrollable).

background-color: fuchsia;

Sets the background color.

background: color image repeat attachment position;

Combines the above background properties into a single line.

Border Properties

These are used to add and style borders to elements.

border-width: 5px;

Determines the thickness of the border.

border-style: solid;

Specifies the style of the border (solid, dotted, dashed, etc.).

border-color: aqua;

Sets the color of the border.

border-radius: 15px;

Rounds the corners of the border.

border: width style color;

Combines the above border properties into a single line.

Box Model

Think of every HTML element as being wrapped by a box. This model is used to create the design and layout of web pages and consists of four main parts: margin (outer space), border, padding (inner space), and content.

float: none;

Shifts an element to the left or right, allowing text to wrap around it.

clear: both;

Clears the flow of floated elements.

display: block;

Determines how an element is displayed (block, inline, flex, grid, etc.).

height: fit-content;

Sets the height of the element.

width: auto;

Sets the width of the element.

margin: top right bottom left;

Sets the space outside the element's border.

padding: top right bottom left;

Sets the space between the element's content and its border.

overflow: hidden;

Determines what happens when an element's content exceeds its specified dimensions.

visibility: visible;

Determines the visibility of an element (visible or hidden).

max-width: 800px;

Sets the maximum width of the element.

min-width: 500px;

Sets the minimum width of the element.

max-height: 100px;

Sets the maximum height of the element.

min-height: 80px;

Sets the minimum height of the element.

Color Properties

Used to give color to text, shapes, or any other object.

color: cornsilk;

Sets the text color.

opacity: 0.4;

Sets the transparency of an element (a value from 0 to 1).

Animations

CSS animations allow you to animate transitions or other media files on your web page.

animation-name: myanimation;

Specifies the name of the animation to apply.

animation-duration: 10s;

Determines how long the animation will last.

animation-timing-function: ease;

Specifies the speed curve of the animation (ease, linear, ease-in, etc.).

animation-delay: 5ms;

Sets the delay before the animation starts.

animation-iteration-count: 3;

Determines how many times the animation will repeat.

animation-direction: normal;

Determines whether the animation plays forwards or backward each cycle.

animation-play-state: running;

Determines the playback state of the animation (running or paused).

animation-fill-mode: both;

Specifies what styles are applied to the element after the animation finishes or before it starts.

Transitions

Transitions let you define the smooth change between two states of an element.

transition-property: none;

Specifies which CSS property the transition should apply to.

transition-duration: 2s;

Determines how long the transition will last.

transition-timing-function: ease-in-out;

Specifies the speed curve of the transition (ease-in-out, linear, etc.).

transition-delay: 20ms;

Sets the delay before the transition starts.

CSS Flexbox

Flexbox is a one-dimensional layout model in CSS that allows you to easily align and distribute HTML elements. Items will "flex" to different sizes to fill the space, and it makes responsive design more manageable.

Properties for Parent Elements (Flex Container)

display: flex;

Defines an element as a flex container.

flex-direction: row | row-reverse | column | column-reverse;

Determines the direction in which flex items are placed along the main axis.

flex-wrap: nowrap | wrap | wrap-reverse;

Specifies whether flex items should fit in a single line or wrap onto multiple lines.

flex-flow: column wrap;

Combines flex-direction and flex-wrap properties.

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

Aligns flex items along the main axis.

align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;

Aligns flex items along the cross axis.

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;

Aligns lines of flex items when there's extra space in a multi-line flex container.

Properties for Child Elements (Flex Items)

order: 5; /* default is 0 */

Specifies the visual order of flex items.

flex-grow: 4; /* default 0 */

Determines how much a flex item will grow relative to the available space in the flex container.

flex-shrink: 3; /* default 1 */

Determines how much a flex item will shrink relative to the required space in the flex container.

flex-basis: | auto; /* default auto */

Sets the initial main size of a flex item before any available space is distributed.

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Combines, flex-grow flex-shrink and flex-basis properties.

Overrides the align-items property for a single flex item.

CSS Grid

Grid layout is a two-dimensional CSS grid system that makes it easier to create complex responsive web design layouts consistently across browsers.

Properties for Parent Elements (Grid Container)

display: grid | inline-grid;

Defines an element as a grid container.

grid-template-columns: 12px 12px 12px;

Defines the columns of the grid.

grid-template-rows: 8px auto 12px;

Defines the rows of the grid.

grid-template: none | / ;

Combines grid-template-rows and grid-template-columns properties.

column-gap: ;

Sets the space between columns.

row-gap: ;

Sets the space between rows.

grid-column-gap: ;

Specifies the gap between columns in a grid (older syntax for). column-gap

grid-row-gap: ;

Specifies the gap between rows in a grid (older syntax for). row-gap

gap: ;

Combines row-gap and column-gap properties.

grid-gap: ;

Equivalent to gap (older shorthand).

justify-items: start | end | center | stretch;

Aligns grid items horizontally within their cells.

align-items: start | end | center | stretch;

Aligns grid items vertically within their cells.

place-items: center;

Combines align-items and justify-items properties.

Aligns the entire grid horizontally.

Aligns the entire grid vertically.

place-content: / ;

Combines align-content and justify-content properties.

grid-auto-columns: ...;

Specifies the size of automatically created columns.

grid-auto-rows: ...;

Specifies the size of automatically created rows.

grid-auto-flow: row | column | row dense | column dense;

Determines the flow of auto-placed grid items.

Properties for Child Elements (Grid Items)

grid-column-start: | | span | span | auto;

Specifies the starting column line for a grid item.

grid-column-end: | | span | span | auto;

Specifies the ending column line for a grid item.

grid-row-start: | | span | span | auto;

Specifies the starting row line for a grid item.

grid-row-end: | | span | span | auto;

Specifies the ending row line for a grid item.

grid-column: / | / span ;

Combines grid-column-start and grid-column-end properties.

grid-row: / | / span ;

Combines grid-row-start and grid-row-end properties.

grid-area: | / / / ;

A shorthand for specifying the size and location of a grid item.

justify-self: start | end | center | stretch;

Aligns a single grid item horizontally within its cell.

align-self: start | end | center | stretch;

Aligns a single grid item vertically within its cell.

place-self: center;

Combines align-self and justify-self properties.

These CSS properties offer you endless flexibility in web design. You can create your own unique designs by experimenting and combining different properties. I hope this summary helps you get started quickly and confidently!

You can follow me on GitHub to see what I’m building, or reach out at aligunesv2@gmail.com.

If you’re interested in how I combine AI tools with real projects, follow me on Twitter: @aligunesimv

I’ll be sharing more soon! 🚀