12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

</> CodeWithHarry Menu Login

CSS Cheatsheet
Haris Ali Khan

July 1, 2022 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.

https://www.codewithharry.com/blogpost/css-cheatsheet/ 1/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

Text-Align

text-align: justify;

Letter-Spacing

letter-spacing: .15em;

Text-Decoration

text-decoration: underline;

Word-Spacing

word-spacing: 0.25em;

Text-Transform

text-transform: uppercase;

Text-Indent

text-indent: 0.5cm;

Line-Height

line-height: normal;

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: url("Path");

Background-Position

https://www.codewithharry.com/blogpost/css-cheatsheet/ 2/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

background-position: right top;

Background-Size

background-size: cover;

Background-Repeat

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
https://www.codewithharry.com/blogpost/css-cheatsheet/ 3/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

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.

Float

float: none;

Clear

clear: both;

Display

display: block;

Height

height: fit-content;

Width

width: auto;

Margin

margin: top right bottom left;

Padding

padding: top right bottom left;

https://www.codewithharry.com/blogpost/css-cheatsheet/ 4/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

Overflow

overflow: hidden;

Visibility

visibility: visible;

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

Color

color: cornsilk;

Opacity

opacity: 4;

Register Now

200+ Top MNCs are now hiring. Register Now

Naukri.com Apply Now

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

Box-Align

box-align: start;

Box-Direction

box-direction: normal;

https://www.codewithharry.com/blogpost/css-cheatsheet/ 5/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

Box-Flex

box-flex: normal;

Box-Flex-Group

box-flex-group: 2;

Box-Orient

box-orient: inline;

Box-Pack

box-pack: justify;

Box-Sizing

box-sizing: margin-box;

max-width

max-width: 800px;

min-width

min-width: 500px;

max-height

max-height: 100px;

min-height

min-height: 80px;

Table

https://www.codewithharry.com/blogpost/css-cheatsheet/ 6/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

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: separate;

Empty-Cells

empty-cells: show;

Border-Spacing

border-spacing: 2px;

Table-Layout

table-layout: auto;

Caption-Side

caption-side: 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: 10;

Column-Gap

column-gap: 5px;

Column-rule-width

column-rule-width: medium;

Column-rule-style
https://www.codewithharry.com/blogpost/css-cheatsheet/ 7/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

column-rule-style: dotted ;

Column-rule-color

column-rule-color: black;

Column-width

column-width: 10px;

Column-span

column-span: all;

Register Now

200+ Top MNCs are now hiring. Register Now

Naukri.com Apply Now

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 8/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

Marker-offset

marker-offset: auto;

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;

https://www.codewithharry.com/blogpost/css-cheatsheet/ 9/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

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

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

Transition-delay

transition-delay: 20ms;

Register Now

200+ Top MNCs are now hiring. Register Now

Naukri.com Apply Now

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.

Parent Properties (flex container)

display

display: flex;

flex-direction

https://www.codewithharry.com/blogpost/css-cheatsheet/ 10/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

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: flex-start | flex-end | center | space-between | space-around | space-evenly |

align-items

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

align-content

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

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 11/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

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;

grid-template

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

column-gap

column-gap: <line-size>;

row-gap

https://www.codewithharry.com/blogpost/css-cheatsheet/ 12/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

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

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 13/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

place-content

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

grid-auto-columns

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

grid-auto-rows

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

grid-auto-flow

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

Register Now

Explore 5+ lakh openings. Register Now

Naukri.com Apply Now

Child Properties (Grid items)

grid-column-start

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

grid-column-end

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

grid-row-start

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 14/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

grid-row-end

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

grid-column shorthand

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

grid-row shorthand

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

grid-area

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

justify-self

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

align-self

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

place-self

place-self: center;

Download this Cheatsheet

https://www.codewithharry.com/blogpost/css-cheatsheet/ 15/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

Add a new comment

Type Your Comment

Post Comment

Comments (39)

mahtabansari7925_gm 2023-12-02

it helps's a lot❤️ harry bhai.

REPLY

muzzammil.y93 2023-12-01

Bhai....... mene aapka html ka bhi video dekha aur mujhe bohot fayda
hua and this is the next one, but aap is page ko zara correct kijiye, html
wale page ka bhi yhi masla hai. codes theek se appear nhi ho rahe.
NEED TO HAVE WORD WRAP.... justify ki commands theek se visible nahi
hain. na hi webpage pr aur na hi pdf me. html me bhi checkbox aur
label tags ke cmds ka yhi masla tha. Jazakllah

