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
