MENU


CSS

A CSS describes the look and format of elements. It can exist as

  1. a separate file,
  2. in the head section of anHTML file, or
  3. within the opening tag of an element in the body section.

A. An external CSS with <link>
RESETRUNFULL
/* /shared/mystylesheet.css  (FIXED: can't be modified here) */
hr {
   height:8px;
   background: red;
}

table.mytable {
   text-decoration:underline;
   border-collapse:separate;
   border-spacing:9px 9px;
}

body {
   background: url("/shared/bg.jpg");
   background-size: cover;
}

<!DOCTYPE html><html><head> 
   <link rel="stylesheet" type="text/css" href="/shared/mystylesheet.css" />
</head><body>
   <table class="mytable">
      <tr>
          <td>Alex</td>
          <td>USD 100</td>
      </tr><tr>
          <td>Kathy</td>
          <td>USD 250</td>
      </tr>
   </table>
   <hr/>
</body></html>
B. An internal CSS with <style> in <head>
(Placing <style scoped>… inside the <body> section is not compliant with official HTML standards. Avoid this practice although browsers ignore this limitation at the time of writing.)
RESETRUNFULL
<!DOCTYPE html><html><head>
<style type="text/css">
   p#p1 {
      margin-top:20px; 
      color:red;
   }
   div {background: url("/shared/bg.jpg");}
</style>
</head><body>
   <div>
      <p id="p1">Today is a good day to learn CSS.</p>
      <p>Don't you agree?</p>
   </div>
</body></html>
C. Inline styles with ......style
RESETRUNFULL
<!DOCTYPE html><html><head></head><body>
   <p style="letter-spacing:9px;">
      This is <span style="font-size:40px">big</span>.
   </p>
</body></html>

An inline style has the highest priority and will overwrite any repeated styles defined in the head section. The external CSS will overwrite the internal CSS if <link> appears after <style>.

The 'class' attribute is often used to control the CSS properties of an element. Note that you can't start a class name with a numeric digit or a special symbol.

In this tutorial, all CSS properties are classified into 3 levels of importance and styled accordingly:
very-important-property
ordinary-property
rarely-used-property

Sometimes only the prefixed variation of a new property is supported by a browser. The prefixes are –ms- for Internet Explorer, -moz- for Firefox, -O- for Opera, and –webkit- for Safari and Chrome. To make sure a new property is supported by all browsers, simply include all variations when using the property.

A CSS style sheet can be validated at: http://jigsaw.w3.org/css-validator/