CSS Cheatsheet

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

Font-Family

Font-Style

Font-Variant

Font-Weight

Font-Size
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet

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, ima
position, size, etc., of the document.

Background-Image

2 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet

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 docu

Border-Width

border-width: 5px;

Border-Style

border-style: solid;

Border-Color

border-color: aqua;

3 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet

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

4 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet

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

5 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet

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
spacing, table layout, caption, etc.

Border-Collapse

border-collapse: separate;

Empty-Cells

empty-cells: show;

Border-Spacing

border-spacing 2px

6 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet

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;

7 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet

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;

8 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet

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

9 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet

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 |

align-items

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

align-content

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

Child Properties (flex items)

order

order: 5; /* default is 0 */

flex-grow

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

10 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet

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

11 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet

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 |

align-content

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

place-content

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

12 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet

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

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

13 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet

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

place-self

place-self: center;

You need to be logged in to post a comment!

Comments
No comments to display. Be the first person to post a comment!

Copyright © 2020-2021 CodeWithHarry.com

14 of 14 23-07-2021, 08:41