1. 1 WDMD 170 – UW Stevens Point WDMD 170 Internet Languages eLesson: CSS Introduction to Style Sheets (NON-audio version) © Dr. David C. Gibbs 2003-04

2. 2 WDMD 170 – UW Stevens Point Objectives Recognize the purpose for using style sheets. Identify the three methods for using styles in an HTML document. Create inline, embedded, and external styles. Understand the “cascade” in CSS.

3. 3 WDMD 170 – UW Stevens Point WHY use Style Sheets? Allow web authors to separate structure from content –Structure – provided by descriptive “rules” dictated by the styles Layout Design –Content – provided by the HTML document Increases consistency between various pages of a website Allows you to reduce typing –Using one style sheet for multiple pages –Specifying information once rather than for each instance of an object Increases the versatility of web pages

4. 4 WDMD 170 – UW Stevens Point Three methods of supplying styles Inline: adding style where it is needed. Embedded: in a … block in the section. External: in a separate file.

5. 5 WDMD 170 – UW Stevens Point CSS Terminology Selector: The element you have decided to modify Property: Names a characteristic of a selector Value: Describes how you want to modify a particular property Declaration: a combination of a property and a value Syntax h1{color: blue;} selectorpropertyvalue declaration

6. 6 WDMD 170 – UW Stevens Point Methods of using CSS in your pages inline style Heading 1 using an inline style embedded style external style sheet

7. 7 WDMD 170 – UW Stevens Point CSS: Inline method Styles are added within an HTML tag here is some regular text without style regular text in 20 pt h1 text in 30 pt Verdana – inline style. Code sample: inlineCSS.htminlineCSS.txt inlineCSS.htminlineCSS.txt

8. 8 WDMD 170 – UW Stevens Point CSS: Inline method First, a paragraph is defined without style (line 5). A paragraph is defined in which the font-size is specified in “points” (line 6). Text within the h1 header is defined with an altered font-size, a color, and a different typeface (line 7). The color name works as well. 1. 2. 3. 4. 5. here is some regular text without style 6. regular text in 20 pt 7. h1 text in 30 pt Verdana – inline style. 8. 9.

9. 9 WDMD 170 – UW Stevens Point CSS: Inline method Styles apply only within the delimiting tags. Quotes are used because it’s HTML: attrib=“value” style=“ ”. Multiple styles concatenated using a semicolon “;”. regular text in 20 pt h1 text in 30 pt Verdana – inline style.

10. 10 WDMD 170 – UW Stevens Point eTask 1: Inline styles 1.Create an HTML document using inline styles. 2.Use the tag, the tag, and any other appropriate tags to illustrate inline styles. 3.Write the document so it explains and demonstrates how inline styles work. 4.Save your document as InlineStyles.htm in your CSS_I folder (that’s “css roman numeral one” folder).

