Cascading Style Sheets CSS

1
Cascading Style Sheets - CSS

• December 20, 2008
• NTPCUG
• Expression Web SIG

2
What is CSS?

• CSS is a language that works with HTML documents
  to define the way content is presented. The
  presentation is specified with styles that are
  placed (1) directly into HTML elements, (2) the
  head of the HTML document, or (3) in separate
  style sheet files.
• Style sheets contain a number of CSS Rules. Each
  rule selects elements in an HTML document. These
  rules define how the elements will be styled.

3
What is Cascading?

• Cascading means that styles can fall (or cascade)
  from one style sheet to another. The cascade is
  used to determine which rules will take
  precedence and be applied to a document.
• Browser style sheet ? User style sheet ? Author
  style sheet ? Header styles ? Inline styles

4
CSS Biases

• Dont use tables to define layout
• Dont use frames to define layout
• Advantages
• Fluid design
• Easier design control maintenance
• Increased accessibility
• Search-engine friendly

5
What do you have to know?

• ltdivgt is basic element of page design
• Box model margin, border, padding content
• Classes contain the style definitions
• Ex. ltdiv classheadergt
• .header positionrelative colorblue
  width600px

6
Vocabulary

• Rule or rule set statement consisting of a
  selector and a declaration block
• Selector name of an HTML element (or tag), like
  div, p, h1, a,
• Declaration block list of properties and values
  to apply to the selector
• Properties examples are color, position,
  margin, padding, border, background, etc.
• Class name of a rule set that can be referenced
  (used) by an HTML element.

7
Types of Rule Sets

• Selector e.g., div, p, h1, h2, a
• Class e.g., .header, .left, .footer, .content
• ID same as class, but only used once on a HTML
  page (e.g., header)
• Placed in the ltheadgt section of a page or in a
  separate style sheet.

8
Resources

• 2 Reference handouts
• Sample page handouts
• NTPCUG SharePoint site
• Books
• Web sites
• ASP.NET user group
• On line tutorials and web casts

9
Demonstrations References

• Box model
• Anatomy of a page
• Handout on CSS
• 4 examples
• Basic positioning
• Three column layout
• Navigation lists
• Suckerfish
• Books
• Sams Teach Yourself CSS in 10 Minutes, Weakley
• Cascading Style Sheets by Example, Callihan, Que
• Sitepoint books
• Positioning tutorial