CSS Cheat Sheet

The ultimate CSS cheat sheet is here!

The basic language used to style and structure web pages is called Cascading Style Sheets (CSS). This cheat sheet has you covered whether you’re a novice just learning CSS or an experienced developer looking for a quick reference guide. The complete manual will help you in navigating the broad world of CSS with clear explanations and examples.

Take your preferred code editor, then let’s explore the beautiful world of CSS!

If you’re interested, you can also check our HTML cheat sheet.

How to add CSS

Inline (.html)

Target single element

<html style="background: green;"></html>

Internal (.html)

Target single webpage

<head>
   <style>
      html {
        background: green;
      }
   </style>
</head>

External (.css)

Target multipage website

.html File:
<head>
  <link rel="stylesheet" href="./style.css" />
</head>

.CSS File:
   html {
     background: green;
   }

CSS Selectors

Element Selector

h2 {
 color: blue;
}

Class Selector

.html File:
<h2 class="class-example">Hello world</h2>

.CSS File:
.class-example {
 color: blue;
}

Id Selector

.html File (In the HTML page, there should only be one unique ID):
<h2 id="id-example">Hello world</h2>

.CSS File:
#id-example {
 color: blue;
}

Attribute Selector

.html File:
<p draggable="true">Hello world</p>

.CSS File:
p[draggable="true"] {
 color: blue;
}

Universal Selector

*{
   color: blue;
 }

CSS Properties

Complete CSS reference.

  • background: value;
  • color: value;
  • font-size: value px;
  • font-weight: value;
  • text-align: value;
  • height: value px;
  • width: value px;