CSS Basics: The Syntax That Matters & The Syntax That Doesn’t

Avatar of Chris Coyier
Chris Coyier on (Updated on )

When you’re starting to play around with CSS at the very beginning, like any other language, you have to get used to the syntax. Like any syntax, there are a bunch of little things you need to know. Some characters and the placement of them is very important and required for the CSS to work correctly. And some characters are more about clean looking code and generally followed standards but don’t matter for the CSS to work.

First, so we have the terminology down:

A CSS ruleset consists of a selector and delcaration(s) wrapped in curly braces.

Important: Braces

All CSS rulesets must have opening and closing curly braces:

braces.header { padding: 20px;}.header padding: 20px;}.header { padding: 20px;}.header padding: 20px;

If you miss the opening brace, CSS will keep reading as if the next bit of text is still part of the selector. Then it’s likely to find a character like ; which are invalid as part of a selector and break. Breaking likely means it will screw up itself and the next ruleset, and recover after that.

Missing a closing brace is a bit worse in that it’s likely to mess up the rest of the entire CSS file unless it somehow finds a double closing brace and can resolve that first missing one.

Overall point: braces are very important!

Preprocessing languages like Sass and Less offer a syntax feature called nesting. This can be convenient, but note that when these preprocessors run and produce CSS, that nesting is removed because CSS by itself doesn’t support that. If you copy nested CSS into regular CSS, you’ll have problems with the braces.

Sometimes Important: Spaces

There are just a few places that spaces are important in CSS. One of the most important is in selectors. One space in a selector means you’re selecting descendants of the previous part of the selector. The selector body p means “select p elements that are descendants of the body element”. That space means a lot. Hopefully it’s clearly different than bodyp which won’t select anything (there is no <bodyp> element). But it’s not different from body p. Multiple spaces mean the same as one space.

spacesbody ul libodyulli.header .title.header .title.header .title.header.title=

You can’t put spaces in properties, function names, or anywhere you name things. Adding spaces in those situations effectively changes the names, breaking them.

spaces-3background-image: url(tiger.jpg);background – image: url(tiger.jpg);background-image: url (tiger.jpg);@keyframes goRoundAndRound { }@keyframes go-round-and-round { }@keyframes go round and round { }:root { –theme main: red; –theme-second: red;}body { background: var(–theme main); background: var(–theme-second);}

Other than that, spacing doesn’t matter much in CSS.

spaces_1.header { padding: 20px;}.header { padding:20px; } .header {padding: 20px; }.header{padding: 20px; }.header{ padding: 20px;}.header{padding:20px;}

I’d encourage you to be consistent with your spacing, and produce clean and readable CSS. You might want to reference some CSS style guides out there for some formatting best practices.

Even the !important rule in CSS, which comes after a the value in a delcaration like body { background: white !important; } doesn’t have any spacing requirements. It could have any amount of space before it, or none.

The removing of space in CSS is actually a best practice for performance, so you might notice that when peeking at the raw CSS of websites in production.

You’re better off leaving that minification of CSS to a tool that processes your CSS for you, leaving the original alone. We’ll have to cover the options for that in other post.

Mostly Important: Semicolons

Each declaration in a ruleset (a property and value pair) ends in a semicolon. That semicolon is required, otherwise CSS will keep reading the next property as if it’s part of the value of the previous declaration.

semicolons.header { padding: 20px; max-width: 600px; background: black; color: white}.header { padding: 20px; max-width: 600px background: black; color: white;}

You can leave off the semicolon on the last declaration in a ruleset. I’d warn that doing so manually will cause more trouble than it’s worth, and best left to minification tools.

Important: Avoiding Stray Characters

This is important in any language. Every character in code matters, so random other characters will almost certainly break things.

extra-chars.header { padding: 20px;}.header { { padding: 20px;}.header { padding: ~20px;}.header { /padding: 20px;}

Not Important: Line Breaks

A line break is treated like any other white space in CSS, so feel free to use them as needed, as long as it doesn’t break any other spacing rule like we talked about above.

line-breaks.bar { background-image: url(texture.png), url(tiger.jpg); }.button::after { content: ">";} .header { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 20px 2px 5px -5px rgba(0, 0, 0, 0.5);}

All in all, CSS syntax isn’t so hard. Good luck!