1 / 58

Fun with Formatting: DIV tags and Cascading Style Sheets

Fun with Formatting: DIV tags and Cascading Style Sheets. Dr. donna Bair-Mundy. The <div> Tag. Defines a division or section in an HTML document. Visually, allows us to make containers that can be formatted. Without any <div> tags. <html> <head></head>

von
Download Presentation

Fun with Formatting: DIV tags and Cascading Style Sheets

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. Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy

  2. The <div> Tag • Defines a division or section in an HTML document • Visually, allows us to make containers that can be formatted

  3. Without any <div> tags <html> <head></head> <body><h2>Fun with Div Tags and CSS</h2><p>Aloha!</p> <p>Let’s play with div tags. These tags create divisions within a web page that can be formatted using style elements. </p> </body></html>

  4. Basic page

  5. The <div> tag <html> <head></head> <body><h2>Fun with Div Tags and CSS</h2><p>Aloha!</p> <p>Let’s play with div tags. These tags create divisions within a web page that can be formatted using style elements. </p> </body></html> <div> </div> <div> </div>

  6. Basic page with Div tags

  7. The <div> tag <html> <head></head> <body><h2>Fun with Div Tags and CSS</h2><p>Aloha!</p> <p>Let’s play with div tags. These tags create divisions within a web page that can be formatted using style elements. </p> </body></html> <div style="color:blue"> </div> <div style="color:green"> </div>

  8. Div tags with style element

  9. The <div> tag <html> <head></head> <body><h2>Fun with Div Tags and CSS</h2><div style="color:blue"> <p>Aloha!</p></div> <p>Let’s play with div tags. These tags create divisions within a web page that can be formatted using style elements. </p></div> </body></html> <div style="color:purple ; background-color:pink">

  10. Div tags with style element

  11. Creating nested boxes with div tags <html> <head></head> <body> <h2>Box 1</h2> <h2>Box 2</h2> <h2>Box 3</h2> </body> </html> <div style="background-color:blue ; padding:3em ; margin-top:1em"> <div style="background-color:pink ; padding:2em ; margin-top:1em"> <div style="background-color:green ; padding:1em ; margin-top:1em"> </div> </div> </div>

  12. Colored boxes

  13. Many Boxes with Same Formatting

  14. Many Boxes with Same Formatting <html> <head> <style type="text/css"> div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } </style> </head> <body> <h2>Format Many Boxes with One Style Sheet</h2> <p>Sometimes you want to add many boxes with the same formatting. You can use div tags to do this. However, putting style elements in each one of the boxes to be formatted can be time-consuming.</p> <div class="tip"> Tip: Using a style sheet helps. </div> <p>Adding a style sheet means you only have to do the formatting once. And to change the formatting on all the boxes you make only one change. This can save you much time. It can also make your web files smaller and easier to manage.</p> <div class="tip"> Tip: Using a different background color helps call attention to text. </div> </body> </html>

  15. Adding class to our div tags <body> ... Tip: Using a style sheet helps. </div> ... Tip: Using a different background color helps call attention to text. </div> </body> <div class=“tip> <div class=“tip”> <div class=“tip>

  16. Marked-up manuscript Chapter One A Mysterious Visitor It was a dark and stormy night. As was my custom on a Friday night, I was curled up in my favorite armchair reading Cataloging & Classification. All of a sudden, I heard a loud “Tap, tap, tap” on the window. Wondering what type of person would be out and about on such a stormy night, I went over, pulled aside the curtain, and peered out into the darkness. A fleur graphic B ¶ ital. b.f. ¶

  17. Between the Head Tags <head> ... <style type="text/css"> div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } </style> ... </head>

  18. but first . . .

  19. Without a style sheet

  20. Without a style sheet <html> <head> <title>Basic HTML document with paragraphs</title> </head> <body> <h1>Cascading Style Sheets</h1> <h2>Introduction</h2> <p> Cascading Style Sheets (CSS) are used to format the way things appear on a Web page. When using Cascading Style Sheets HTML is used to provide structure and the style sheet is used to control how the elements look on the page. </p> <h2>The Term</h2> <p> The term "Style sheet" refers to a list of rules for formatting various elements. The word "Cascading" refers to the fact that you can have multiple style sheets which follow rules of precedence. </p> </body> </html>

  21. With a style sheet

  22. With a style sheet <html> <head> <title>Basic HTML document with paragraphs</title> <style type="text/css"> h2 { color : blue ; } </style> </head> <body> <h1>Cascading Style Sheets</h1> <h2>Introduction</h2> <p> Cascading Style Sheets (CSS) are used to format the way things appear on a Web page. When using Cascading Style Sheets HTML is used to provide structure and the style sheet is used to control how the elements look on the page. </p> <h2>The Term</h2> <p> The term "Style sheet" refers to a list of rules for formatting various elements. The word "Cascading" refers to the fact that you can have multiple style sheets which follow rules of precedence. </p> </body> </html>

  23. Adding a style sheet cascading style sheet <HEAD> <TITLE> donna’s Web portal </TITLE> <style type="text/css"> </style> </HEAD>

  24. Style-sheet rule Selector Declaration block h2 { color : blue ; } Property Value

  25. Adding a style sheet <HEAD> <TITLE> donna’s Web portal </TITLE> <style type="text/css"> </style> </HEAD> h2 { color : blue ; }

  26. Add background color to our header <html> <head> <title>Basic HTML document with paragraphs</title> <style type="text/css"> h2 { color : blue ; background-color : pink ; } </style> </head> <body> <h1>Cascading Style Sheets</h1> <h2>Introduction</h2> <p> Cascading Style Sheets (CSS) are used to format the way things appear on a Web page. When using Cascading Style Sheets HTML is used to provide structure and the style sheet is used to control how the elements look on the page. </p> <h2>The Term</h2> <p> The term "Style sheet" refers to a list of rules for formatting various elements. The word "Cascading" refers to the fact that you can have multiple style sheets which follow rules of precedence. </p> </body> </html>

  27. Adding background color using our style sheet

  28. Adding a style sheet <HEAD> <TITLE> donna’s Web portal </TITLE> <style type="text/css"> body { background : #FFC0FF ; } h1 { color : green ; } h2 { color : blue ; } </style> </HEAD>

  29. Color coding in hexadecimal numbers R G #FFC0FF B Red Green Blue

  30. Binary numbers 100 10 1 0 0 7 4 2 1 1 1 1 Base Ten 0 1 2 3 4 5 6 7 8 9 10 Base Two 0 1 10 11 100 101 110 111 1000 1001 1010

  31. Hexadecimal numbers 2 5 5 Decimal number Counting… 100 10 1 0 1 0 6 0 1 2 3 4 5 8 9 A B C D E F 7 F F Hexadecimal number 16 1 256 16 1 Base Ten 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Base 16 0 1 2 3 4 5 6 7 8 9 A B C D E F 10

  32. Coding black in hexadecimal numbers 00 00 00 #000000

  33. Coding red in hexadecimal numbers FF 00 00 00 #FF0000

  34. Coding green in hexadecimal numbers 00 00 FF 00 #00FF00

  35. Coding blue in hexadecimal numbers 00 00 00 FF #0000FF

  36. Coding white in hexadecimal numbers 00 FF 00 FF 00 FF #FFFFFF

  37. Coding turquoise in hexadecimal numbers 00 00 FF 00 FF #00FFFF

  38. Coding fuchsia in hexadecimal numbers 00 FF 00 00 FF #FF00FF

  39. Coding lilac in hexadecimal numbers 00 FF 00 C0 00 FF C0 12 x 16 = 192 #FFC0FF

  40. Source for named colors http://www.w3schools.com/html/html_colornames.asp

  41. Hexadecimal codes for colors http://www.december.com/html/spec/color.html Web search on: hexadecimal codes web page

  42. Formatting with the div tag

  43. <html> <head> <title>Basic HTML document with paragraphs</title> <style type="text/css"> h2 { color : blue ; } </style> </head> <body> <h1>Cascading Style Sheets</h1> <div> <h2>Introduction</h2> <p>Cascading Style Sheets (CSS) are used to format the way things appear on a Web page. When using Cascading Style Sheets HTML is used to provide structure and the style sheet is used to control how the elements look on the page. </p> </div> <div> <h2>The Term</h2> <p>The term "Style sheet" refers to a list of rules for formatting various elements. The word "Cascading" refers to the fact that you can have multiple style sheets which follow rules of precedence. </p> </div> </body> </html> The <div> tag div { background-color : #FFDDFF}

  44. Formatting with the div tag

  45. Many Boxes with Same Formatting

  46. Between the Body Tags <body> ... <div class="tip"> Tip: Using a style sheet helps. </div> ... <div class="tip"> Tip: Using a different background color helps call attention to text. </div> </body> <div class=“tip”>

  47. Between the Head Tags <head> ... ... </head> <style type="text/css"> </style>

  48. Add formatting for our tip box <head> ... <style type="text/css"> </style> ... </head> div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } div.tip

  49. Add formatting for our tip box (2) <head> ... <style type="text/css"> </style> ... </head> div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } { } enclose formatting statement

  50. Add formatting for our tip box (2) <head> ... <style type="text/css"> </style> ... </head> div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } border : solid 2px purple ;

More Related