cascading style sheets presented by randal rust july 17, 2002 r2communications.com...

77
Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com [email protected]

Upload: jason-tucker

Post on 27-Mar-2015

219 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Cascading Style SheetsCascading Style Sheets

Presented By

Randal Rust

July 17, 2002

r2communications.com

[email protected]

Page 2: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 3: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 4: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 5: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 6: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 7: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 8: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 9: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Why Should You Care?

• W3C recommendations are the foundation of Web’s future

• Following standards promotes accessibility, usability and reduces maintenance

Page 10: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Adding Styles to Your PageAdding Styles to Your Page

Page 11: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Methods of Adding Styles

• Inline

• Embedded

• External– Linked– Imported

Page 12: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Inline

• Style appears within the XHTML element

Page 13: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Embedded

• Styles are added to the <head> of the document

• Good method for testing, but poor for implementation

Page 14: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

External: Linked

• Style sheets are linked

Page 15: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

External: Imported

• Style sheets are imported using the @import directive

Page 16: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Basic StructureBasic Structure

Page 17: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Rules

• A style sheet contains “rules” that tell the browser how do display the elements on a Web page

• A Rule is made up of a Selector and a Declaration• The Declaration contains a Property and a Value

p {

color: #000; }

Selector

Declaration

Rule

Page 18: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Basic Structure: SelectorsBasic Structure: Selectors

Page 19: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Types of Selectors

• Element• Contextual• Class• ID• Psuedo-class and Psuedo-element

Page 20: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com
Page 21: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Basic Structure: ValuesBasic Structure: Values

Page 22: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Specifying Values

• All CSS Values can be classified as:– Keywords– Length Values– Percentage Values– Colors– URLs

Page 23: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com
Page 24: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Inheritanceand the Cascade

Inheritanceand the Cascade

Page 25: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 26: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Inheritance

• Relies on parent>child relationships

• Generally, Child Elements inherit styles from Parent Elements

Page 27: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

In this example, the style has been applied to the BODY, and it will be inherited by the P.

Page 28: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Styles defined in the BODY element are inherited by most of the child elements.

Page 29: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 30: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Here is our original XHTML file.

Let’s add some more styles to it.

Page 31: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

This time, I’ve added two styles for the P element. One is embedded, the other is inline.

Page 32: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

All three styles are applied to the P.

Now let’s overwrite a style.

Page 33: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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.

Page 34: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com
Page 35: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Elements and BoxesElements and Boxes

Page 36: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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)

Page 37: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 38: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 39: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Box Components

Content

Padding

Margin

Border

Box Width

Page 40: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 41: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Using CSS for LayoutUsing CSS for Layout

Page 42: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 43: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

This is a page from my web site.

I’ll use it to show where the boxes are.

Page 44: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com
Page 45: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com
Page 46: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com
Page 47: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com
Page 48: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com
Page 49: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com
Page 50: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

XHTMLXHTML

The Best Friend of CSS

Page 51: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

What is XHTML?

• XHTML is XML

• It is HTML rewritten in XML

Page 52: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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 />)

Page 53: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 54: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Thanks toMike Krisher

Thanks toJamie Gehrlich

Page 55: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Why Is It Important to CSS?

• A style is only applied to an element if the tag is closed

Page 56: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Organizing a Style SheetOrganizing a Style Sheet

Page 57: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

How I Write a Style Sheet

• HTML, Body

• Positioning Elements

• XHTML Elements

Page 58: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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.

Page 59: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 60: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com
Page 61: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

ValidationValidation

Page 62: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Test Until It Hurts

• Start with the most recent release of Mozilla

• View in IE 6

• View in IE 5

Page 63: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Validate

• Run each CSS file through the W3C CSS validator

• Run each page through the W3C HTML validator

Page 64: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

CSS ExamplesCSS Examples

Page 65: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 66: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Cascading Style SheetsCascading Style Sheets

Presented By

Randal Rust

July 17, 2002

r2communications.com

[email protected]

Page 67: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Extra SlidesExtra Slides

Page 68: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Keyword Values

• Explicit values• Not case-sensitive

Example: border-style: dotted

Page 69: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 70: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Percentage Values

• Can be positive or negative

• Always followed by the percent sign (%)

• Always computed relative to another value– The window– The containing box

Page 71: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

Colors

• Five ways to specify colors in CSS– Hex-Pair Notation– Short Form Hex-Pair Notation– RGB Percentages– RGB Values– Keyword

Page 72: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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)

Page 73: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 74: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

RGB Percentages

• Specify the values in a range from 0%-100%

• Allows decimal values

Example:Black = rgb(0%, 0%, 0%)

Page 75: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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)

Page 76: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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

Page 77: Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

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)