CSS syntax is easy. A stylesheet contains styles; a style contains selectors and rules; and a rule contains a property and a value. The following is the design pattern for a style:
SELECTORS { RULES }
The following is the design pattern for a rule:
PROPERTY:VALUE;
For example, p{margin:0;} is a style. p is the selector, which selects all <p> elements in an HTML document. The curly bracket ({}) operators assign the rule, margin:0;, to the selector, p. The colon (:) operator assigns the value 0 to the property, margin. The semicolon (;) operator terminates the rule.

A style may have one or more selectors and one or more rules. For example, p.tip{margin:0; line-height:150%;} is a style. The curly bracket operators group the two rules, margin:0; and line-height:150%;, into a ruleset and assign it to the selector, p.tip, which selects all <p> elements in an HTML document.

CSS Syntax Details

The key points of CSS syntax are as follows:
• Unicode UTF-8 should be used to encode CSS files—the same way you should encode HTML files.
• CSS code should be lowercase. Selectors are case sensitive when referencing element names, classes, attributes, and IDs in XHTML.6 CSS properties and values are case insensitive. For simplicity and consistency, I use lowercase characters for all CSS code including elements, classes, and IDs.
• Element names, classes, and IDs are restricted to letters, numbers, underscores (_), hyphens (-), and Unicode characters 161 and higher. The first character of an element, class, or ID must not be a number or a hyphen. A classname and ID must not contain punctuation other than the underscore and hyphen. For example, my_name2-1 is a valid name for a class or ID, but the following are invalid: 1, 1my_name, -my_name, my:name, my.name, and  my,name.
• Multiple classes can be assigned to an element by separating each class name with a space, such as.
• Constant values should not be placed in quotes. For example, color:black; is correct, but color:”black”; is not.
• The backslash (\) can be used to embed characters in a context where they normally cannot occur; for example, \26B embeds & in a string or identifier. Anywhere from two to eight hex codes can follow a backslash, or a character can follow a backslash.
• A string may contain parentheses, commas, whitespace, single quotes (‘), and double quotes (“) as long as they are escaped with a backslash, such as the following:
“embedded left parentheses \( ”
“embedded right parentheses \) ”
“embedded comma \, ”
“embedded single quote \’ ”
“embedded double quote \” ”
“embedded single quote ‘ in a double-quoted string”
‘embedded double quote ” in a single-quoted string’

• A semicolon should terminate each CSS rule and @import statement. color:red; @import “mystylesheet.css”;
• Rulesets are created by enclosing multiple rules in curly braces, such as { color:red; font-size:small; }.

• The right curly brace (}) immediately terminates a set of properties, unless it is embedded within a string, such as “}”.
• A CSS comment starts with /* and ends with */, such as /* This is a CSS comment */. Comments cannot be nested. Thus, the first time a browser encounters */ in a stylesheet, it terminates the comment. If there are subsequent occurrences of /*, they are not interpreted as part of the comment. For example:
/* This is an incorrect comment
/* because it tries to nest
/* several comments. */
STARTING HERE, THIS TEXT IS OUTSIDE OF ALL COMMENTS! */ */

Related posts:

1. Using Cascade Order CSS allows you to assign the same rule to the...
2. CSS comments looks CSS comments look like this: /* this is a comment...
3. Types of CSS selectors In the previous example, the most basic style of selector...
4. The rules of CSS Style sheets consist of a number of rules that define...

Related posts brought to you by Yet Another Related Posts Plugin.