Tyic | Popular Web 2.0 Blog | Tech Guide | Video | Ajax | Tech News | Social Network | Web Hosting

• link : link | visited | focus | hover | active - “LVFHA”
  
• font: large/120% “Times New Roman”, Times, serif;
  font: font-style | font-variant | font-weight | font-size | line-height | font-family;
  font-size: 1em;
  line-height: 1.5em;
  font-weight: bold;
  font-style: italic;
  font-family: serif
  
  
• background: #fff url(image.gif) no-repeat top left
  background-color | background-image | background-repeat | background-attachment | background-position
  background-color: #fff;
  background-image: url(image.gif);
  background-repeat: no-repeat;
  background-position: top left;
  
  
• list-style: disc outside url(image.gif)
  list-style: | list-style-type | list-style-position | list-style-image;
  list-style: #fff;
  list-style-type: disc;
  list-style-position: outside;
  list-style-image: url(image.gif)
  
  
• margin: 2px 1px 3px 4px ( top, right, bottom, left ) Four different value
  margin: 5em 1em 3em ( top, right and left, bottom ) Three different values
  margin: 5% 1% ( top and bottom, right and left ) Two different values
  margin: 0 ( top, bottom, right and left ) One different value
  margin: margin-top | margin-right | margin-bottom | margin-left;
  margin-top: 2px;
  margin-right: 1px;
  margin-bottom: 3px;
  margin-left: 4px
  
  
• border: 1px black solid
  border: border-width | border-style | border-color;
  border-right: 1px black solid
  border-width: 1px;
  border-color: black;
  border-style: solid
  border-top: border-width | border-style | color;
  
  border-right: border-width | border-style | color;
  border-bottom: border-width | border-style | color;
  border-left: border-width | border-style | color;
  
  
• padding: 10px 20px 10px 20px;
  padding-top | padding-right | padding-bottom | padding-left;
  
• Values for list-style-type - disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit

• Older Browser Support - Older browsers (such as NN4 and below, early versions of IE etc) do not have the support for shorthand CSS. If you wish to cater for older browsers (which isn’t the point of sCSS), then you will need to declare each attribute individually.

Others

• /* mac hide \*/ html {height:100%} /* end hide*/
• !important; /*moz fixes*/
• voice-family: “\”}\”";
  voice-family: inherit;
• /* Commented backslash hack hides rule from IE 5-Mac \*/
  #nav-menu li a
  {
  float: none
  }
  /* End IE 5-Mac hack */
• Multiple class names <img src=”baz.gif” class=”royaltyfree special” />
• Explorer.
  eg: a:link { /* declarations */ }
  a:hover { /* declarations */ }
  a:active { /* declarations */ }
  a:visited { /* declarations */ }
  is different from:
  a:link { /* declarations */ }
  a:visited { /* declarations */ }
  a:active { /* declarations */ }
  a:hover { /* declarations */ }
  
• Group selectors

  1. h1,h2,h3,h4,h5,h6 {
  2. font-family:”Lucida Grande”,Lucida,Arial,Helvetica,sans-serif;
  3. color:#333;
  4. margin:1em 0;
  5. }

  You can then separately specify any properties that are different for some of those elements, for example font-size:

  1. h1 { font-size:2em; }
  2. h2 { font-size:1.6em; }

• To hide a rule from IE, you can use a child selector:

  1. html>body p {
  2. /* declarations */
  3. }

  The star html hack will hide a rule from all browsers but IE:

  1. * html p {
  2. /* declarations */
  3. }

• Sometimes you want to feed some CSS to IE/Win but not IE/Mac. To do this you can use the commented backslash hack:

  1. /* \*/
  2. * html p {
  3. declarations
  4. }
  5. /* */

• You also avoid invalidating the “real” CSS file with proprietary IE extensions to CSS, like expressions, that are sometimes needed.

  1. <!--[if IE]>
  2. <link rel="stylesheet" type="text/css" href="ie.css" />
  3. <![endif]–>