1. Internet Web Publishing III

3. Intro to Cascading Style Sheets Patricia Roberts

5. Cascading Style Sheets

6. WHY?

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

8. Original HTML Philosophy

9.  to have basic text file that would be interpreted by the browser

10. Original HTML Philosophy  to have basic text file that would be interpreted by the browser  quickly downloaded

11. Original HTML Philosophy  to have basic text file that would be interpreted by the browser  quickly downloaded But:

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

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

14. Original HTML Page Layout Could be Controlled by

15.  Using HTML tag extensions

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

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

18. But There Were Drawbacks

19.  Using HTML tag extensions

20. But There Were Drawbacks  Using HTML tag extensions –not all browsers supported the extensions

21. But There Were Drawbacks  Using HTML tag extensions –not all browsers supported the extensions  Converting text to images

22. But There Were Drawbacks  Using HTML tag extensions –not all browsers supported extensions  Converting text to images –slowed page download speed

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

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

25. Other Original HTML drawbacks  Content not separated from design within the document (code tags and content intertwined)

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

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

28. Solution?

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

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

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

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

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

35. CSS References  The World Wide Web Consortium http://www.w3c.org  The Web Standards Project http://www.webstandards.org/css/  CSS bugs and workarounds http://www.css.nu/pointers/bugs.html  Little Shopr of CSS Horrors http://www.haughey.com/csshorrors/

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

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

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

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

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

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

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

43. Using Inline Styles To UseDo this Inline StyleAdd the “style” property to the HTML tag How “style declarations”= attribute1:value1; attribute2:value2

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

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

46. 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)

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

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

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

50. Styles  Inheritance  Precedence

51. Back to Classroom Learning Page