CSS CheatSheet

CSS CheatSheet

This CSS Cheatsheet covers some of the fundamental CSS properties to get started in web development.

·

5 min read

Table of contents

CSS Properties

Font

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

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

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

Color

color: cornsilk;

Opacity

opacity: 4;

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;

Tables

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

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

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

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 - 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-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

align-items

align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;

align-content

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;

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

CSS Grid - 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

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;

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

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;

THANK YOU