Jessica's CSS Notes

CSS:

• Seperates content from presentation
• Makes presentation/colors/layout easy to control/swap out
• Allows reuse of presentation across site, reducing bandwidth

Two ways to identify an element in CSS:

• ID
  • assigns a name to an element that must be unique on the page
  • strict naming rules (must begin with a letter, may include numbers, dashes, underscores, colons, or periods, most unicode characters are excluded)
  • Uses:
    • style sheet selector (higher specificity than class)
    • target anchor for links
    • means to access a unique element from scripting (via DOM)
• CLASS
  • potentially applies to a group of elements rather than a single unique element
  • more flexible naming than IDs (most unicode characters allowed, however, may not be good programming practice to do so)
  • multiple class names may be applied by space-seperating them

Ways to apply CSS

• External File
  • use the <LINK> element in the HEAD section to reference the style sheet
• Page Wide
  • use the <STYLE> tag to embed CSS in the HEAD section of the document
• To a particular page element
  • use attribute style="..." on any element on the page

Inheritance

Certain CSS properties are automatically inherited from parent elements (eg: color or font-family are inherited by default)

Specificity

More specific markup takes precedence

• css in style attribute takes precedence over page-wide code
• ID takes precedence over CLASS
• nesting takes precedence over base formatting eg: body div {} takes precedence over div {} when it applies
• saying !important can force precedence, but typically if you're resorting to this there's a better solution that won't limit your flexibility as much
• for simplicity, avoid excessively specific markup except when needed to fix problems