REPLY

ahmaram172777_gm 2023-11-18

Thank you so much bhai. That really helped a lot

REPLY

sv6771994_gm 2023-11-03

Thank you so much 😊❤️

REPLY

apurbadutta2099_gm 2023-10-19

Thank you its help me alot..❤️

REPLY

rushikeshgurav4025_gm 2023-10-12

Thanks harry bhai .. The Effort are priceless..

REPLY

https://www.codewithharry.com/blogpost/css-cheatsheet/ 16/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

sarikasatpute89 2023-10-10

where is download option? I am not able to download. would you plz

help me to download

REPLY

amarpalyadav121_gm 2023-10-04

Thank you 🙏 sir

REPLY

shubham.kumar2_te 2023-10-03

where is the cheatsheet of github ?

VIEW ALL REPLIES

REPLY

dileepkumar1376916_gm 2023-09-25

Thank you sir

REPLY

hamzalodhi2023_gm 2023-09-05

Good,Very nice

REPLY

atulbathe1010_gm 2023-08-30

Very nice

REPLY

hafizsufyan21217_gm 2023-07-19

I appreciate you bhai jan.... Salute hai apko... 🙋‍♂️

REPLY

seharafsheen786110_gm 2023-07-02

I am a housewife.Wanted to learn css but it looked difficult.Harry made it

easy to me in this age.Thank u harry beta.

REPLY

madhugangwar109_gm 2023-06-30

Thank you a lot Harry bhaiya for this useful Share 💫

https://www.codewithharry.com/blogpost/css-cheatsheet/ 17/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

REPLY

abdulroufshaik123_gm 2023-06-27

Thanks bhayaa❤️❤️

REPLY

rohit.msl85 2023-06-11

vary nice

REPLY

clashofbrothers786_gm 2023-05-06

Aaisa resource free me Dena is unimaginable Bhai Saab , hamari dua

hai ke appki ki saari secret Prayers accept hon

REPLY

rdshamim449_gm 2023-04-18

love you brother so much. I am very helpful for your content.

REPLY

ejaz80901_gm 2023-04-10

wow

REPLY

berlin131519_gm 2023-04-06

Such a great man

REPLY

rahul2002pro_gm 2023-03-28

thank-you harry bhai 💥💥

REPLY

tejasayarekar5_gm 2023-03-19

Thank-you so much Harry bhai..

REPLY

mahmadabutt 2023-01-12

Thank you

https://www.codewithharry.com/blogpost/css-cheatsheet/ 18/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

REPLY

applicationcomputer257_gm 2022-12-28

thanks harry bhai

VIEW ALL REPLIES

REPLY

vikramkumarthakur32_gm 2022-12-24

Hlo

REPLY

vikramkumarthakur32_gm 2022-12-22

Thank you bro

VIEW ALL REPLIES

REPLY

deekshasonal2000_gm 2022-12-01

Thank you sir this is really very helpful🤗

REPLY

sufiyanmogal04_gm 2022-10-27

Thanks harry bhai just completed your 3hr html code your explanation is
god lvl and now iam starting with css in one video and this css cheat
sheet is very helpful

VIEW ALL REPLIES

REPLY

ranjityadav08970_gm 2022-10-19

It's very helpful

REPLY

mehzee92_gm 2022-10-09

Really Great teacher in my life Love from Pakistan

REPLY

mayurrathod1176 2022-09-30

This is a amazing and helpfull cheat sheet for beginners. And i want to
meet you harry bro.

https://www.codewithharry.com/blogpost/css-cheatsheet/ 19/20
12/6/23, 4:53 PM CSS Cheatsheet | CodeWithHarry

REPLY

umar4100019_gm 2022-09-27

Thank You Harry Bhi

REPLY

kanavrana91_gm 2022-09-20

thanks bahi

REPLY

prabhakarojha70_gm 2022-09-16

Thanks big brother

REPLY

mdraza8297_gm 2022-09-09

Thanks sir for support us

REPLY

karanpal03040 2022-07-19

Thank You So Much Bhaiya..... Love You Infinity Bottom Of My Heart....!!!

REPLY

08ghoshnivedita 2022-07-18

I THINK YOU ARE THE BEST TEACHER OF PROHRAMMING THANK YOU

BROOOO

REPLY

nikhilsgond007_gm 2022-07-14

Thank you sir the cheatsheet is very helpful please add all value to the
property

VIEW ALL REPLIES

REPLY

CodeWithHarry Copyright © 2023 CodeWithHarry.com

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