CSS Cheatsheet

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

Font-Style

font-style: italic | normal | oblique;
CSS

Font-Variant

font-variant: small-caps | normal;
CSS

Font-Weight

font-weight: normal | bold | bolder | lighter | number;
CSS

Font-Size

font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length;
CSS

Font

font: style variant weight size family;
CSS

Text

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

Text-Align

text-align: left | right | center | justify;
CSS

Letter-Spacing

letter-spacing: normal | length;
CSS

Text-Decoration

text-decoration: underline | none;
text-decoration-color: color;
text-decoration-line: none | underline | overline | line-through;
text-decoration-style: solid | double | dotted | dashed | wavy;
text-decoration-thickness: auto | from-font | length/percentage
CSS

Word-Spacing

word-spacing: normal | length;
CSS

Text-Transform

text-transform: none | capitalize | uppercase | lowercase;
CSS

Text-Indent

text-indent: length;
CSS

Line-Height

line-height: normal | number | length;
CSS

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");
CSS

Background-Position

background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;
background-position: x% y%;
background-position: xpos ypos;
CSS

Background-Size

background-size: auto | percentage | length | cover | contain;
CSS

Background-Repeat

background-repeat: repeat | repeat-x | repeat-y | no-repeat;
CSS

Background-Attachment

background-attachment: scroll | fixed | local;
CSS

Background-Color

background-color: color | transparent;
CSS

Background

background: color | image | size | repeat | origin | clip | attachment | position;
CSS

Border

Border properties are used to change the style, radius, color, etc., of buttons or other items of the document.

Border-Width

border-width: medium | thin | thick | length;
CSS

Border-Style

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
CSS

Border-Color

border-color: color | transparent;
CSS

Border-Radius

border-radius: length | percentage;
CSS

example

border-radius: 10px 20px 30px 40px;    /* top-left top-right bottom-right bottom-left */
border-radius: 10px 20px 30px;         /* top-left top-right & bottom-left bottom-right */
border-radius: 10px 20px;              /* top-left & bottom-right top-right & bottom-left */
border-radius: 10px;                   /* all four corners */
CSS

Border

border: width style color;
CSS

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 | left | right;
CSS

Clear

clear: none | left | right | both;
CSS

Display

display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none;
CSS

Height

height: auto | value | % | fit-content;
CSS

Width

width: auto | value | % | fit-content;
CSS

Margin

margin: length | auto | top-right-bottom-left;
CSS

Padding

padding: length | auto | top-right-bottom-left;
CSS

Overflow

overflow: visible | hidden | clip | scroll | auto;
CSS

Visibility

visibility: visible | hidden | collapse;
CSS

Colors

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

Color

color: color name | hex code | color code;
CSS

Opacity

opacity: number | 0.6;
CSS

Box-Shadow

When it comes to web design, CSS (Cascading Style Sheets) plays an indispensable role in enhancing the visual aesthetics of a website. Among its vast array of properties, the ones that help bring depth and focus to an element are the shadow and outline properties. Let’s delve into the magic of CSS shadows and outlines.

Box Shadows

box-shadow is a popular CSS property that enables designers to add shadow effects around an element's frame. It can be used to give any element, be it a div, image, or button, a 3D feel or to emphasize on hover.

box-shadow: none | h-offset v-offset blur spread color  | inset;
CSS

example

.div-element {
    box-shadow: 5px 5px 15px 5px #888888;
    <!-- h-offset v-offset blur spread color -->
}
CSS

Text Shadows

text-shadow is utilized to give shadows specifically to the text. 

text-shadow: h-offset v-offset blur color | none;
CSS

example

.text-element {
    text-shadow: 2px 2px 4px #888888;
}
CSS

Outlines

It's commonly used for accessibility purposes, like highlighting focused elements.

outline: width style color;
CSS

example

.button-element:focus {
    outline: 2px solid blue;
}
CSS

Template Layout

Specifies the visual look of the content inside a template

Box-Align

box-align: start | center | end | baseline | stretch ;
CSS

Box-Direction

box-direction: normal | reverse;
CSS

Box-Flex

box-flex: normal;
CSS

Box-Flex-Group

