1 / 22

WWW programming

WWW programming. Lesson 5 Basic styles, stylesheets, spans, div and layering. Basic Styles. 3 ways to apply styles: Within a basic HTML tag As part of the heading section <head> In an external file called stylesheet. Basic Styles. <html> <head> <title>My stylesheet test</title>

nuru
Download Presentation

WWW programming

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. WWW programming Lesson 5 Basic styles, stylesheets, spans, div and layering

  2. Basic Styles • 3 ways to apply styles: • Within a basic HTML tag • As part of the heading section <head> • In an external file called stylesheet

  3. Basic Styles <html> <head> <title>My stylesheet test</title> <style> h1{ color: red; border: thin groove; } </style> </head> <body> <h1>Simple Stylesheet</h1> <p>The first paragraph is unchanged</P> <p style="margin-left: 10%; border: ridge; background: #ffffcc"> But this paragraph is substantially changed by the style formatting done in this section of the document</p> <p>And the last paragraph is unchanged again</P> </body> </html> RECAP from lesson 4 Changing the style for <h1> in the whole document

  4. Basic Styles <html> <head> <title>My stylesheet test</title> <style> h1{ color: red; border: thin groove; } </style> </head> <body> <h1>Simple Stylesheet</h1> <p>The first paragraph is unchanged</P> <p style="margin-left: 10%; border: ridge; background: #ffffcc"> But this paragraph is substantially changed by the style formatting done in this section of the document</p> <p>And the last paragraph is unchanged again</P> </body> </html> RECAP from lesson 4 Changing the style for one paragraph only

  5. The Resulting web page <html> <head> <title>My stylesheet test</title> <style> h1{ color: red; border: thin groove; } </style> </head> <body> <h1>Simple Stylesheet</h1> <p>The first paragraph is unchanged</P> <p style="margin-left: 10%; border: ridge; background: #ffffcc"> But this paragraph is substantially changed by the style formatting done in this section of the document</p> <p>And the last paragraph is unchanged again</P> </body> </html> RECAP from lesson 4

  6. Style Rules • A rule have two parts: a selector and a set of declarations: • body { • background-color: 000255; • } • h1 { • color: #eeebd2; • background-color: #d8a29b; • font-family: “Book Antiqua”, Times, serif; • border: thing groove #9baab2; • }

  7. Classes • You can use classes create your own formatting, that you can call later: <html> <head> <title>The Unofficial LR CC Website - Promo Page 1</title> <style> h1.myway{ color: “#eeebd2”; background-color: “#d8a29b”; font-family: “Book Antiqua”, Times, serif; border: thin groove #9baab2; } </style> </head> <body> <h1 class=myway> This is a heading formatted my way</h1> <h1>This is an unformatted heading</h1> </body> </html>

  8. The resulting web page

  9. The style sheet (an example) body { background-color: "#eeebd2"; margin: 5px 5px 5px 5px; } h1{ color: "#eeebd2"; background-color: "#d8a29b"; font-family: “Book Antiqua”, Times, serif; border: thin groove #9baab2; } h2{ color: "#8b007c"; font-family: “Book Antiqua”, Times, serif; border: thin groove #8b007c; } h3{ color: "#8b007c"; font-family: “Book Antiqua”, Times, serif; }

  10. The style sheet (more..) em{ font-weight: bold; font-style: italic } hr{ margin-right=10%; margin-left=10%; } p.link{ color: "#8b007c"; text-align=Left; font-family: “Lucida Casual”, Times, serif; font-weight: bold; font-size: 10pt; margin-left: 0%; } p{ text-align=justify; font-family: “Bookman Old Style”, Times, serif; margin-left: 10%; }

  11. The style sheet (more..) strong{ font-family: Arial, sans-serif; font-size: 12pt; color: red; } th{ background-color: "#b2a474"; color: "#b8007c"; align=center; } table{ padding: 2pt 2pt 2pt 2pt; } td.firstcol{ background-color: "#00acac"; font-weight: bold; align=center; } table.main{ padding: 0px 0px 0px 0px; }

  12. Notice : no headings body or other tags

  13. Using the Stylesheet <html> <head> <title>Bill Smiggens Inc</title> <link rel=StyleSheet href="./Stylesheet.htm" type="text/css" media=screen> </head> <body bgcolor="#ffffff" text="#362e00"> <! -- start of table --> <table class=main> <tr> <! -- the logo --> <td colspan=2 align="center" bgcolor="#000000"> <img src="hammer.jpg"ALIGN=RIGHT HSPACE=1 VSPACE=0 BORDER=1 WIDTH=750 HEIGHT=50 ALT="Bill Smiggen's hammer image"></td> </tr> Links the stylesheet Will use the respective formatting from the stylesheet

  14. Using the Stylesheet <tr> <td bgcolor="#7cb98b" with="20%" valign="top"> <! -- and then the links --> <h2 align="center">links</h2> <hr with="50%"> <h3> <p class=link><img src="flowers.jpg"ALIGN=Left HSPACE=0 VSPACE=0 BORDER=0 WIDTH=50 HEIGHT=30 ALT="Flowers image">&nbsp; <a href="http://www.yahoo.com">Yahoo</a></p> <p class=link><img src="flowers.jpg"ALIGN=Left HSPACE=0 VSPACE=0 BORDER=0 WIDTH=50 HEIGHT=30 ALT="Flowers image">&nbsp; <a href="http://www.lrc.edu">Lenior-Ryhne</a></p> <p class=link><img src="flowers.jpg"ALIGN=Left HSPACE=0 VSPACE=0 BORDER=0 WIDTH=50 HEIGHT=30 ALT="Flowers image">&nbsp; <a href="http://www.google.com">Google</a></p> <p class=link><img src="flowers.jpg"ALIGN=Left HSPACE=0 VSPACE=0 BORDER=0 WIDTH=50 HEIGHT=30 ALT="Flowers image">&nbsp; <a href="http://www.cnn.com">CNN</a></p> Will use the respective formatting from the stylesheet

  15. Using the Stylesheet <br><hr with=50%"><br> </h3></td> <td with="70%"> <! -- The information --> <h2>About our company</h2> <p>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p> <hr> <h3>More about our company</h3> <p align="center">>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p> <hr with="50%"> </td> </tr> </table> </body> </html> Will use the respective formatting from the stylesheet

  16. The resulting Page

  17. Using the style formats Applies to all h1 headings • h1{ • color: "#eeebd2"; • background-color: "#d8a29b"; • font-family: “Book Antiqua”, Times, serif; • border: thin groove #9baab2; • } • h2.some{ • color: "#8b007c"; • font-family: “Book Antiqua”, Times, serif; • border: thin groove #8b007c; • } • .anyelement{ • color: "#8b007c"; • font-family: “Book Antiqua”, Times, serif; • } Applies only when the class is called by an h2 tag Can be called by any element tag (h1, h2, h3, p etc)

  18. Divisions • To format a section using a class you can use divisions: <div class=anyelement> <h2>About our company</h2> <p>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p> <hr> <h3>More about our company</h3> <p align="center">>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p> </div>

  19. Span • To format a section using a class you can also use spans: <h2><span class=anyelement>About</span> our company</h2> <p>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p> <hr> <h3>More about our company</h3> <p align="center">>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p> </div> NOTE: The use of span should be limited to DHTML documents in general, and normally should be used very carefully, as it takes away brower control and makes it hard to maintain or change formatting

  20. Layering text • <html> • <head> • <title>layering</title> • </head> • <body> • <h1>layering text</h1> • <div style="z-index: 2; left: 50px; top: 250px; • position: absolute; color: red; text: white; • font-size:36pt; border: thin groove;"> • <p>The TOP TEXT</p> • </div> • <div style="z-index: 1; left: 100px; top: 225px; • position: absolute; color: magneta; • background-color: green; font-size:46pt; border: thin groove;"> • <p>Additional text</p> • </div> • <div style="z-index: 4; left: 10; top: 30px; width: 150px; • position: absolute; color: black; background-color: yellow; • text: white; font-size:18pt;"> • <p>Text that does not go right across the screen.</p> • </div> • </body> • </html>

  21. The resulting web page

  22. In-class discussion • Why use stylesheets? • How can stylesheets be used by large projects? • How can you “enforce” the use of certain fonts or layout? • When is layering text useful?

More Related