Web Standards - Richard Jones

Download Report

Transcript Web Standards - Richard Jones 

Cascading Style Sheets
Presented By
Randal Rust
July 17, 2002
r2communications.com
[email protected]
Agenda
•
•
•
•
•
•
•
•
•
•
What is CSS?
Adding Styles to Your Page
Basic Structure
Inheritance & the Cascade
Elements and Boxes
Using CSS for Layout
XHTML
Organizing a Style Sheet
Validation
CSS Examples
What Is CSS?
• Cascading Style Sheets
• Controls the presentation of HTML elements,
including size, placement, color and font
• Intended to replace table-based layouts, frames
and other presentational hacks
What is CSS?
• CSS is the W3C Standard for controlling the
visual presentation of web pages
• Essentially a set of page-layout tools
• Intended to give the designer control over the
display of the page, similar to what they have in
InDesign or Quark Xpress
Benefits of CSS
•
•
•
•
•
•
•
Conserve bandwidth
Reduce development time and maintenance
Increased accessibility
Conformance to Section 508 and WCAG 1.0
More sophisticated, cleaner appearance
Increased readability of documents
Easier to prepare content for delivery on multiple
media devices
CSS Drawbacks
• Not fully supported by NN 4
– Netscape 4 has little support for most of CSS 1
• Broken box model in IE 5
– Width and height of a box is incorrectly calculated
– Fixed in IE 6
• Incomplete implementation of CSS 2 in all
browsers
– This is a minor issue
What is the W3C?
• W3C founded by Tim Berners-Lee, who
developed HTTP, addressing, URL and HTML
• Industry consortium with more than 500 members
• Develops technical standards for the web
What is a W3C Standard?
• Finished specifications are called
“Recommendations”
• Members are supposed to implement them in
their software
• Intended to promote interoperability among
different software and universal accessibility
Why Should You Care?
• W3C recommendations are the foundation of
Web’s future
• Following standards promotes accessibility,
usability and reduces maintenance
Adding Styles to Your Page
Methods of Adding Styles
• Inline
• Embedded
• External
– Linked
– Imported
Inline
• Style appears within the XHTML element
Embedded
• Styles are added to the <head> of the document
• Good method for testing, but poor for
implementation
External: Linked
• Style sheets are linked
External: Imported
• Style sheets are imported using the @import
directive
Basic Structure
Rules
• A style sheet contains “rules” that tell the
browser how do display the elements on a Web
page
p{
Selector
color: #000; }
Declaration
Rule
• A Rule is made up of a Selector and a Declaration
• The Declaration contains a Property and a Value
Basic Structure: Selectors
Types of Selectors
•
•
•
•
•
Element
Contextual
Class
ID
Psuedo-class and Psuedo-element
Basic Structure: Values
Specifying Values
•
All CSS Values can be classified as:
–
–
–
–
–
Keywords
Length Values
Percentage Values
Colors
URLs
Inheritance
and the Cascade
Multiple Style Sheets
• In the presence of multiple style sheets, the user
agent must determine which rule has the most
specificity
• Style precedence is determined in three ways:
– Inheritance
– Specificity Calculations (skipping this)
– The Cascade
Inheritance
• Relies on parent>child relationships
• Generally, Child Elements inherit styles from
Parent Elements
In this example, the style has been
applied to the BODY, and it will be
inherited by the P.
Styles defined in the BODY element are
inherited by most of the child elements.
The Cascade
Example: p.instructions
• Find all declarations that contain a matching selector
• Sort by weight and origin (user agent, user, author)
– User Agent>Author>User
• Sort by specificity
– Elements with higher specificity have more weight
• Sort by order
– The later a declaration appears in the style sheet or document,
the more weight it is given
– Imported/Linked>Embedded>Inline>User
Here is our original XHTML file.
Let’s add some more styles to it.
This time, I’ve added two styles for
the P element. One is embedded, the
other is inline.
All three styles are applied to the P.
Now let’s overwrite a style.
Using an inline style, I’ve overwritten
the rule for the P font-size.
I’ve also added another P, so you can
see that it won’t be affected.
Elements and Boxes
Types of Elements
• Block-Level
– Generally items which are displayed on a line by themselves
– p, h1-h6, ul, ol, table, div, body
• Inline
– These elements do not force a line break in the visual display
– a, em, span, images, form inputs
• List-Item
– Elements that include the <li> element
– Specially defined to have a marker (bullet, letter or number)
The Box Model
• The most important part of CSS, if you are going
to use CSS for layout
• All Elements generate a box (Element Box)
• The Element Box tells the browser how much
space an element and its properties occupy
Box Components
• Content
– Set with the WIDTH and HEIGHT properties
• Padding
– Set with the PADDING property
• Border
– Set with BORDER property
• Margin
– Set with MARGIN property
Box Components
Margin
Padding
Content
Border
Box Width
The Importance of Boxes
• Understanding the CSS Box Model is the most
critical factor in using CSS for layout
• Any version of IE before 6 renders boxes
incorrectly
Using CSS for Layout
The Basics
• Sketch out your page
• Each area becomes a “containing box”
• Give each box a unique name
• This unique name will correspond to an ID Rule in your
style sheet
• Use inheritance and the cascade to minimize how many
rules are in your style sheet
This is a page from my web site.
I’ll use it to show where the boxes are.
XHTML
The Best Friend of CSS
What is XHTML?
• XHTML is XML
• It is HTML rewritten in XML
What Makes HTML XHTML?
• Include the proper !DOCTYPE (strict, transitional,
frameset) and Namespace in each page
• Write all Tags in lowercase
• Quote all Attribute values
• Close all Tags
• Close empty Tags (ex. <hr />)
Benefits of XHTML
• Easier transition to XML (because it’s XML)
• Cleaner, more logical markup
• XHTML can be read on a wider variety of devices
• Well-formed pages are more likely to render properly in the
major browsers
• XHTML code is easier to parse and manipulate with the
DOM
Thanks to
Jamie Gehrlich
Thanks to
Mike Krisher
Why Is It Important to CSS?
• A style is only applied to an element if the tag is
closed
Organizing a Style Sheet
How I Write a Style Sheet
• HTML, Body
• Positioning Elements
• XHTML Elements
You can use the “dot” selector to create
subclasses of elements.
This is a good method to follow, as it
makes it easier to find a class in your
style sheet if you need to edit it.
Grouping Properties
• Positioning rules
– Display, position, clear, float, top, left
• Color and Background
– Text color and background properties
• Font rules
– Family, size, line-height, weight
• Border, Margin, Padding
– Top, right, bottom, left
• Text-Alignment
– Left, right, center
Validation
Test Until It Hurts
• Start with the most recent release of Mozilla
• View in IE 6
• View in IE 5
Validate
• Run each CSS file through the W3C CSS validator
• Run each page through the W3C HTML validator
CSS Examples
CSS Examples
• Build a Rollover with CSS
• Table vs. CSS Layout
• Style Switcher
• Printing with CSS
• Rendering in IE 6, Mozilla and NN 4.x
Cascading Style Sheets
Presented By
Randal Rust
July 17, 2002
r2communications.com
[email protected]
Extra Slides
Keyword Values
• Explicit values
• Not case-sensitive
Example: border-style: dotted
Length Values
• Depending on the property, the value can be positive or
negative
• The length value should always be followed by the type of
units being used (ex. 6px, 12em)
• Two types of length values:
– Absolute Units
• Always measured the same way
• Inches, Centimeters, Millimeters, Points, Picas
– Relative Units
• Measured in relation to something else
• Ems, X-height, Pixels
Percentage Values
• Can be positive or negative
• Always followed by the percent sign (%)
• Always computed relative to another value
– The window
– The containing box
Colors
• Five ways to specify colors in CSS
–
–
–
–
–
Hex-Pair Notation
Short Form Hex-Pair Notation
RGB Percentages
RGB Values
Keyword
Hex-Pair Notation
• Most common method
• First pair is the red, second is the green, third is
the blue (ex. #990000)
• Each pair is a hexidecimal notation in the range
00 to FF
– #ff0000 (pure red)
– #00ff00 (pure green)
– #0000ff (pure blue)
Short Form Hex-Pair Notation
• Shorter form of the six-digit notation
• Digits are replicated to find the six-digit value
Examples:
#990000 = #900
#000000 = #000
RGB Percentages
• Specify the values in a range from 0%-100%
• Allows decimal values
Example:
Black = rgb(0%, 0%, 0%)
RGB Values
• Specify the RGB value in the range of 0 to 255
• This range is the decimal equivalent of
hexidecimal
Examples:
Green = (0, 255, 0) same as #00ff00
White = (255, 255, 255) same as (#ffffff)
Keywords
• 16 colors
• Based on the original Windows VGA colors
• May be recognized by browsers, but are not part
of any standard, and therefore should not be
used for final production
URLs
• Inside of a style sheet, they are most commonly used for
images
• URLs are supposed to be relative to the style sheet
• Netscape 4 gets it wrong, and needs the absolute URL
Example:
background: url(siteGraphics/header.jpg)