Syntax and Rules to write styles Sheet


Selectors

Any HTML element is a possible Cascading Style Sheet selector.
The selector is simply the element that is linked to a particular style.
For example,In the below Style P is the selector.

P
{
          text-color: Red
}


Class Sector

The class sector definition schould start with dot(.) followed by class name

.note { font-size: small }

<P CLASS=note>Cherukuri Venkateswarlu</p>
A good practice is to name classes according to their function rather than their appearance.

ID Selectors

ID selectors are individually assigned for the purpose of defining on a per-element basis. This selector type should only be used sparingly due to its inherent limitations. An ID selector is assigned by using the indicator "#" to precede a name. For example, an ID selector could be assigned as such:

#chdiv { text-indent: 3em }

This would be referenced in HTML by the ID attribute

<P ID=chdiv>Text indented 3em <P/>

Contextual Selectors

Contextual selectors are merely strings of two or more simple selectors separated by white space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example, the contextual selector in

P EM { background: yellow }

is P EM. This rule says that emphasized text within a paragraph should have a yellow background; emphasized text in a heading would be unaffected.

Grouping

In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping:

H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }

Inheritance

Virtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph.

Example
There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.

Comments

Comments are denoted within style sheets with the same conventions that are used in C programming. A sample CSS1 comment would be in the format:

/* COMMENTS CANNOT BE NESTED */ 


Cascading Order

When multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet's rule will win out. The following characteristics will determine the outcome of contradictory style sheets.

  1. ! important
    Rules can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight. Likewise, since both author and reader may specify important rules, the author's rule will override the reader's in cases of importance. A sample use of the ! important statement: BODY { background: url(bar.gif) white; background-repeat: repeat-x ! important }
  2. Origin of Rules (Author's vs. Reader's)
    As was previously mentioned, both authors and readers have the ability to specify style sheets. When rules between the two conflict, the author's rules will win out over reader's rules of otherwise equal weight. Both author's and reader's style sheets override the browser's built-in style sheets. Authors should be wary of using ! important rules since they will override any of the user's ! important rules. A user may, for example, require large font sizes or special colors due to vision problems, and such a user would likely declare certain style rules to be ! important, since some styles are vital for the user to be able to read a page. Any ! important rules will override normal rules, so authors are advised to use normal rules almost exclusively to ensure that users with special style needs are able to read the page.
  3. Selector Rules: Calculating Specificity
    Style sheets can also override conflicting style sheets based on their level of specificity, where a more specific style will always win out over a less specific one. It is simply a counting game to calculate the specificity of a selector.

    • Count the number of ID attributes in the selector.
    • Count the number of CLASS attributes in the selector.
    • Count the number of HTML tag names in the selector.

    Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

    #id1 {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
    UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
    LI.red {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
    LI {xxx} /* a=0 b=0 c=1 --> specificity = 001 */
  4. Order of Specification
    To make it easy, when two rules have the same weight, the last rule specified wins.