CSS Syntax

In a nutshell, CSS is a collection of 3 kinds of rules, and each rule has 2 parts to the syntax.

The 3 Kinds of Rules

Instead, you can apply CSS styling in the form of 3 kinds of rules.

  1. HTML Selector: you can change the default html properties with your choices
    • code example:
      1. h1 {font-size: 1.4em:}
      2. h2, h3 {font-size: 1.2em:}
      3. p {font-size: 12pt:}
  2. CLASS: classes can be reused but are specified
    • code examples
      1. .myclass {font: bold 14px Verdana;}
  3. ID: these can only be applied ONCE on a page, so they are used largely for positioning
    • code example
      1. #header { background-color: #ffffff; height: 140px; margin: 0;}
        • note: next sections divs

The 2 Parts of a Rule

There are basically two parts to a rule (selector and declaration)

  1. selector: (remember the 3 kinds: HTML(h1), class(.myclass), or ID(#container))
  2. declaration block: property and value (always in a pairs called declarations, separated with a colon)

selector { property: value; property: value; }

Where does the CSS go?

CSS styles

  1. Best place: Externally linked stylesheet
    • you add CSS syntax to your HTML file once, and then all edits are done directly in your CSS file
      • small changes in one file affects all linked pages
      • styles are written and stored in an external .css file
        • example www.melaniestewart.com/css/twoColFixLtHdr.css
    • you provide a link in the html head section to the css file
      • except for Spry Navigation this entire site's layout and styles are in the external css file <stylesheet link href="css/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
  2. JUST OK place: Internally linked style sheets
    • between style tags in the head of each and every document
      • that's why it is only an OK choice, you can't make global changes easily
  3. Worst place: Inline styles
    • Use sparingly because your ability to globally make mass changes is greatly diminished.

HTML