Fun with Formatting: DIV tags and Cascading Style Sheets

1
Fun with Formatting DIV tags and Cascading
Style Sheets

• Dr. donna Bair-Mundy

2
The ltdivgt Tag

• Defines a division or section in an HTML document

• Visually, allows us to make containers that can
  be formatted

3
Without any ltdivgt tags
lthtmlgt ltheadgtlt/headgt ltbodygtlth2gtFun with Div Tags
and CSSlt/h2gtltpgtAloha!lt/pgt ltpgtLets play with
div tags. These tags create divisions within a
web page that can be formatted using style
elements. lt/pgt lt/bodygtlt/htmlgt
4
Basic page
5
The ltdivgt tag
lthtmlgt ltheadgtlt/headgt ltbodygtlth2gtFun with Div Tags
and CSSlt/h2gtltpgtAloha!lt/pgt ltpgtLets play with
div tags. These tags create divisions within a
web page that can be formatted using style
elements. lt/pgt lt/bodygtlt/htmlgt
ltdivgt
lt/divgt
ltdivgt
lt/divgt
6
Basic page with Div tags
7
The ltdivgt tag
lthtmlgt ltheadgtlt/headgt ltbodygtlth2gtFun with Div Tags
and CSSlt/h2gtltpgtAloha!lt/pgt ltpgtLets play with
div tags. These tags create divisions within a
web page that can be formatted using style
elements. lt/pgt lt/bodygtlt/htmlgt
ltdiv style"colorblue"gt
lt/divgt
ltdiv style"colorgreen"gt
lt/divgt
8
Div tags with style element
9
The ltdivgt tag
lthtmlgt ltheadgtlt/headgt ltbodygtlth2gtFun with Div Tags
and CSSlt/h2gtltdiv style"colorblue"gt ltpgtAloha!lt/p
gtlt/divgt ltpgtLets play with div tags. These
tags create divisions within a web page that can
be formatted using style elements.
lt/pgtlt/divgt lt/bodygtlt/htmlgt
ltdiv style"colorpurple background-colorpink"gt
10
Div tags with style element
11
Creating nested boxes with div tags
lthtmlgt ltheadgtlt/headgt ltbodygt lth2gtBox 1lt/h2gt
lth2gtBox 2lt/h2gt lth2gtBox 3lt/h2gt
lt/bodygt lt/htmlgt
ltdiv style"background-colorblue padding3em
margin-top1em"gt
ltdiv style"background-colorpink padding2em
margin-top1em"gt
ltdiv style"background-colorgreen padding1em
margin-top1em"gt
lt/divgt lt/divgt lt/divgt
12
Colored boxes
13
Many Boxes with Same Formatting
14
Many Boxes with Same Formatting
lthtmlgt ltheadgt ltstyle type"text/css"gt div.tip
border solid 2px purple background-color
FFDDFF margin 1em padding 0.5em
lt/stylegt lt/headgt ltbodygt lth2gtFormat Many Boxes
with One Style Sheetlt/h2gt ltpgtSometimes 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.lt/pgt ltdiv
class"tip"gt Tip Using a style sheet helps.
lt/divgt ltpgtAdding 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.lt/pgt ltdiv class"tip"gt Tip Using a
different background color helps call attention
to text. lt/divgt lt/bodygt lt/htmlgt
15
Adding class to our div tags
ltbodygt ... Tip Using a style sheet helps.
lt/divgt ... Tip Using a different
background color helps call attention to text.
lt/divgt lt/bodygt
ltdiv classtipgt
ltdiv classtipgt
ltdiv classtipgt
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
ltheadgt ... ltstyle type"text/css"gt div.tip
border solid 2px purple background-color
FFDDFF margin 1em padding 0.5em
lt/stylegt ... lt/headgt
18
but first . . .
19
Without a style sheet
20
Without a style sheet
lthtmlgt ltheadgt lttitlegtBasic HTML document with
paragraphslt/titlegt lt/headgt ltbodygt lth1gtCascading
Style Sheetslt/h1gt lth2gtIntroductionlt/h2gt ltpgt Cascad
ing 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. lt/pgt lth2gtThe
Termlt/h2gt ltpgt 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. lt/pgt lt/bodygt lt/htmlgt
21
With a style sheet
22
With a style sheet
lthtmlgt ltheadgt lttitlegtBasic HTML document with
paragraphslt/titlegt ltstyle type"text/css"gt h2
color blue lt/stylegt lt/headgt ltbodygt lth1gtCasca
ding Style Sheetslt/h1gt lth2gtIntroductionlt/h2gt ltpgt C
ascading 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. lt/pgt lth2gtThe
Termlt/h2gt ltpgt 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. lt/pgt lt/bodygt lt/htmlgt
23
Adding a style sheet
cascading style sheet
ltHEADgt ltTITLEgt donnas Web portal
lt/TITLEgt ltstyle type"text/css"gt
lt/stylegt lt/HEADgt
24
Style-sheet rule
Selector
Declaration block
h2 color blue
Property
Value
25
Adding a style sheet
ltHEADgt ltTITLEgt donnas Web portal
lt/TITLEgt ltstyle type"text/css"gt
lt/stylegt lt/HEADgt
h2 color blue
26
Add background color to our header
lthtmlgt ltheadgt lttitlegtBasic HTML document with
paragraphslt/titlegt ltstyle type"text/css"gt h2
color blue background-color pink
lt/stylegt lt/headgt ltbodygt lth1gtCascading Style
Sheetslt/h1gt lth2gtIntroductionlt/h2gt ltpgt 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. lt/pgt lth2gtThe
Termlt/h2gt ltpgt 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. lt/pgt lt/bodygt lt/htmlgt
27
Adding background color using our style sheet
28
Adding a style sheet
ltHEADgt ltTITLEgt donnas Web portal
lt/TITLEgt ltstyle type"text/css"gt body
background FFC0FF h1 color green
h2 color blue lt/stylegt lt/HEADgt
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
0
1
1
2
3
4
5
6
7
8
9
A
B
C
D
E
F
0
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
00
00
00
FF
FF0000
34
Coding green in hexadecimal numbers
00
00
00
FF
00FF00
35
Coding blue in hexadecimal numbers
00
00
00
FF
0000FF
36
Coding white in hexadecimal numbers
00
00
00
FF
FF
FF
FFFFFF
37
Coding turquoise in hexadecimal numbers
00
00
00
FF
FF
00FFFF
38
Coding fuchsia in hexadecimal numbers
00
00
00
FF
FF
FF00FF
39
Coding lilac in hexadecimal numbers
00
00
00
FF
FF
C0
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
The ltdivgt tag
lthtmlgt ltheadgt lttitlegtBasic HTML document with
paragraphslt/titlegt ltstyle type"text/css"gt h2
color blue lt/stylegt lt/headgt ltbodygt lth1gtCas
cading Style Sheetslt/h1gt ltdivgt lth2gtIntroductionlt/h
2gt ltpgtCascading 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.
lt/pgt lt/divgt ltdivgt lth2gtThe Termlt/h2gt ltpgtThe 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.
lt/pgt lt/divgt lt/bodygt lt/htmlgt
div background-color FFDDFF
44
Formatting with the div tag
45
Many Boxes with Same Formatting
46
Between the Body Tags
ltbodygt ... ltdiv class"tip"gt Tip Using a style
sheet helps. lt/divgt ... ltdiv class"tip"gt Tip
Using a different background color helps call
attention to text. lt/divgt lt/bodygt
ltdiv classtipgt
47
Between the Head Tags
ltheadgt ... ... lt/headgt
ltstyle type"text/css"gt
lt/stylegt
48
Add formatting for our tip box
ltheadgt ... ltstyle type"text/css"gt
lt/stylegt ... lt/headgt
div.tip border solid 2px purple
background-color FFDDFF margin 1em
padding 0.5em
div.tip
49
Add formatting for our tip box (2)
ltheadgt ... ltstyle type"text/css"gt
lt/stylegt ... lt/headgt
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)
ltheadgt ... ltstyle type"text/css"gt
lt/stylegt ... lt/headgt
div.tip border solid 2px purple
background-color FFDDFF margin 1em
padding 0.5em
border solid 2px purple
51
Add formatting for our tip box (2)
ltheadgt ... ltstyle type"text/css"gt
lt/stylegt ... lt/headgt
div.tip border solid 2px purple
background-color FFDDFF margin 1em
padding 0.5em
background-color FFDDFF
52
Add formatting for our tip box (2)
ltheadgt ... ltstyle type"text/css"gt
lt/stylegt ... lt/headgt
div.tip border solid 2px purple
background-color FFDDFF margin 1em
padding 0.5em
margin 1em
53
Margin attribute
Previous text. Following text.
Tip Adding a margin around text emphasizes it.
The margin is the white space surrounding the box.
54
Add formatting for our tip box (2)
ltheadgt ... ltstyle type"text/css"gt
lt/stylegt ... lt/headgt
div.tip border solid 2px purple
background-color FFDDFF margin 1em
padding 0.5em
padding 0.5em
55
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.
56
The Result
57
Youve already seen this...
http//www2.hawaii.edu/donnab/infocomm/dns_assign
ment.html
58
Use div tags create a page like this
You will chose your own colors (do not duplicate
mine).