1 / 14

References: W3Schools (w3schools)

S t y l i n g your page (font type, font size, colors, text decoration, alignment, set margin, table padding, etc.). References: W3Schools (http://www.w3schools.com).

kyria
Download Presentation

References: W3Schools (w3schools)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Styling your page(font type, font size, colors, text decoration, alignment, set margin, table padding, etc.) References: W3Schools (http://www.w3schools.com)

  2. Styling 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. How to change the font or text attributes without using <font> tag since it’s deprecated? ? How

  4. How #1 (Inline style) Previously, you learnt about style attribute applied to paragraph. Recall this example (from previous slide): <p style="color: red; font-family: arial; font-size: 14pt"> This is a paragraph </p> 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. How #1 (Inline style) <p style="color: red; font-family: arial; font-size: 14pt"> This is a unique paragraph with its own style. </p> 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.

  6. How #2 (Use <style></style> html tag)

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

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

  9. How #2 (Use <style></style> html tag) • Use notepad, and do this Example: <html> <head> <style> h1 {color: red} h3 {color: blue} </style> </head> <body> <h1>This is header 1</h1> <h3>This is header 3</h3> </body> </html> 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 <style> tag.

  10. How #3 (Use external style sheet)

  11. How #3 (Use external style sheet) • 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 <link> tag. The <link> tag goes inside the head section.

  12. How #3 (Use external style sheet) • Example: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> An external file which contains CSS properties written by using notepad, but with the extension name “XXX.css”

  13. How #3 (Use external style sheet) • Example of the contents for “mystyle.css”: body { color: black; background-color: #ffffff; } h1,h2,h3 { font-family: verdana, arial, "sans serif"; } 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. How #3 (Use external style sheet) • You can try this example now!!!

More Related