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.
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
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
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;
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;
Template Layout
Specifies the visual look of the content inside a template
Box-Align
box-align: start;
Box-Direction
box-direction: normal;
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
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
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;
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
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.
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: flex-start | flex-end | center | space-betwe
align-items
align-items: stretch | flex-start | flex-end | center | basel
align-content
align-content: flex-start | flex-end | center | space-between
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
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-c
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-aroun
align-content
align-content: start | end | center | stretch | space-around
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;
Child Properties (Grid items)
grid-column-start
grid-column-start: <number> | <name> | span <number> | span <
grid-column-end
grid-column-end: <number> | <name> | span <number> | span <na
grid-row-start
grid-row-start: <number> | <name> | span <number> | span <nam
grid-row-end
</> CodeWithHarry Menu Login
grid-row-end: <number> | <name> | span <number> | span <name>
grid-column shorthand
grid-column: <start-line> / <end-line> | <start-line> / span
grid-row shorthand
grid-row: <start-line> / <end-line> | <start-line> / span <va
grid-area
grid-area: <name> | <row-start> / <column-start> / <row-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
Add a new comment
Type Your Comment
Post Comment
Comments (39)
mahtabansari7925_gm 2023-12-02
❤️ harry bhai.
it helps's a lot
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
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 💫
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
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.
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
CodeWithHarry Copyright © 2023 CodeWithHarry.com
