2. Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy

3. The Tag Defines a division or section in an HTML document Visually, allows us to make containers that can be formatted

4. Without any tags Fun with Div Tags and CSS Aloha! Let’s play with div tags. These tags create divisions within a web page that can be formatted using style elements.

5. Basic page

6. The tag Fun with Div Tags and CSS Aloha! Let’s play with div tags. These tags create divisions within a web page that can be formatted using style elements.

7. Basic page with Div tags

8. The tag Fun with Div Tags and CSS Aloha! Let’s play with div tags. These tags create divisions within a web page that can be formatted using style elements.

9. Div tags with style element

10. The tag Fun with Div Tags and CSS Aloha! Let’s play with div tags. These tags create divisions within a web page that can be formatted using style elements.

11. Div tags with style element

12. Creating nested boxes with div tags Box 1 Box 2 Box 3

13. Colored boxes

14. Many Boxes with Same Formatting

15. div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } Format Many Boxes with One Style Sheet 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. Tip: Using a style sheet helps. 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. Tip: Using a different background color helps call attention to text.

16. Adding class to our div tags... Tip: Using a style sheet helps.... Tip: Using a different background color helps call attention to text.

17. 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. B A ¶ fleur graphic b.f. ital. ¶

18. Between the Head Tags... div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; }...

19. but first...

20. Without a style sheet

21. Basic HTML document with paragraphs Cascading Style Sheets Introduction 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. The Term 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.

22. With a style sheet

23. Basic HTML document with paragraphs h2 { color : blue ; } Cascading Style Sheets Introduction 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. The Term 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.

24. Adding a style sheet donna’s Web portal cascading style sheet

25. Style-sheet rule SelectorDeclaration block h2 { color : blue ; } Property Value

26. Adding a style sheet donna’s Web portal h2 { color : blue ; }

27. Add background color to our header Basic HTML document with paragraphs h2 { color : blue ; background-color : pink ; } Cascading Style Sheets Introduction 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. The Term 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.

28. Adding background color using our style sheet

29. Adding a style sheet donna’s Web portal body { background : #FFC0FF ; } h1 { color : green ; } h2 { color : blue ; }

30. Color coding in hexadecimal numbers #FFC0FF Red Green Blue RG B

31. Binary numbers 0 0 7 100 10 1 1 1 1 4 2 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

32. Hexadecimal numbers 2 5 5 100 10 1 F F 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 001123456789ABCDEF Counting… 16 1 Decimal number Hexadecimal number 0

33. Coding black in hexadecimal numbers #000000 00

34. Coding red in hexadecimal numbers #FF0000 00 FF

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

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

37. Coding white in hexadecimal numbers #FFFFFF 00 FF

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

39. Coding fuchsia in hexadecimal numbers #FF00FF 00 FF

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

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

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

43. Formatting with the div tag

44. The tag Basic HTML document with paragraphs h2 { color : blue ; } Cascading Style Sheets Introduction 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. The Term 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. div { background-color : #FFDDFF}

45. Formatting with the div tag

46. Many Boxes with Same Formatting

47. Between the Body Tags... Tip: Using a style sheet helps.... Tip: Using a different background color helps call attention to text.

48. Between the Head Tags......

49. Add formatting for our tip box...... div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } div.tip

50. Add formatting for our tip box (2)...... div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } { } enclose formatting statement

51. Add formatting for our tip box (2)...... div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } border : solid 2px purple ;

52. Add formatting for our tip box (2)...... div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } background-color : #FFDDFF ;

53. Add formatting for our tip box (2)...... div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } margin : 1em ;

54. Margin attribute Previous text. Following text. Tip: Adding a margin around text emphasizes it. The margin is the white space surrounding the box.

55. Add formatting for our tip box (2)...... div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } padding : 0.5em ;

56. Margin attribute Previous text. Following text. Tip: Adding a margin around text emphasizes it. The padding is the space surrounding the text within the box.

57. The Result

58. You’ve already seen this... http://www2.hawaii.edu/~donnab/infocomm/dns_assignment.html

59. Use div tags create a page like this You will chose your own colors (do not duplicate mine).