12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

</> CodeWithHarry Programming course Menu Login

CSS Cheatsheet
Haris Ali Khan

May 11, 2024 4 min read

Font
There are many properties related to the font, such as the face, weight, style, etc. These properties allow you to change
the style or complete look of your text.

Font-Family

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

Font-Style

font-style: italic;

Font-Variant

font-variant: small-caps;

Font-Weight

font-weight: bold;

Font-Size

font-size: larger;

Font

font: style variant weight size family;

Text
Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the document.

Text-Align

text-align: justify;

Letter-Spacing

letter-spacing: .15em;

https://www.codewithharry.com/blogpost/css-cheatsheet/ 1/14
12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

Text-Decoration

text-decoration:
text-decoration : underline
underline;
;

Word-Spacing

word-spacing:
word-spacing: 0.25em
0.25em;
;

Text-Transform

text-transform:
text-transform: uppercase
uppercase;
;

Text-Indent

text-indent:
text-indent : 0.5cm
0.5cm;
;

Line-Height

line-height:
line-height: normal;
normal;

India to Dubai

from India
from Rs16,999

View Now

Background
As the name suggests, these properties are related to background, i.e., you can change the color, image, position, size,
etc., of the document.

Background-Image

background-image:
background-image: url(
url("Path")
"Path");

Background-Position

background-position:
background-position : right top;
top;

Background-Size

background-size:
background-size : cover
cover;
;

Background-Repeat

https://www.codewithharry.com/blogpost/css-cheatsheet/ 2/14
12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

background-repeat: no-repeat;

Background-Attachment

background-attachment: scroll;

Background-Color

background-color: fuchsia;

Background

background: color image repeat attachment position;

Border
Border properties are used to change the style, radius, color, etc., of buttons or other items of the document.

Border-Width

border-width: 5px;

Border-Style

border-style: solid;

Border-Color

border-color: aqua;

Border-Radius

border-radius: 15px;

Border

border: width style color;

Box Model
In laymen's terms, the CSS box model is a container that wraps around every HTML element. It consists of margins,
borders, padding, and the actual content. It is used to create the design and layout of web pages. HTML5 e-books

Float

float: none;

Clear

https://www.codewithharry.com/blogpost/css-cheatsheet/ 3/14
12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

clear:
clear: both
both;;

Display

display:
display: block
block;
;

Height

height:
height: fit-content
fit-content;;

Width

width:
width: auto
auto;;

Margin

margin:
margin: top right bottom left;
left;

Padding

padding:
padding: top right bottom left;
left;

Overflow

overflow:
overflow: hidden
hidden;
;

Visibility

visibility:
visibility: visible
visible;
;

Colors
With the help of the color property, one can give color to text, shape, or any other object.

Color

color:
color: cornsilk
cornsilk;;

Opacity

opacity:
opacity: 4
4;
;

https://www.codewithharry.com/blogpost/css-cheatsheet/ 4/14
12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

Template Layout
Specifies the visual look of the content inside a template

Box-Align

box-align:
box-align: start
start;
;

Box-Direction

box-direction:
box-direction : normal
normal;;

Box-Flex

box-flex:
box-flex: normal;
normal;

Box-Flex-Group

box-flex-group:
box-flex-group: 2
2;
;

Box-Orient

box-orient:
box-orient: inline
inline;
;

Box-Pack

box-pack:
box-pack: justify
justify;;

Box-Sizing

box-sizing:
box-sizing: margin-box
margin-box;
;

max-width

max-width:
max-width: 800px
800px;
;

min-width

https://www.codewithharry.com/blogpost/css-cheatsheet/ 5/14
12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

min-width:
min-width: 500px
500px;
;

max-height

max-height:
max-height: 100px
100px;
;

min-height

min-height:
min-height: 80px
80px;
;

Table
Table properties are used to give style to the tables in the document. You can change many things like border spacing,
table layout, caption, etc.

Border-Collapse

border-collapse:
border-collapse : separate
separate;;

Empty-Cells

empty-cells:
empty-cells: show;
show;

Border-Spacing

border-spacing:
border-spacing: 2px
2px;
;

Table-Layout

table-layout:
table-layout: auto
auto;
;

Caption-Side

caption-side:
caption-side: bottom
bottom;
;

Columns
These properties are used explicitly with columns of the tables, and they are used to give the table an incredible look.

Column-Count

column-count:
column-count: 10
10;
;

Column-Gap

column-gap:
column-gap: 5px;
5px;

Column-rule-width

https://www.codewithharry.com/blogpost/css-cheatsheet/ 6/14
12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

column-rule-width: medium;

Column-rule-style

column-rule-style: dotted ;

Column-rule-color

column-rule-color: black;

Column-width

column-width: 10px;

Column-span

column-span: all;

List & Markers

List and marker properties are used to customize lists in the document.

List-style-type

list-style-type: square;

List-style-position

list-style-position: 20px;

List-style-image

list-style-image: url(image.gif);

Marker-offset

