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>