Cascading Style Sheets/Syntax

Cascading Style Sheets are most often linked to a web page so that they can be used in an entire site. Because of this they are an independent file and have their own construction.

A stylesheet should begin with a declaration.

 @charset "UTF-8";

After this declaration each CSS rule is independent and made of three parts: a selector, a property and an argument (i.e. a value):

Example:

 @charset "UTF-8";

 body {
 background-color : #000000;
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 100%;
 color : #ffffff;
 margin : 0;
 padding : 0;
 text-align : center;
 }

 h1 {
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 16px;
 color : #ffffff;
 font-style : normal;
 font-weight : normal;
 letter-spacing : 0.1em;
 }

 h2 {
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 12px;
 font-style : italic;
 font-weight : bold;
 color : #ffffff;
 text-decoration : underline;
 }

 p {
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 12px;
 font-style : normal;
 color : #ffffff;
 }

 etc

What this breaks down to here is this:

@rule argument(s) {
	selector {
		property: argument(s);
		another-property: argument(s);
		property-the-third: argument(s);
		fourth-property: argument(s);
	}
}

Each selector can have as many properties as you would like. The properties and values are enclosed in { } tags.

Rules

CSS rules are preceded by the @ symbol and are often the start of blocks of code. Rules take at least 1 argument. Some examples of rules are @charset, for defining the document character set; @media, for setting properties for a type of media, often all, screen and print; and @font for setting up a web font.

Selectors

Selectors are where most of the power in CSS lies. Selectors allow the author to specifically target an element to apply any given property to. Many different selector types can be combined for the precision application of styles.

Elements

Elements that are specified in CSS definitions (abbreviated E, F, etc.) correspond to the (X)HTML or XML elements in the document. In HTML or XHTML, common elements include p, span, and div. In XML, the element names will vary with the type of document to be displayed.

Class

Class is the most basic of the selectors. The class operator is a "." and the syntax is E.classname.

ID

ID specifies a unique element in the document and in (X)HTML it is also the fragment identifier. The ID operator is a "#" and the syntax is E#IDname.

Attribute

Attribute selection is a newer feature in CSS that allows selection based on any attribute of the element. The syntax is E[Attribute="value"]. Attribute supports several different matching operators, including =, !=, ~=, ^= and $=.

Pseudo-class

Pseudo-classes are special classes based on the state of an element and uses the : operator. The syntax is E:pseudo-class. Commonly used pseudo-classes include :hover, :link and :visited...

Blocks

Blocks of code are everywhere in CSS. A block is started with { and closed with }. Blocks are used to group CSS statements into logical groups based on the author's needs. Blocks are most commonly used by Rules and to group properties to a selector.

Properties

Properties are the meat of CSS. The syntax is quite simple, property: argument(s);. Properties are always after a selector and always inside a {} block. A property must be ended with a ; to close it.