Getting Started

counter-set: subsection;
counter-increment: subsection;
counter-reset: subsection 0;
:root {
  --bg-color: brown;
}
element {
  background-color: var(--bg-color);
}

See: Dynamic content

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}
#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

See: Grid Layout

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

See: Flexbox | Flex Tricks

/\* This is a single line comment \*/
/\* This is a 
 multi-line comment \*/

animation: 300ms linear 0s infinite;
animation: bounce 300ms linear infinite;

See: Animation

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

See also: Position

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

See: Fonts

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

See: Backgrounds

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

See: Colors

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

See: Selectors

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

Overrides all previous styling rules.

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

Support multiple classes on one element.

CSS is rich in capabilities and is more than simply laying out pages.

#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>