Jessica’s CSS Notes

Cascading Style Sheets (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

CSS Link Pseudo-Selectors

a:link {color: #0000ff;}
a:visited {color: #ff0000;}
a:active {color: #00FF00;}
a:hover {background-color: #ffffff;}
a {text-decoration: none;}

Basic Two-Column Layout

Code:

<div>Header</div>
<div>
<div style="float:left; width: 50%;">Left Column</div>
<div style="float:right; width: 50%;">Right Column</div>
</div>
<div style="clear:both;">Footer</div>

Example:

Header
Left Column
Right Column
Footer