CSS Cheat Sheet

This is a reference cheat sheet for CSS goodness, listing selector syntax, properties, units and other useful bits of information.

External Stylesheet

<link href="./path/to/stylesheet/style.css" rel="stylesheet" type="text/css">

Internal Stylesheet

<style>
body {
    background-color: linen;
}
</style>

Inline Styles

<h2 style="text-align: center;">Centered text</h2>

<p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

Position

.box {
    position: relative;
    top: 20px;
    left: 20px;
}

Flex layout

div {
    display: flex;
    justify-content: center;
}
div {
    display: flex;
    justify-content: flex-start;
}

Add class

<div class="classname"></div>
<div class="class1 ... classn"></div>

Selector

h1 { } 
#job-title { }
div.hero { }
div > p { }

Background

background-color: blue;
background-image: url("nyan-cat.gif");
background-image: url("../image.png");

CSS Named Color

color: red;
color: orange;
color: tan;
color: rebeccapurple;

Hexadecimal color

color: #090;
color: #009900;
color: #090a;
color: #009900aa;

rgb() Colors

color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

Font properties

font-family: Arial, sans-serif;
font-size: 12pt;
letter-spacing: 0.02em;

Box Margin/Padding

.block-one {
    margin: 20px;
    padding: 10px;
}

Box Sizing

.container {
    box-sizing: border-box;
}


Box Overflow

.small-block {
    overflow: scroll;
}


CSS Flexbox

.container {
  display: flex;
}

CSS grid Layout

#grid-container {
    display: grid;
    width: 100px;
    grid-template-columns: 20px 20% 60%;
}

Grid Gap

/*The distance between rows is 20px*/
/*The distance between columns is 10px*/
#grid-container {
    display: grid;
    grid-gap: 20px 10px;
}

CSS Animation

/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

animation: 4s linear 0s infinite alternate move_eye;
animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;