fun with formatting: div tags and cascading style sheets dr. donna bair-mundy
TRANSCRIPT
![Page 1: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/1.jpg)
Fun with Formatting: DIV Fun with Formatting: DIV tags and Cascading Style tags and Cascading Style SheetsSheets
Dr. donna Bair-Mundy
![Page 2: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/2.jpg)
The <div> Tag
• Defines a division or section in an HTML document
• Visually, allows us to make containers that can be formatted
![Page 3: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/3.jpg)
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>
![Page 4: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/4.jpg)
Basic page
![Page 5: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/5.jpg)
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>
![Page 6: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/6.jpg)
Basic page with Div tags
![Page 7: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/7.jpg)
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:green">
<div style="color:blue">
</div>
</div>
![Page 8: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/8.jpg)
Div tags with style element
![Page 9: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/9.jpg)
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">
![Page 10: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/10.jpg)
Div tags with style element
![Page 11: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/11.jpg)
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>
![Page 12: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/12.jpg)
Colored boxes
![Page 13: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/13.jpg)
Many Boxes with Same Formatting
![Page 14: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/14.jpg)
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>
![Page 15: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/15.jpg)
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”>
![Page 16: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/16.jpg)
Marked-up manuscriptChapter 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.
¶
![Page 17: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/17.jpg)
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>
![Page 18: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/18.jpg)
but first . . .
![Page 19: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/19.jpg)
Without a style sheet
![Page 20: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/20.jpg)
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>
![Page 21: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/21.jpg)
With a style sheet
![Page 22: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/22.jpg)
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>
![Page 23: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/23.jpg)
Adding a style sheet<HEAD> <TITLE> donna’s Web portal </TITLE>
<style type="text/css">
</style>
</HEAD>
cascading style sheet
![Page 24: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/24.jpg)
Style-sheet rule
Selector Declaration block
h2 { color : blue ; }
Property Value
![Page 25: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/25.jpg)
Adding a style sheet<HEAD> <TITLE> donna’s Web portal </TITLE>
<style type="text/css">
</style>
</HEAD>
h2 { color : blue ; }
![Page 26: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/26.jpg)
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>
![Page 27: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/27.jpg)
Adding background color using our style sheet
![Page 28: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/28.jpg)
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>
![Page 29: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/29.jpg)
Color coding in hexadecimal numbers
#FFC0FF
Red
Green
Blue
R G
B
![Page 30: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/30.jpg)
Binary numbers
0 0 7100 10 1
1 1 14 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
![Page 31: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/31.jpg)
Hexadecimal numbers
2 5 5100 10 1
F F256 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
0 01 123456789ABCDEF
Counting…
16 1
Decimal number
Hexadecimal number0
![Page 32: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/32.jpg)
Coding black in hexadecimal numbers
#000000
00 00 00
![Page 33: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/33.jpg)
Coding red in hexadecimal numbers
#FF0000
00 00 00FF
![Page 34: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/34.jpg)
Coding green in hexadecimal numbers
#00FF00
00 0000 FF
![Page 35: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/35.jpg)
Coding blue in hexadecimal numbers
#0000FF
00 0000 FF
![Page 36: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/36.jpg)
Coding white in hexadecimal numbers
#FFFFFF
00 0000 FFFF FF
![Page 37: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/37.jpg)
Coding turquoise in hexadecimal numbers
#00FFFF00 0000 FFFF
![Page 38: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/38.jpg)
Coding fuchsia in hexadecimal numbers
#FF00FF
00 0000 FFFF
![Page 39: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/39.jpg)
Coding lilac in hexadecimal numbers
#FFC0FF00 0000 FFFF C0
C0
12 x 16 = 192
![Page 40: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/40.jpg)
Source for named colors
http://www.w3schools.com/html/html_colornames.asp
![Page 41: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/41.jpg)
Hexadecimal codes for colors
http://www.december.com/html/spec/color.html
Web search on: hexadecimal codes web page
![Page 42: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/42.jpg)
Formatting with the div tag
![Page 43: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/43.jpg)
The <div> tag<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>
div { background-color : #FFDDFF}
![Page 44: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/44.jpg)
Formatting with the div tag
![Page 45: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/45.jpg)
Many Boxes with Same Formatting
![Page 46: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/46.jpg)
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”>
![Page 47: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/47.jpg)
Between the Head Tags
<head> ...
...</head>
<style type="text/css">
</style>
![Page 48: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/48.jpg)
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
![Page 49: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/49.jpg)
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
![Page 50: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/50.jpg)
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 ;
![Page 51: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/51.jpg)
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 ; }
background-color : #FFDDFF ;
![Page 52: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/52.jpg)
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 ; }
margin : 1em ;
![Page 53: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/53.jpg)
Margin attribute
Previous text.
Following text.
Tip: Adding a margin around text emphasizes it.
The margin is the white space surrounding the box.
![Page 54: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/54.jpg)
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 ; }
padding : 0.5em ;
![Page 55: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/55.jpg)
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.
![Page 56: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/56.jpg)
The Result
![Page 57: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/57.jpg)
You’ve already seen this...
http://www2.hawaii.edu/~donnab/infocomm/dns_assignment.html
![Page 58: Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy](https://reader035.vdocuments.site/reader035/viewer/2022062518/56649c7e5503460f949336b1/html5/thumbnails/58.jpg)
Use div tags create a page like this
You will chose your own colors (do not duplicate mine).