CSS Cheatsheet

CSS is a style sheet language used for describing the presentation of a document written in HTML. This cheatsheet covers essential CSS concepts, properties, and examples to help you style your web pages effectively.

For more details checkout my step-by-step CSS tutorial.

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: 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 properties allow you to manipulate alignment, spacing, decoration, indentation, etc., in the document.

Text-Align

text-align: justify;

Letter-Spacing

letter-spacing: 0.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, 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

background-repeat: no-repeat;

Background-Attachment

background-attachment: scroll;

Background-Color

background-color: fuchsia;

Background Shorthand

background: color image repeat attachment position;

Border

Border properties allow you to change the style, width, color, etc., of the border of an element.

Border-Width

border-width: 2px;

Border-Style

border-style: solid;

Border-Color

border-color: #000000;

Border Shorthand

border: width style color;

Border-Radius

border-radius: 10px;

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

Clear

clear: both;

Display

display: block;

Height

height: fit-content;

Width

width: 50%;

Margin

margin: 10px;

Padding

padding: 10px;

Overflow

overflow: hidden;

Visibility

visibility: hidden;

Color

color: #000000;

Opacity

opacity: 0.5;

Template Layout

Box-Align

box-align: center;

Box-Direction

box-direction: normal;

Box-Flex

box-flex: 1;

Box-Flex-Group

box-flex-group: 2;

Box-Orient

box-orient: inline;

Box-Pack

box-pack: center;

Box-Sizing

box-sizing: border-box;

max-Height

max-height: 100px;

min-Height

min-height: 100px;

max-Width

max-width: 100px;

min-Width

min-width: 100px;

Table

Border-Collapse

border-collapse: collapse;

Empty-Cells

empty-cells: show;

Border-Spacing

border-spacing: 5px;

Table-Layout

table-layout: fixed;

Caption-Side

caption-side: bottom;

Columns

Column-Count

column-count: 2;

Column-Gap

column-gap: 40px;

Column-rule-width

column-rule-width: 2px;

Column-Rule-Style

column-rule-style: solid;

Column-Rule-Color

column-rule-color: #000000;

Column-Span

column-span: all;

Column-Width

column-width: 100px;

List & Markers

List-style-type

list-style-type: circle;

List-style-position

list-style-position: inside;

List-style-image

list-style-image: url("Path");

Marker-offset

marker-offset: 10px;

Animation

Animation-name

animation-name: example;

Animation-duration

animation-duration: 5s;

Animation-timing-function

animation-timing-function: linear;

Animation-delay

animation-delay: 2s;

Animation-iteration-count

animation-iteration-count: infinite;

Animation-direction

animation-direction: alternate;

Animation-play-state

animation-play-state: running;

Animation-fill-mode

animation-fill-mode: forwards;

Transition

Transition-property

transition-property: width;

Transition-duration

transition-duration: 2s;

Transition-timing-function

transition-timing-function: linear;

Transition-delay

transition-delay: 1s;

Flexbox

Flex Container (Parent)

Display

display: flex;

Flex-direction

flex-direction: row | column;

Flex-wrap

flex-wrap: wrap;

Flex-flow

flex-flow: row wrap;

Justify-content

justify-content: center;

Align-items

align-items: center;

Align-content

align-content: space-around;

Flex Items (Child)

Order

order: 1;

Flex-grow

flex-grow: 2;

Flex-shrink

flex-shrink: 1;

Flex-basis

flex-basis: 20%;

Flex

flex: 1 1 auto;

Align-self

align-self: flex-end;

Grid

Grid Container (Parent)

Display

display: grid;

Grid-template-columns

grid-template-columns: 1fr 1fr;

Grid-template-rows

grid-template-rows: 100px 100px;

Grid-gap

grid-gap: 10px;

Justify-items

justify-items: center;

Align-items

align-items: center;

Grid Items (Child)

Grid-column

grid-column: 1 / span 2;

Grid-row

grid-row: 1 / span 2;

Media Queries

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Conclusion

