1. Prepared by ackoo Styli n g your page (font type, font size, colors, text decoration, alignment, set margin, table padding, etc.) References: W3Schools (http://www.w3schools.com)

2. Prepared by ackoo Styli n g your page (font type, font size, colors, text decoration, alignment, set margin, table padding, hypertext colors etc.) Overview: How #1 (Inline style) How #2 (internal style) How #3 (external style)

3. Prepared by ackoo How to change the font or text attributes without using tag since it’s deprecated? ? How

4. Prepared by ackoo How #1 (Inline style) Previously, you learnt about style attribute applied to paragraph. Recall this example (from previous slide): This is a paragraph Notice the way of writing the style attribute (see the red text) is different from the way of writing other attributes. It can be lengthy... This attributes are called as CSS (cascading style sheet) properties.

5. Prepared by ackoo This is a unique paragraph with its own style. This approach of doing style is called as Inline style An inline style should be used when a unique style is to be applied to a single occurrence of a html element such as to this unique paragraph. How #1 (Inline style)

6. Prepared by ackoo How #2 (Use html tag)

7. Prepared by ackoo Use notepad, and do this Example: h1 {color: red} h3 {color: blue} This is header 1 This is header 3 tag is a container tag, it must reside in tag. Try to change the text attribute (such as color, font-family, font- size, text-align, text-decoration, etc) to different styles. Do figure out how to do that. How #2 (Use html tag)

8. Prepared by ackoo h1 { font-family:"times new roman"; font-size:20pt; text-align:center; text-decoration:underline; color:green; } Add more styles (CSS properties) to, and test it out. How #2 (Use html tag) Use notepad, and do this Example: h1 {color: red} h3 {color: blue} This is header 1 This is header 3

9. Prepared by ackoo For this approach, we called it as: Internal Style Sheet An internal style sheet should be used when a single html document has a unique style. You define internal styles in the head section with the tag. How #2 (Use html tag) Use notepad, and do this Example: h1 {color: red} h3 {color: blue} This is header 1 This is header 3

10. Prepared by ackoo How #3 (Use external style sheet)

11. Prepared by ackoo An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file (what file is that? Anyone can guess??). Each html page must link to the style sheet using the tag. The tag goes inside the head section. How #3 (Use external style sheet)

12. Prepared by ackoo Example: How #3 (Use external style sheet) An external file which contains CSS properties written by using notepad, but with the extension name “XXX.css”

13. Prepared by ackoo Example of the contents for “mystyle.css”: body { color: black; background-color: #ffffff; } h1,h2,h3 { font-family: verdana, arial, "sans serif"; } How #3 (Use external style sheet) p, table { font-family: verdana, arial, "sans serif"; margin-left: 10pt; } a:link {color:darkgreen} a:visited {color:grey} a:active {color:darkgreen} a:hover {color:mediumblue}

14. Prepared by ackoo How #3 (Use external style sheet) You can try this example now!!!