Cascading Style Sheets - CSS - North Texas PC User`s Group

Download Report

Transcript Cascading Style Sheets - CSS - North Texas PC User`s Group 

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?
• <div> is basic element of page design
• Box model – margin, border, padding &
content
• Classes – contain the style definitions
Ex. <div class=“header”>
.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 <head> 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