Technical reference

CSS Cheatsheet

Style your pages

Getting Started

Introduction

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>

Add class

Support multiple classes on one element.

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

!important

Important

Overrides all previous styling rules.

.post-title {
  color: blue !important;
}

Selector

See: Selectors

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

Text color

See: Colors

color: #2a2aff;
color: green;
color: rgb(34, 12, 64, 0.6);
color: hsla(30 100% 50% / 0.6);

Background

See: Backgrounds

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

Font

See: Fonts

.page-title {
  font-weight: bold;
  font-size: 30px;
  font-family: "Courier New";
}

Position

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

Animation

animation: 300ms linear 0s infinite;

animation: bounce 300ms linear infinite;

Comment

/* This is a single line comment */

/* This is a
   multi-line comment */

Fonts & Colors

Font shorthand

Shorthand for font-style, weight, size, line-height, and font-family.

font: italic 400 14px / 1.5 sans-serif;

Font family example

Basic font-family with font size and spacing.

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

@font-face

Use custom fonts with @font-face.

@font-face {
  font-family: 'Glegoo';
  src: url('../Glegoo.woff');
}

Text transform

Control capitalization of text.

/* Hello */
text-transform: capitalize;

/* HELLO */
text-transform: uppercase;

/* hello */
text-transform: lowercase;

Named colors

Named colors supported by CSS.

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

Hexadecimal colors

Hex color codes. The last version uses transparency.

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

RGB / RGBA colors

RGB and RGBA values with various syntax styles and transparency.

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%);