Internet Web Publishing III

Intro to Cascading Style Sheets Patricia Roberts

Cascading Style Sheets

WHY?

Cascading Style Sheets W H Y d o w e n e e d t h e m ? I t ’ s j u s t M O R E S T U F F !

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

 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?

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  The Web Standards Project  CSS bugs and workarounds  Little Shopr of CSS Horrors

Solution: Styles Four Types  Inline Styles  Embedded (Global) Styles  External (Style Sheets)

Style Uses Inline Style Section Embedded Style Document External (Linked) Style SheetWeb site

Solution: Styles Inline Styles Style 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 document Any 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 sheets Tags 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 ToUse 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 UseDo this Inline StyleAdd the “style” property to the HTML tag How “style declarations”= attribute1:value1; attribute2:value2

Using Inline Styles To UseDo this Inline StyleAdd the “style” property to the HTML tag Examples Another example

Using Embedded Styles To UseDo this Linked Style SheetCreate an embedded style How 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 UseDo this Linked Style SheetCreate an embedded style use Selectors Selectors= elements in y Exampe There are several style sheet languages, but the default is “text/css” for CSS

Using Styles To UseDo this Inline StyleAdd 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 UseDo this Inline StyleAdd 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