Syntax Rules for CSS

CSS has some great admirers among the web community, and many developers are using CSS to great effect in more creative ways.  If you are yet to come across CCS, there is no doubt that you soon will.  What follows, is a guide on some of CSS’s basic syntax rules.

Selectors, are elements that are linked to a particular style.  It is worth remembering, that any HTML element is a possible CSS1 selector.

In the following code, the selector in   A {text-indent: 5em}    is A.

It is possible for an element to adopt different styles, because the selector can have different classes.  The following example shows how a designer can display particular code in a different color.

Code.html  {color: #191970}
Code.css    {color: #4b0082}

Here we can see two classes, html and css.  Both are to be used by HTML’s code element. 

HTML uses the Class attribute to show the class of an element.

Thus:  <A CLASS=warning>Only one class is allowed per selector.
For example, code.html.proprietary is invalid.</p>
It is possible to use classes without an associated element.  The note class may be used with any element in following example.

.note  { font-size :  large  }
  
Most designers will tell you that it is good practice not to name Classes after their appearance, but to name them according to their function.  It would have been easy to name .note as .large, but what would have happened if the style of the class no longer had a large font size?  The reference to the class, would have been rendered meaningless.

It is recommended that ID selectors are used sparingly as they have inherit limitations.  They are individually assigned for the purpose of defining, on an element by element basis.  The “#” symbol is used as an indicator in CSS syntax.  It is placed before the name of the class:

#svu890 { text-indent: 5em }

The ID attribute is used by HTML for reference: 
                                                 
                               <O ID=svp940>Text indented 5em</O>

Strings of two simple selectors with white space in-between are Contextual Selectors.  Due to the rules of cascading order, they take precedence over simple selectors, and can be assigned normal properties.  The Contextual Selector below is P EM.  The stated rule is that emphasized text contained in a paragraph, will be on a red background.  Emphasized text in a heading will be unaffected.

P EM  { background : red }

Here are some useful declarations in CSS syntax.

Color, margin and font are types of property.  Properties are assigned to a selector to change its style.

The value, is a declaration that is assigned to a property.   Color, for example could be assigned a value red.

Grouping, is a useful little trick that decreases repetitious statements within style sheets, as declarations and selectors, can be grouped together.  In the example below, all the headings have been given identical declarations via a grouping.

H1, H2, H3, H,4 H5, H6  {
       color: yellow
       font-family: sans-serif   }

 It is important to remember that a nested selector, ( a selector that is nested within a selector), will inherit the property values assigned to the outer selector, unless it is modified.  So a color defined for the body will also be applied to the text in a paragraph.

However, in some cases this is not the case, and the nested selector will not inherit the outer selectors values.  The margin-top property is not inherited, as a paragraph would not have the same top margin as the document body.  As you can see these are largely logical in nature.

CSS allows comments with the same conventions as used in the C programming language.  Thus

/* COMMENTS CAN NOT BE NESTED /*

We hope the basic Syntax rules for CSS prove useful.  Good luck.