box-flex-group: 2;
CSS

Box-Orient

box-orient: inline | block | horizontal | vertical | inline-axis | block-axis;
CSS

Box-Pack

box-pack: start | center | end | justify;
CSS

Box-Sizing

box-sizing: border-box | content-box;
CSS

max-width

max-width: none | length;
CSS

min-width

min-width: none | length;
CSS

max-height

max-height: none | length;
CSS

min-height

min-height: none | length;
CSS

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

Empty-Cells

empty-cells: show | hide;
CSS

Border-Spacing

border-spacing: langth;
CSS

Table-Layout

table-layout: auto | fixed;
CSS

Caption-Side

caption-side: top | bottom;
CSS

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: number | auto;
column-count: 12px;
CSS

Column-Gap

column-gap: normal | length;
column-gap: 10px;
CSS

Column-Rule-Width

column-rule-width: medium | thin | thick | length;
CSS

Column-Rule-Style

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ;
CSS

Column-Rule-Color

column-rule-color: color;
CSS

Column-Width

column-width: auto | length;
CSS

Column-Span

column-span: all | none;
CSS

List & Markers

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

List-style-type

list-style-type: none | disc | square | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-greek | upper-latin | upper-roman;
CSS

List-style-position

list-style-position: 20px | inside | outside;
CSS

List-style-image

list-style-image: url(image.gif);
list-style-image: none;
CSS

Marker-offset

marker-offset: auto | length;
CSS

Animations

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

Animation-name

animation-name: keyframename | none;
animation-name: myanimation;
<!-- Multiple animations -->
animation-name: test1, animation4;
CSS

Animation-duration

animation-duration: time;
animation-duration: 0.2s;
animation-duration: 10s;
CSS

Animation-timing-function

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n);
CSS

Animation-delay

animation-delay: time;
animation-delay: 5ms;
CSS

Animation-iteration-count

animation-iteration-count: number;
animation-iteration-count: 3;
CSS

Animation-direction

animation-direction: normal | reverse | alternate | alternate-reverse;
CSS

Animation-play-state

animation-play-state: paused | running;
CSS

Animation-fill-mode

animation-fill-mode: none | forwards | backwards | both;
CSS

Animation Shorthand

animation: duration | timing-function | delay | iteration-count | direction | fill-mode;

animation: slideAnime 2s ease-in-out 3s 1, extraAnime 3s ease-in-out 3s 1;

@keyframes slideAnime {
    from{
        background-color: red;
    }
    to{
        background-color: yellow;
    }
}

@keyframes extraAnime {
    0%{
        transform: rotate(100deg);
    }
    20%{
        transform: rotate(200deg);
    }
    50%{
        transform: rotate(220deg);
    }
    80%{
        transform: rotate(300deg);
    }
    100%{
        transform: rotate(310deg);
    }
}
CSS

Transitions

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

Transition-property

transition-property: none | all | property;
transition-property: margin-right;
CSS

Transition-duration

transition-duration: time;
transition-duration: 2s;
CSS

Transition-timing-function

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n);
CSS

Transition-delay

transition-delay: time;
transition-delay: 20ms;
CSS

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

flex-direction

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

flex-wrap

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

flex-flow

flex-flow: column wrap;
CSS

justify-content

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

align-items

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

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

Child Properties (flex items)

order

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

flex-grow

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

flex-shrink

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

flex-basis

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

flex shorthand

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

align-self

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

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

grid-template-columns

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

grid-template-rows

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

grid-template

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

column-gap

column-gap: <line-size>;
CSS

row-gap

row-gap: <line-size>;
CSS

grid-column-gap

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

grid-row-gap

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

gap shorthand

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

grid-gap shorthand

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

justify-items

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

align-items

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

place-items

place-items: center;
CSS

justify-content

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

align-content

Suggested for multiline flex changes

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

place-content

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

grid-auto-columns

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

grid-auto-rows

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

grid-auto-flow

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

Child Properties (Grid items)

grid-column-start

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

grid-column-end

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

grid-row-start

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

grid-row-end

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

grid-column shorthand

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

grid-row shorthand

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

grid-area

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

justify-self

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

align-self

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

place-self

place-self: center;
CSS