This is a reference cheat sheet for CSS goodness, listing selector syntax, properties, units and other useful bits of information.
<link href="./path/to/stylesheet/style.css" rel="stylesheet" type="text/css">
<style> body { background-color: linen; } </style>
<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>
.box { position: relative; top: 20px; left: 20px; }
div { display: flex; justify-content: center; } div { display: flex; justify-content: flex-start; }
<div class="classname"></div> <div class="class1 ... classn"></div>
h1 { } #job-title { } div.hero { } div > p { }
background-color: blue; background-image: url("nyan-cat.gif"); background-image: url("../image.png");
color: red; color: orange; color: tan; color: rebeccapurple;
color: #090; color: #009900; color: #090a; color: #009900aa;
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-family: Arial, sans-serif; font-size: 12pt; letter-spacing: 0.02em;
.block-one { margin: 20px; padding: 10px; }
.container { box-sizing: border-box; }
.small-block { overflow: scroll; }
.container { display: flex; }
#grid-container { display: grid; width: 100px; grid-template-columns: 20px 20% 60%; }
/*The distance between rows is 20px*/ /*The distance between columns is 10px*/ #grid-container { display: grid; grid-gap: 20px 10px; }
/* @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;