Welcome
Agenda II
Xhtml Rules
DocType
Web Terms
XHTML Elements
Meta Tags
Typography
Styles Types
Why CSS?
Font CSS
Inline CSS
Embed CSS
Linked CSS
CSS Attributes
Text CSS
Hex Colors
Color CSS
List CSS
Background Images
Display Position
Box Positioning
Border CSS
Classes and IDs
Div & Span
CSS Summary
Table Summary
Frame Summary
Table Attributes
Basic Tables
Table CSS
Frame Basics
3 Colors Frame
Frame Attributes
Nested Frames
Inline Frames

Back 

External or Linked Style Sheets Characteristics

<link rel="stylesheet" href="mystyles.css" type="text/css" />
  1.  Create a new text document
  2.  No tags/elements are included
  3.  Input the xHTML tags /selectors - h1
  4.  Enclose properties and values with curly brackets - h1 {color: #ff00ff}
  5.  Define the properties for that tag /selector/ class
  6.  Separte multiple properties with a semi-colon ;
  7.  End each tag property and value with the }
  8.  Classes defined with a period first; IDs defined with a pound sign
  9.  Save the text file with the extension file.css
  10.  In the HEAD of each HTML document, place the Link tag:
    <link rel="stylesheet" type="text/css" href="mystyles.css">

Linked / External Style Sheet Format

h1 {font-family: serif;font-size: 16pt; color:blue; text-align:center}
a:link {font: Arial Black #ff00ff 10px}
a:visited {text-decoration:none}

Cascading Style Sheet for Printing

Print/Screen Media

Use the Display property with the value none;
<link rel="stylesheet" href="print.css" media="print" type="text/css" />

Remember!
Don't confuse the colon(:) with the semi-colon (;) in the style definition.
Never use quotes in embedded or external style sheet definitions

Define Classes and IDs
Div and Span Elements
Pseudo Classes
Drop Caps
 Drop Shadow
Display Attributes
Web Design with XHTML Part II
Prince George's Community College
Doris Cuffey, Instructor