marker-offset: auto;

https://www.codewithharry.com/blogpost/css-cheatsheet/ 7/14
12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

Animations
CSS animations allow one to animate transitions or other media files on the web page.

Animation-name

animation-name: myanimation;

Animation-duration

animation-duration: 10s;

Animation-timing-function

animation-timing-function: ease;

Animation-delay

animation-delay: 5ms;

Animation-iteration-count

animation-iteration-count: 3;

Animation-direction

animation-direction: normal;

Animation-play-state

animation-play-state: running;

Animation-fill-mode

animation-fill-mode: both;

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

Transition-property

transition-property: none;

Transition-duration

transition-duration: 2s;

Transition-timing-function
https://www.codewithharry.com/blogpost/css-cheatsheet/ 8/14
12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

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

Transition-delay

transition-delay: 20ms;

CSS Flexbox
Flexbox is a layout of CSS that lets you format HTML easily. Flexbox makes it simple to align items vertically and
horizontally using rows and columns. Items will "flex" to different sizes to fill the space. And overall, it makes the
responsive design more manageable. HTML5 e-books

Parent Properties (flex container)

display

display: flex;

flex-direction

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

flex-wrap

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

flex-flow

flex-flow: column wrap;

justify-content

justify-content:
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | e

align-items

align-items:
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start

https://www.codewithharry.com/blogpost/css-cheatsheet/ 9/14
12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

align-content

align-content:
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | s

Child Properties (flex items)

order

order: 5; /* default is 0 */

flex-grow

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

flex-shrink

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

flex-basis

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

flex shorthand

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

align-self

align-self: auto | flex-start | flex-end | center | baseline | stretch;

CSS Grid
Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design layouts more easily
and consistently across browsers.

Parent Properties (Grid container)

display

display: grid | inline-grid;

grid-template-columns

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

grid-template-rows

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 10/14
12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

grid-template

grid-template: none | <grid-template-rows> / <grid-template-columns>;

column-gap

column-gap: <line-size>;

row-gap

row-gap: <line-size>;

grid-column-gap

grid-column-gap: <line-size>;

grid-row-gap

grid-row-gap: <line-size>;

gap shorthand

gap: <grid-row-gap> <grid-column-gap>;

grid-gap shorthand

grid-gap: <grid-row-gap> <grid-column-gap>;

justify-items

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

align-items

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

place-items

place-items: center;

justify-content

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

align-content

https://www.codewithharry.com/blogpost/css-cheatsheet/ 11/14
12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

align-content:
align-content : start | end | center | stretch | space-around | space-between | space-evenly;
space-evenly;

place-content

place-content:
place-content : <align-content> / <justify-content> ;

grid-auto-columns

grid-auto-columns:
grid-auto-columns : <track-size> ...;
...;

grid-auto-rows

grid-auto-rows:
grid-auto-rows: <track-size> ...;
...;

grid-auto-flow

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

Child Properties (Grid items)

grid-column-start

grid-column-start:
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
auto;

grid-column-end

grid-column-end:
grid-column-end : <number> | <name> | span <number> | span <name> | auto;
auto;

grid-row-start

grid-row-start:
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
auto;

grid-row-end

grid-row-end:
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
auto;

grid-column shorthand

https://www.codewithharry.com/blogpost/css-cheatsheet/ 12/14
12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

grid-column:
grid-column : <start-line> / <end-line> | <start-line> / span <value>;
<value>;

grid-row shorthand

grid-row:
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
<value>;

grid-area

grid-area:
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
<column-end>;

justify-self

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

align-self

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

place-self

place-self:
place-self: center
center;
;

Download this Cheatsheet

Add a new comment

Type Your Comment

Post Comment

Comments (64)

priyanshurao108_gm 2024-12-10

Thank you very much Bhaiya

REPLY

adilaaaw_gm 2024-11-26

Love 💗 from Pakistan

REPLY

https://www.codewithharry.com/blogpost/css-cheatsheet/ 13/14
12/25/24, 6:05 PM CSS Cheatsheet | CodeWithHarry

pansh6492_gm 2024-11-14

To assist the writing process, these Grammarly AI prompts were used:

Prompts I wrote - "Thank you Harry bhai for this cheetsheets and
amazing free web development course with handbooks" - "you are the
best in the world" - "god can make your best!"To assist the writing
process, these Grammarly AI prompts were used: Prompts I wrote -
"Thank you Harry bhai for this cheetsheets and amazing free web
development course with handbooks" - "you are the best in the world" -
"god can make your best!"

REPLY

kahkashaaftab1_gm 2024-11-12

Thank you ! bro you are the best.

REPLY

aasifkhaan222_gm 2024-11-07

Love you bro for your so much efforts❤

REPLY

This site uses Google AdSense ad intent links. AdSense automatically generates these links and they may help creators earn money.

CodeWithHarry Copyright © 2024 CodeWithHarry.com

https://www.codewithharry.com/blogpost/css-cheatsheet/ 14/14