11. 11 WDMD 170 – UW Stevens Point Styles are added within the … tag in the section of the HTML document h1 {color: green} em {background-color: red; color: white} p {font-size: 18pt}.blue {color: #0000FF} Embedded Styles CSS: Embedded method Code sample: embeddedCSS.htmembeddedCSS.txt embeddedCSS.htmembeddedCSS.txt

12. 12 WDMD 170 – UW Stevens Point CSS: Embedded method Styles have been added within the … tag Heading (using h1 and its default size) Heading (using h1 with blue "class") paragraph text (within the paragraph tag - 18 pt) more paragraph text but making use of the blue class more Text in italics, making use of em more Text italic text again Code sample: embeddedCSS.htmembeddedCSS.txt embeddedCSS.htmembeddedCSS.txt

13. 13 WDMD 170 – UW Stevens Point eTask 2: Embedded styles 1.Create an HTML document using embedded styles. 2.Use (minimally) the tag, the tag, and any other appropriate tags to illustrate embedded styles. 3.Write the document so it explains and demonstrates how embedded styles work. 4.Save your document as EmbeddedStyles.htm in your CSS_I folder.

14. 14 WDMD 170 – UW Stevens Point CSS: External method Styles are written in a file saved with a.css extension FILENAME: external.CSS h1 {font-family: Arial} a {text-decoration:none} a:hover{text-decoration:underline; color:red; background- color: #CCFFCC} li em {color:red; font-weight: bold} ul {margin-left: 2cm} ul ul {text-decoration: line-through; margin-left:.5cm} NOTE: This file must be somehow “included” by the document!

15. 15 WDMD 170 – UW Stevens Point CSS: External method 1. 2. 3. 4. External Styles 5. 6. 7. Shopping list for Monday 8. 9. Milk 10. Bread 11. 12. Pita bread 13. Black bread 14. French baguettes 15. 16. 17. Rice 18. Potatoes 19. Pizza with pepperoni 20. 21. Order here 22. 23. Code sample: externalCSS.htm externalCSS.txt externalCSS.htmexternalCSS.txt

16. 16 WDMD 170 – UW Stevens Point CSS: External method Code sample: externalCSS.htm externalCSS.txt externalCSS.htmexternalCSS.txt Lots of questions emerge from this style sheet! See how many you can track down! 1.Why is the header in Arial font? 2.Why are some list items displayed as “strikeout” while others are not? 3.How did “with pepperoni” get red while “Monday” did not? 4.“Order here” is actually a link (view the page and try it). a.Where did the underline go? b.“Hover” over the text and watch what happens!

17. 17 WDMD 170 – UW Stevens Point eTask 3: External styles 1.Create an HTML document that makes use of external styles. 2.Use the tag, the tag, and any other appropriate tags to illustrate external styles. 3.Write the document so it explains and demonstrates how external styles work. 4.Save your document as ExternalStyles.htm in your CSS_I folder.

18. 18 WDMD 170 – UW Stevens Point The “Cascade” A set of rules which determines the order in which multiple style sheets are applied to an HTML document. In other words, which style prevails if inline, embedded, and external styles all exist for a specific selector?

19. 19 WDMD 170 – UW Stevens Point Cascading Order Which style will be used when there is more than one style specified for an HTML selector? The simplest answer is given by “proximity”; the style closer to the selector is used. From these options, browser default external style sheet internal style sheet (inside the tag) inline style (inside HTML element) … an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the tag, in an external style sheet, and in a browser (a default value).

20. 20 WDMD 170 – UW Stevens Point Cascading Order You can demonstrate the cascade by using all three methods in the same document, impacting the same selector. In fact, examine the use of in the three examples given in this eLesson. [Print or view each of inlineCSS.htm, embeddedCSS.htm, and externalCSS.htm so you can see each of their uses.]inlineCSS.htmembeddedCSS.htmexternalCSS.htm If you use all three in the same document, you can see how the priorities are established.

21. 21 WDMD 170 – UW Stevens Point Assignment: Cascading styles 1.Create an HTML document making use of all three methods: inline, embedded, and external styles. 2.The tag is a good choice to demonstrate the “cascade”, and you may copy in the styles from this eLesson. 3.The content of the document should describe how the “cascade” works. 4.Save your document as cascadeExample.htm in your CSS_I folder.

22. 22 WDMD 170 – UW Stevens Point Assignment: Implement an external style sheet in your e-Folio. 1.Add a very simple external style sheet to the index file of your e-Folio. 2.For example, a.Create myStyleSht.CSS, containing the linemyStyleSht.CSS body {font-family: verdana} b.Add these lines to the of your index.htm file: c.Make sure the css file is in the same directory as your index.htm file. 3. This should display your document in a new font!

23. 23 WDMD 170 – UW Stevens Point Summary Styles may be applied –Inline –Embedded –External The “cascade” of styles can be determined by proximity to the selector.

24. 24 WDMD 170 – UW Stevens Point End of eLesson Jump to the Beginning of this eLesson WDMD 170 Course Schedule D2L Courseware Site