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

Operators

Try this in our CSS Compiler →

Arithmetic, comparison and logical

Operators are short symbols that act on one or more values. CSS groups them into arithmetic (+ - * / %), comparison (== != < > <= >=) and logical (AND OR NOT). Combine them to build the conditions that drive your program.

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

Precedence

Just like in maths, * binds tighter than +, so 2 + 3 * 4 is 14, not 20. When in doubt add parentheses — they cost nothing at runtime and make intent clear to anyone reading the code later.

Equality vs assignment

One of the most common beginner bugs is writing = (assignment) when you meant == (comparison). Read your conditions out loud — "if total equals one hundred" — to catch this kind of typo.

Try it yourself

CSS Compiler

Output

Code runs in a sandboxed preview inside your browser — your code is saved locally for next time.