1. Cascading Style Sheets Please use speaker notes to get complete information! Cascading Style Sheets

2. Types of CSS Separate style sheets that can be applied to multiple pages at a site Inline style that can be embedded in the HEAD of a page to be applied to that page Inline style that can be embedded in the BODY of the page for an individual element If all three are used in a single page, they will all be applied to the elements on the page. If there is a conflict, the level that is closest to the element in conflict will apply. That means if the separate style sheet says color is blue and the style in the HEAD says it is red, then it will be red. If the separate style sheet or the style in the HEAD says the color is green and the style embedded in the body for an individual item says it should be orange, then it will be orange. Style uses

3. This uses a style sheet <LINK HREF="testcss1a.css" REL="STYLESHEET” TYPE="text/css"> H3 {color:purple; font-family: "Times New Roman"} This is a H1 heading This is outside a paragraph! This is inside a paragraph! This is a H2 header inside a paragraph... This is a H3 header inside a paragraph... Note H3 is done with embedded style on this page This is just a line - the paragraph has not been closed. This is a line following the opening of another paragraph. Some code for HTML entity format In coding HTML, you should use "for the quotation mark " and & for the ampersand as well as < for the less than sign and > for the greater than sign because these have special meanings in HTML. Remember also that which stands for non-breaking space can be used to put extra spaces on your page. See HTML code for the characters used. This is a paragraph with the color changed by in line style. Now we are back to the regular paragraph definition from the external style sheet. BODY {color:green; background:pink; } H1, H2 {font-family: verdana, sans-serif; color: red; } H3 {color:blue; font-family: verdana, sans-serif; } P {color: blue; font-family: "Times New Roman", serif; } testcss1a.css testcss1.html Testcss1.html uses the style sheet testcss1a.css

4. BODY {color:green; background:pink; } H1, H2 {font-family: verdana, sans-serif; color: red; } H3 {color:blue; font-family: verdana, sans-serif; } P {color: blue; font-family: "Times New Roman", serif; } testcss1a.css Style syntax: ruleselector declaration propertyvalue braces Style syntax: A syntax rule has a selector followed by a declaration which includes a property and a value. The declaration is enclosed in braces. NOTEdeclaration NOTE: elements within the declaration are separated with a semi-colon. selector In the case of multiple selectors, separate with a comma. declaration property value This designates that BODY will have a default font color of green and a default background color of pink.

5. This uses a style sheet H3 {color:purple; font-family: "Times New Roman"} This is a H1 heading. This is a paragraph with the color changed by in line style. Now we are back to the regular paragraph definition from the external style sheet. Inline style When STYLE is embedded in the HEAD, it is setting the style for the page it which it is embedded. In this example, the style is being set only for H3 headers. The STYLE here is being set for the particular element - in this case a paragraph. The paragraph designated will have a font color of orange. Note: The paragraph should have a for clarity, but in fact a paragraph is closed when another begins, when headers are used etc.

6. testcss1.html BODY {color:green; background:pink; } (from external css sheet) H1, H2 {font-family: verdana, sans-serif; color: red; } (from external css style sheet) External style sheet code: H3 {color:blue; font-family: verdana, sans-serif; } Embedded/inline STYLE in HEAD: H3 {color:purple; font-family: "Times New Roman"} Conflict: Embedded code takes precedence. From external style sheet: P {color: blue; font-family: "Times New Roman", serif; } External style sheet code: P {color: blue; font-family: "Times New Roman", serif; } Embedded/inline STYLE in : This is a paragraph with the... Conflict: There is a conflict on the color of the text in the particular paragraph with the embedded style. The embedded/inline style takes precedence. Other paragraphs remain blue.

7. In coding HTML, you should use "for the quotation mark " and & for the ampersand as well as < for the less than sign and > for the greater than sign because these have special meanings in HTML. Remember also that which stands for non-breaking space can be used to put extra spaces on your page. See HTML code for the characters used. Information given in testcss1.html about HTML code for characters

8. Cascading Style Sheet test This is a header This is a sentence after the header. The first cell The second cell This is a paragraph. This is a header after a paragraph This is another paragraph. With a second line This is another header This is a paragraph again. This paragraph goes on and on and on and on and on and on and on and on and on and on and on and on and on and on to make sure that it wraps! This is trying to put a header inside a paragraph. This is another try! BODY { font-family: "Times New Roman", "Times Roman", serif; color: green; background: pink; margin-top: 1.5in; margin-left:.5in; margin-right:.5in } P { text-indent:.5in; margin-top:.25in; color: blue } TABLE { background: white; } TD { color: orange; } H1, H2, H3 { font-family: Helvetica, Arial, sans-serif; color: red; } Css1html.html and css1.css

