CSS CHEATSHEET

By @webstrom_tech

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

font-family UI', Tahoma, Geneva, Verdana, sans-serif;

Font-Style

font-style:: italic;
font-style

Font-Variant

font-variant:: small-caps;
font-variant

Font-Weight

font-weight:: bold;
font-weight

Font-Size

font-size:: larger;
font-size

Font

font:: style variant weight size family;

font

Text
Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the document.

Text-Align

text-align:: justify;
text-align

Letter-Spacing

letter-spacing:: .15em;
letter-spacing

Text-Decoration

text-decoration:: underline;
text-decoration

Word-Spacing

word-spacing:: 0.25em;
word-spacing

Text-Transform

text-transform:: uppercase;
text-transform

Text-Indent

text-indent:: 0.5cm;
text-indent
 Line-Height

line-height:: normal;
line-height

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
background-image url(("Path"
"Path"));

Background-Position

background-position:: right top;

background-position

Background-Size

background-size:: cover;
background-size

Background-Repeat

background-repeat:: no-repeat;
background-repeat

Background-Attachment

background-attachment:: scroll;
background-attachment

Background-Color

background-color:: fuchsia;
background-color

Background

background:: color image repeat attachment position;

background

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

Border-Style

border-style:: solid;
border-style

Border-Color

border-color:: aqua;
border-color

Border-Radius

border-radius:: 15px;
border-radius

Border

border:: width style color;

border
 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;
float

Clear

clear:: both;
clear

Display

display:: block;
display

Height

height:: fit-content;
height

Width

width:: auto;
width

Margin

margin:: top right bottom left;

margin

Padding

padding:: top right bottom left;

padding

Overflow

overflow:: hidden;
overflow

Visibility

visibility:: visible;
visibility

Colors
With the help of the color property, one can give color to text, shape, or any other object.

Color

color:: cornsilk;
color

Opacity

opacity:: 4;
opacity

Template Layout
Specifies the visual look of the content inside a template

Box-Align
box-align:: start;
box-align

Box-Direction

box-direction:: normal;
box-direction

Box-Flex

box-flex:
box-flex: normal;

Box-Flex-Group

box-flex-group:: 2;
box-flex-group

Box-Orient

box-orient:: inline;
box-orient

Box-Pack

box-pack:: justify;
box-pack

Box-Sizing

box-sizing:: margin-box;
box-sizing

Max-Width

max-width:: 800px;
max-width

Min-Width

min-width:: 500px;
min-width

Max-Height

max-height:: 100px;
max-height

Min-Height

min-height:: 80px;
min-height

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;
border-collapse

Empty-Cells

empty-cells:: show;
empty-cells

Border-Spacing
border-spacing:: 2px;
border-spacing

Table-Layout

table-layout:: auto;
table-layout

Caption-Side

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

Column-Gap

column-gap:: 5px;
column-gap

Column-Rule-Width

column-rule-width:
column-rule-width: medium;

Column-Rule-Style

column-rule-style:: dotted;
column-rule-style

Column-Rule-Color

column-rule-color:: black;
column-rule-color

Column-Width

column-width:
column-width: 10px;

Column-Span

column-span:: all;
column-span

List & Markers

List and marker properties are used to customize lists in the document.

List-Style-Type

list-style-type:: square;
list-style-type

List-Style-Position

list-style-position:
list-style-position: 20px;

List-Style-Image

list-style-image:: url
list-style-image url((image.gif
image.gif));
 Marker-Offset

marker-offset:: auto;
marker-offset

Animations
CSS animations allow one to animate transitions or other media files on the web page.

Animation-Name

animation-name:: myanimation;
animation-name

Animation-Duration

animation-duration:: 10s;
animation-duration

Animation-Delay

animation-delay:: 5ms;
animation-delay

Animation-Iteration-Count

animation-iteration-count:: 3;
animation-iteration-count

Animation-Direction

animation-direction:: normal;
animation-direction

Animation-Play-State

animation-play-state:: running;
animation-play-state

Animation-Fill-Mode

animation-fill-mode:: both;
animation-fill-mode

Transitions
Transitions let you define the transition between two states of an element.

Transition-Property

transition-property:: none;
transition-property

Transition-Duration

transition-duration:: 2s;
transition-duration

Transition-Timing-Function

transition-timing-function:: ease-in-out;
transition-timing-function

Transition-Delay

transition-delay:: 20ms;
transition-delay

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

Flex-Direction

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

flex-direction

Flex-Wrap

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

Flex-Flow

flex-flow:: column wrap;

flex-flow

Justify-Content

justify-content:: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsa
justify-content

Align-Items

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

Align-Content

align-content:: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first base
align-content

Child Properties (Flex Items)

Order

order:: 5; /* default is 0 */
order

Flex-Grow

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

Flex-Shrink

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

Flex-Basis

flex-basis:: | auto; /* default auto */

flex-basis

Flex Shorthand

flex:: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex

Align-Self

align-self:: auto | flex-start | flex-end | center | baseline | stretch;

align-self
 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:
display: grid | inline-grid;

Grid-Template-Columns

grid-template-columns:: 12px 12px 12px;

grid-template-columns

Grid-Template-Rows

grid-template-rows:: 8px auto 12px;

grid-template-rows

Grid-Template

grid-template:: none | <grid-template-rows> / <grid-template-columns>

grid-template

Column-Gap

column-gap:: <line-size> ;
column-gap

Row-Gap

row-gap:: <line-size> ;
row-gap

Grid-Column-Gap

grid-column-gap:: <line-size> ;
grid-column-gap

Grid-Row-Gap

grid-row-gap:: <line-size> ;
grid-row-gap

Gap Shorthand

gap:: <grid-row-gap> <grid-column-gap> ;

gap

Grid-Gap Shorthand

grid-gap:: <grid-row-gap> <grid-column-gap> ;

grid-gap

Justify-Items

justify-items:: start | end | center | stretch;

justify-items

Align-Items

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

align-items

Place-Items
place-items:: center;
place-items

Justify-Content

justify-content:: start | end | center | stretch | space-around | space-between | space-evenly;

justify-content

Align-Content

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

Place-Content

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

place-content

Grid-Auto-Columns

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

grid-auto-columns

Grid-Auto-Rows

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

grid-auto-rows

Grid-Auto-Flow

grid-auto-flow:: row | column | row dense | column dense;

grid-auto-flow

Child Properties (Grid Items)

Grid-Column-Start

grid-column-start:: <number> | <name> | span <number> | span <name> | auto;

grid-column-start

Grid-Column-End

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

grid-column-end

Grid-Row-Start

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

grid-row-start

Grid-Row-End

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

grid-row-end

Grid-Column Shorthand

grid-column:: <start-line> / <end-line> | <start-line> / span <value> ;

grid-column

Grid-Row Shorthand

grid-row:: <start-line> / <end-line> | <start-line> / span <value> ;

grid-row

Grid-Area
grid-area:: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;
grid-area

Justify-Self

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

justify-self

Align-Self

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

Place-Self

place-self:: center;
place-self