Overview of This Lesson

You already learned about validating your HTML code and why it's important to do so. You should also validate your CSS, and the reasons are the same. Validating CSS code is also just as simple as it is with HTML!

Validating CSS

As you know from learning HTML, having valid CSS is important for consistency, professionalism, accessibility, and many other reasons. To validate your CSS code, you can use the W3C CSS Validation Service (opens in the ref tab). It functions exactly like the HTML validator: you can validate by URL, by uploading your file, or by copying and pasting your CSS into the "direct input" field.

css validator screen, direct input — The W3C CSS Validator Service

The validation options are also similar to the ones discussed with the HTML Validator, and you'll receive similar output.

You can give it a try with this CSS code: copy and paste it into the CSS validator and see if you can understand the errors it produces:

header, footer {
border: .2em grey solid;
  border-radius: 5 px;
}
h1 {
  color : navyblue;
}
foo {
  background color: 333;
}

What constitutes valid CSS?

What kinds of things will bring up errors in the validator and what are the industry standards for CSS code?

Syntax:

A CSS rule must follow the standard syntax (see CSS Syntax).
You are only allowed to assign valid values to properties e.g. you can't assign a string to a numeric property, you can't use named colours that are not pre-defined, etc.
There must never be a space between a numeric value and the units; e.g. margin: .2 em is invalid, it should be margin: .2em.
Property and selector names may not contain spaces.

Coding Standards

All rules begin on their own line.
A rule with multiple selectors separated by commas: each selector must go on its own line, e.g.
```
header,
footer,
main {
    ...
}
```
All rules use end-of-line brace style; never use next-line brace style (the opening brace must go on the same line as the selector (or last selector, if there are multiple) and there must be a space between the selector and the opening brace).
There must be a blank line between the closing brace of a rule and the start of the next rule.
Always end each declaration with semi-colon, even the last one in a block.
All declarations must be alphabetized by property name.
All declarations must indent 2 spaces; each declaration must be on its own line.
Declarations always consist of property: value -- there must be a colon immediately after the property name, followed by a space, followed by the value(s)

Always use shorthand properties where possible, e.g. do this:

header {
  border: .2em solid navy;
}

INSTEAD OF THIS:

header {
    border-color: navy;
    border-style: solid;
    border-width: .2em;
}

CSS identifiers (e.g. class names, id names, etc) must be in all lower-case; separate words with hypens (-). E.g. score-card, not scoreCard, scorecard, SCORECARD, etc.
Use /* comments */ to describe complex rules or sets of rules, e.g. you can use comments to make it clear that a set of rules are for a certain set of lists, or are for navigation elements.
Make rules and selectors modular and re-usable: avoid using #id selectors whenever possible.