1/21/24, 12:53 AM 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
https://www.codewithharry.com/blogpost/css-cheatsheet/ 1/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 2/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 3/21
1/21/24, 12:53 AM 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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 4/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 5/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 6/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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;

https://www.codewithharry.com/blogpost/css-cheatsheet/ 7/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 8/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 9/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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-style-type

list-style-type: square;

https://www.codewithharry.com/blogpost/css-cheatsheet/ 10/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 11/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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;

https://www.codewithharry.com/blogpost/css-cheatsheet/ 12/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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

flex-direction

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

flex-wrap

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

flex-flow

https://www.codewithharry.com/blogpost/css-cheatsheet/ 13/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

flex-flow: column wrap;

justify-content

justify-content: flex-start | flex-end | center | space-between | spa

align-items

align-items: stretch | flex-start | flex-end | center | baseline | fi

align-content

align-content: flex-start | flex-end | center | space-between | space

Child Properties (flex items)

order: 5; /* default is 0 */

flex-grow

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

flex-shrink

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 14/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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 | stretc

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: 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/ 15/21
1/21/24, 12:53 AM 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>;

https://www.codewithharry.com/blogpost/css-cheatsheet/ 16/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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 | spac

align-content

align-content: start | end | center | stretch | space-around | space-

place-content

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

grid-auto-columns

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 17/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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: <number> | <name> | span <number> | span <name> |

grid-column-end

grid-column-end: <number> | <name> | span <number> | span <name> | au

grid-row-start

grid-row-start: <number> | <name> | span <number> | span <name> | aut

grid-row-end

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

grid-column shorthand

https://www.codewithharry.com/blogpost/css-cheatsheet/ 18/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

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> / <colum

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/ 19/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

Add a new comment

Type Your Comment

Post Comment

Comments (40)

ambataniket_gm 2024-01-02

it helps's a lot ❤️ harry bhai.

REPLY

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

https://www.codewithharry.com/blogpost/css-cheatsheet/ 20/21
1/21/24, 12:53 AM CSS Cheatsheet | CodeWithHarry

REPLY

sv6771994_gm 2023-11-03

Thank you so much 😊❤️

CodeWithHarry Copyright © 2024 CodeWithHarry.com

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