Internet Web Publishing III

Internet Web Publishing III

Welcome toWelcome to

Internet Web Publishing III

Intro to Cascading Style Sheets

Patricia Roberts

Welcome toWelcome to

Cascading Style Sheets

Cascading Style Sheets

WHY?

Cascading Style Sheets

WHY do we

need them?

It’s just MORE STUFF!

Original HTML Philosophy

Original HTML Philosophy to have basic text file that would be

interpreted by the browser

Original HTML Philosophy to have basic text file that would be

interpreted by the browser quickly downloaded

Original HTML Philosophy to have basic text file that would be

interpreted by the browser quickly downloaded

But:

Original HTML Philosophy to have basic text file that would be

interpreted by the browser quickly downloaded

But: final page format depended upon browser

used

Original HTML Philosophy to have basic text file that would be

interpreted by the browser quickly downloaded

But: final page format depended upon browser

used not much control over placement of some

objects

Original HTML Page LayoutCould be Controlled by

Original HTML Page Layout Could be Controlled by Using HTML tag extensions

Original HTML Page Layout Could be Controlled by Using HTML tag extensions Converting text to images

Original HTML Page Layout Could be Controlled by Using HTML tag extensions Converting text to images Controlling page layout with tables

But There Were Drawbacks

But There Were Drawbacks

Using HTML tag extensions

But There Were Drawbacks

Using HTML tag extensions– not all browsers supported the extensions

But There Were Drawbacks

Using HTML tag extensions– not all browsers supported the extensions

Converting text to images

But There Were Drawbacks

Using HTML tag extensions– not all browsers supported extensions

Converting text to images– slowed page download speed

But There Were Drawbacks

Using HTML tag extensions– not all browsers supported extensions

Converting text to images– slowed page download speed

Controlling page layout with tables

But There Were Drawbacks

Using HTML tag extensions– not all browsers supported extensions

Converting text to images– slowed page download speed

Controlling page layout with tables– Makes code more complex and difficult to

interpret by coder– May slow download speeds

Other Original HTML drawbacks Content not separated from design within

the document (code tags and content intertwined)

Other Original HTML drawbacks Content not separated from design within

the document (code tags and content intertwined)

In order to apply a style, must apply tag to each occurrence individually.

Other Original HTML drawbacks Content not separated from design within

the document (code tags and content intertwined)

In order to apply a style, must apply tag to each occurrence individually.

Not possible to define elements of style and follow with content

Solution?

Solution?

Solution?

Style: rule which defines the appearance of an element in the document.

With Styles

Instead of relying on browsers to interpret the document, the appearance of a tag is explicitly defined.

When browser receives text file from the server, also receives the rules for displaying the document.

The collection of styles for a web page is known as a STYLE SHEET

Styles Limitations of HTML led to development of

style sheets Style sheets use a common language and

follow common rules; language is known as Cascading Style Sheets (CSS)*

CSS developed by W3C Developed to SUPPLEMENT HTML

*CCS sometimes used, Proprietary CSS first developed by Netscape

CSS First CSS standard, CSS1, released in 1996 CSS2 was released in 1998 Formatting web pages quite different in

CSS from HTML CSS provides several tools not available in

HTML

CSS Browser support for CSS is uneven I.E. best for CSS1 Netscape tried to have own version of CSS;

N 4.7 not fully CSS1 compliant No browser fully compliant with CSS2 Test in as many browsers as possible

CSS References The World Wide Web Consortium

http://www.w3c.org

The Web Standards Projecthttp://www.webstandards.org/css/

CSS bugs and workaroundshttp://www.css.nu/pointers/bugs.html

Little Shopr of CSS Horrorshttp://www.haughey.com/csshorrors/

Solution: Styles

Four Types Inline Styles Embedded (Global) Styles External (Style Sheets)

Style Uses

Inline Style Section

Embedded Style Document

External (Linked) Style Sheet Web site

Solution: Styles

Inline StylesStyle affects an isolated instance of an HTML tag

Only the tag defined is affected, other tags in the document are not

Solution: Styles

Embedded (Global) Styles

Applies to a single document, tags included IN the documentAny tag can be defined and the style affects the

entire HTML document

In other words, the new style definition replaces the old definition for that tag throughout the document

Solution: Styles

Linked (or external) style sheetsTags are defined within a text file which is saved

as its own file with a .CSS extension

CSS Styles If need to format a single section in your

webpage, then you might use the inline style

If need to format all instances of an element in a Web page, then use the embedded or global style

If need to format elements for an entire site, then use a linked style sheet.

Uses of Styles

To Use

Define a tag within a section of a document

Inline

Style

Define a tag throughout a document

Embedded or Global Style

Define a tag throughout an entire Web site

Linked Style Sheet

Using Inline Styles

To Use Do this

Inline Style Add the “style” property to the HTML tag

How

<tag style=“style declarations”>

“style declarations”= attribute1:value1; attribute2:value2

Using Inline Styles

To Use Do this

Inline Style Add the “style” property to the HTML tag

Examples

<H1 STYLE=“color:red; font-family:sans- serif”>

Another example

Using Embedded Styles

To Use Do this

Linked Style Sheet Create an embedded style

How

<STYLE TYPE=“style sheet language”>

There are several style sheet languages, but the default is “text/css” for CSS

Using Embedded Styles

Important Terms in Embedded Styles

Selector = Element in HTML document (such as Header, Paragraph)

Declaration= the collection attibutes and values applied to the selector(s)

Using Embedded Styles

To Use Do this

Linked Style Sheet Create an embedded styleuse Selectors

Selectors= elements in y

Exampe

<STYLE TYPE=“style sheet language”>

There are several style sheet languages, but the default is “text/css” for CSS

Using Styles

To Use Do this

Inline Style Add the “style” property to the HTML

tag

Define a tag throughout a document

Embedded or Global Style

Define a tag throughout an entire Web site

Linked Style Sheet

Using Styles

To Use Do this

Inline Style Add the “style” property to the HTML

tag

Define a tag throughout a document

Embedded or Global Style

Define a tag throughout an entire Web site

Linked Style Sheet

Styles Inheritance Precedence

Back to Classroom Learning Page