This CSS cheatsheet covers essential CSS concepts, properties, and examples to help you style your web pages effectively. Use it as a quick reference to build your next project.

For more details checkout my step-by-step CSS tutorial.

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: 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 properties allow you to manipulate alignment, spacing, decoration, indentation, etc., in the document.

Text-Align

text-align: justify;

Letter-Spacing

letter-spacing: 0.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, 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

background-repeat: no-repeat;

Background-Attachment

background-attachment: scroll;

Background-Color

background-color: fuchsia;

Background Shorthand

background: color image repeat attachment position;

Border

Border properties allow you to change the style, width, color, etc., of the border of an element.

Border-Width

border-width: 2px;

Border-Style

border-style: solid;

Border-Color

border-color: #000000;

Border Shorthand

border: width style color;

Border-Radius

border-radius: 10px;

Box Model

Float

float: left;

Clear

clear: both;

Display

display: block;

Height

height: fit-content;

Width

width: 50%;

Margin

margin: 10px;

Padding

padding: 10px;

Overflow

overflow: hidden;

Visibility

visibility: hidden;

Color

color: #000000;

Opacity

opacity: 0.5;

Template Layout

Box-Align

box-align: center;

Box-Direction

box-direction: normal;

Box-Flex

box-flex: 1;

Box-Flex-Group

box-flex-group: 2;

Box-Orient

box-orient: inline;

Box-Pack

box-pack: center;

Box-Sizing

box-sizing: border-box;

max-Height

max-height: 100px;

min-Height

min-height: 100px;

max-Width

max-width: 100px;

min-Width

min-width: 100px;

Table

Border-Collapse

border-collapse: collapse;

Empty-Cells

empty-cells: show;

Border-Spacing

border-spacing: 5px;

Table-Layout

table-layout: fixed;

Caption-Side

caption-side: bottom;

Columns

Column-Count

column-count: 2;

Column-Gap

column-gap: 40px;

Column-rule-width

column-rule-width: 2px;

Column-Rule-Style

column-rule-style: solid;

Column-Rule-Color

column-rule-color: #000000;

Column-Span

column-span: all;

Column-Width

column-width: 100px;

List & Markers

List-style-type

list-style-type: circle;

List-style-position

list-style-position: inside;

List-style-image

list-style-image: url("Path");

Marker-offset

marker-offset: 10px;

Animation

Animation-name

animation-name: example;

Animation-duration

animation-duration: 5s;

Animation-timing-function

animation-timing-function: linear;

Animation-delay

animation-delay: 2s;

Animation-iteration-count

animation-iteration-count: infinite;

Animation-direction

animation-direction: alternate;

Animation-play-state

animation-play-state: running;

Animation-fill-mode

animation-fill-mode: forwards;

Transition

Transition-property

transition-property: width;

Transition-duration

transition-duration: 2s;

Transition-timing-function

transition-timing-function: linear;

Transition-delay

transition-delay: 1s;

display: flex;

Flex-direction

flex-direction: row | column;

Flex-wrap

flex-wrap: wrap;

Flex-flow

flex-flow: row wrap;

Justify-content

justify-content: center;

Align-items

align-items: center;

Align-content

align-content: space-around;

Flex Items (Child)

Order

order: 1;

Flex-grow

flex-grow: 2;

Flex-shrink

flex-shrink: 1;

Flex-basis

flex-basis: 20%;

Flex

flex: 1 1 auto;

Align-self

align-self: flex-end;

display: grid;

Grid-template-columns

grid-template-columns: 1fr 1fr;

Grid-template-rows

grid-template-rows: 100px 100px;

Grid-gap

grid-gap: 10px;

Justify-items

justify-items: center;

Align-items

align-items: center;

Grid Items (Child)

Grid-column

grid-column: 1 / span 2;

Grid-row

grid-row: 1 / span 2;

Media Queries

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Conclusion

This CSS cheatsheet covers essential CSS concepts, properties, and examples to help you style your web pages effectively. Use it as a quick reference to build your next project.