9. BODY { font-family: "Times New Roman", "Times Roman", serif; color: green; background: pink; margin-top: 1.5in; margin-left:.5in; margin-right:.5in } P { text-indent:.5in; margin-top:.25in; color: blue } This is a header This is a sentence after the header. The first cell The second cell This is a paragraph. This is a header after a paragraph This is another paragraph. With a second line This is another header This is a paragraph again. This paragraph goes on and on and on and on and on and on and on and on and on and on and on and on and on and on to make sure that it wraps! This is trying to put a header inside a paragraph. This is another try! TABLE { background: white; } TD { color: orange; } H1, H2, H3 { font-family: Helvetica, Arial, sans-serif; color: red; } Code, separate style sheet and output - css1html.html and css1.css

10. More CSS BODY { font-family: "Times New Roman", "Times Roman", serif; color: red; background: pink; margin-top: 1.5in; margin-left:.5in; margin-right:.5in } P { text-indent:.5in; margin-top:.25in; color: blue } TABLE { background: white; } TD { color: orange; } H1, H2, H3 { font-family: Helvetica, Arial, sans-serif; color: green; } This is a header This is a sentence after the header. Notice that it is in red because that is the color selected for the body default. The first cell The second cell This is a paragraph. Again, we need it to go on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on to see the wrap! This is a header after a paragraph This is data that is outside of a header and outside of a paragraph so it is red! cssinhead1.html

11. BODY { font-family: "Times New Roman", "Times Roman", serif; color: red; background: pink; margin-top: 1.5in; margin-left:.5in; margin-right:.5in } P { text-indent:.5in; margin-top:.25in; color: blue } TABLE { background: white; } TD { color: orange; } H1, H2, H3 { font-family: Helvetica, Arial, sans-serif; color: green; } cssinhead1.html

12. css2.css BODY { font-family: "Times New Roman", "Times Roman", serif; color: green; font-weight: bold; text-align: center; margin-left: 1.5in; margin-right: 1.5in; background-image: url(CISa.gif); background: aqua; } P { text-indent:.5in; margin-top: 1in; color: blue; background-image: url(flag.gif); } BLOCKQUOTE { color: #EEAABB; font-style: italic; font-size: 48pt; } H1, H2, H3 { font-family: Helvetica, Arial, sans-serif; color: red; text-decoration: underline; text-transform: uppercase; font-size: 36pt; }.CENTER { text-align: center; color: pink; }.RIGHT { text-align: right; color: orange; font-style: italic; font-weight: bold; } Note the background image is overridden by the background color and does not show.

13. CLASS.CENTER { text-align: center; color: pink; }.RIGHT { text-align: right; color: orange; font-weight: bold; } This is in the table HELLO WORLD HI BYE

14. BODY { font-family: "Times New Roman", "Times Roman", serif; color: green; font-weight: bold; text-align: center; margin-left: 1.5in; margin-right: 1.5in; background-image: url(CISa.gif); } P { text-indent:.5in; margin-top: 1in; color: blue; background-image: url(flag.gif); } BLOCKQUOTE { color: #EEAABB; font-style: italic; font-size: 48pt; } H1, H2, H3 { font-family: Helvetica, Arial, sans-serif; color: red; text-decoration: underline; text-transform: uppercase; font-size: 36pt; } css3.html.CENTER { text-align: center; color: pink; }.RIGHT { text-align: right; color: orange; font-style: italic; font-weight: bold; }

15. cssinr1.html.OUTLINE { border: solid; border-width: medium; border-color: brown; margin-left: 30%; margin-right: 30%; background-color: rgb(144,225,255); }.PICBOX { border: solid; border-width: medium; border-color: brown; margin-left: 26%; margin-right: 26%; background-image: url(CISa.gif); } cssinr2.html.OUTLINE { border: solid; border-width: medium; border-color: brown; margin-left: 30%; margin-right: 30%; background-color: rgb(144,225,255); } DIV.PICBOX { border: solid; border-width: medium; border-color: brown; margin-left: 26%; margin-right: 26%; background-image: url(CISa.gif); } cssinr1.html and cssinr2.html Segments of the embedded STYLE: In cssinr1.html the CLASS called PICBOX is shown with a dot in front indicating it is a CLASS that can be applied to a variety of things. In cssinr2.html, it is coded as DIV.PICBOX which means that the CLASS called PICBOX can only be applied to divisions. The developer can choose to apply PICBOX to a division or not but it cannot be applied to anything else. It’s use is limited.