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: