Play with Coding — Learn to code. Play to grow.

Everything in one place

Use this chapter as a quick reference once you've worked through the rest of the course. It collects every core construct of CSS into runnable, copy-pasteable snippets you can scan whenever you forget the exact syntax.

Hello world & variables

```css
body {
  font-family: system-ui, sans-serif;
  color: #333;
}
h1 { color: tomato; }

:root { --brand: #6366f1; --space: 1rem; } .btn { background: var(--brand); padding: var(--space); } ```

Data types & operators

```css
/* values: length, color, percentage, function */
.box {
  width: 240px;        /* length */
  color: #ff0066;      /* color */
  opacity: 0.8;        /* number */
  background: linear-gradient(red, blue); /* function */
}

.card { width: calc(100% - 2rem); font-size: clamp(1rem, 2vw, 1.5rem); } ```

Conditionals & loops

```css
@media (max-width: 600px) {
  .sidebar { display: none; }
}
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

/* CSS has no loops, but selectors apply to every matching element */ ul li { padding: 0.5rem; } ```

Functions & arrays

```css
.btn { background: rgb(99, 102, 241); }
.box { transform: rotate(45deg) scale(1.2); }
.bar { width: calc(100% / 3); }

nav ul { display: flex; gap: 1rem; list-style: none; } nav li { padding: 0.5rem 1rem; } ```

Strings & objects

```css
body::before {
  content: "★ Featured ";
  color: gold;
}

.card { border: 1px solid #ddd; border-radius: 0.5rem; padding: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } ```

Errors, modules & I/O

```css
/* Invalid CSS rules are silently ignored. Use browser DevTools to spot misspelled property names. */
.box { colr: red; }  /* typo: ignored */

/* shared.css */ .btn { padding: 0.5rem 1rem; }

/* page.css */ @import url("shared.css"); .btn { background: tomato; }

/* Style inputs based on validity */ input:invalid { border-color: red; } input:focus { outline: 2px solid var(--brand); } ```

How to use this page

Bookmark it. When you start a new project, open this cheatsheet alongside your editor and use it as a syntax lookup. Once a construct becomes second nature you'll stop needing the reference for it — and that's exactly when you know you've mastered that part of CSS.

CSS Syntax Cheatsheet