Cascading Style Sheets - CSS December 20, 2008 NTPCUG Expression Web SIG

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”.

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

CSS Biases Don’t use “tables” to define layout Don’t use “frames” to define layout Advantages –Fluid design –Easier design control & maintenance –Increased “accessibility” –Search-engine friendly

What do you have to know? is basic element of page design Box model – margin, border, padding & content Classes – contain the style definitions Ex..header { position:relative; color:blue; width:600px;}

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.

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 section of a page or in a separate style sheet.

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

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