fun with formatting: div tags and cascading style sheets dr. donna bair-mundy
TRANSCRIPT
Fun with Formatting: DIV Fun with Formatting: DIV tags and Cascading Style tags and Cascading Style SheetsSheets
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>
<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>
Basic page
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>
Basic page with Div tags
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>
Div tags with style element
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">
Div tags with style element
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>
Colored boxes
Many Boxes with Same Formatting
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>
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”>
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.
¶
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>
but first . . .
Without a style sheet
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>
With a style sheet
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>
Adding a style sheet<HEAD> <TITLE> donna’s Web portal </TITLE>
<style type="text/css">
</style>
</HEAD>
cascading style sheet
Style-sheet rule
Selector Declaration block
h2 { color : blue ; }
Property Value
Adding a style sheet<HEAD> <TITLE> donna’s Web portal </TITLE>
<style type="text/css">
</style>
</HEAD>
h2 { color : blue ; }
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>
Adding background color using our style sheet
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>
Color coding in hexadecimal numbers
#FFC0FF
Red
Green
Blue
R G
B
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
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
Coding black in hexadecimal numbers
#000000
00 00 00
Coding red in hexadecimal numbers
#FF0000
00 00 00FF
Coding green in hexadecimal numbers
#00FF00
00 0000 FF
Coding blue in hexadecimal numbers
#0000FF
00 0000 FF
Coding white in hexadecimal numbers
#FFFFFF
00 0000 FFFF FF
Coding turquoise in hexadecimal numbers
#00FFFF00 0000 FFFF
Coding fuchsia in hexadecimal numbers
#FF00FF
00 0000 FFFF
Coding lilac in hexadecimal numbers
#FFC0FF00 0000 FFFF C0
C0
12 x 16 = 192
Source for named colors
http://www.w3schools.com/html/html_colornames.asp
Hexadecimal codes for colors
http://www.december.com/html/spec/color.html
Web search on: hexadecimal codes web page
Formatting with the div tag
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}
Formatting with the div tag
Many Boxes with Same Formatting
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”>
Between the Head Tags
<head> ...
...</head>
<style type="text/css">
</style>
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
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
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 ;
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 ;
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 ;
Margin attribute
Previous text.
Following text.
Tip: Adding a margin around text emphasizes it.
The margin is the white space surrounding the box.
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 ;
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.
The Result
You’ve already seen this...
http://www2.hawaii.edu/~donnab/infocomm/dns_assignment.html
Use div tags create a page like this
You will chose your own colors (do not duplicate mine).