Title: Fun with Formatting: DIV tags and Cascading Style Sheets
1Fun with Formatting DIV tags and Cascading
Style Sheets
2The ltdivgt Tag
- Defines a division or section in an HTML document
- Visually, allows us to make containers that can
be formatted
3Without 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
4Basic page
5The 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
6Basic page with Div tags
7The 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
8Div tags with style element
9The 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
10Div tags with style element
11Creating 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
12Colored boxes
13Many Boxes with Same Formatting
14Many 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
15Adding 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
16Marked-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.
17Between 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
18but first . . .
19Without a style sheet
20Without 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
21With a style sheet
22With 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
23Adding a style sheet
cascading style sheet
ltHEADgt ltTITLEgt donnas Web portal
lt/TITLEgt ltstyle type"text/css"gt
lt/stylegt lt/HEADgt
24Style-sheet rule
Selector
Declaration block
h2 color blue
Property
Value
25Adding a style sheet
ltHEADgt ltTITLEgt donnas Web portal
lt/TITLEgt ltstyle type"text/css"gt
lt/stylegt lt/HEADgt
h2 color blue
26Add 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
27Adding background color using our style sheet
28Adding 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
29Color coding in hexadecimal numbers
R
G
FFC0FF
B
Red
Green
Blue
30Binary 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
31Hexadecimal 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
32Coding black in hexadecimal numbers
00
00
00
000000
33Coding red in hexadecimal numbers
00
00
00
FF
FF0000
34Coding green in hexadecimal numbers
00
00
00
FF
00FF00
35Coding blue in hexadecimal numbers
00
00
00
FF
0000FF
36Coding white in hexadecimal numbers
00
00
00
FF
FF
FF
FFFFFF
37Coding turquoise in hexadecimal numbers
00
00
00
FF
FF
00FFFF
38Coding fuchsia in hexadecimal numbers
00
00
00
FF
FF
FF00FF
39Coding lilac in hexadecimal numbers
00
00
00
FF
FF
C0
C0 12 x 16 192
FFC0FF
40Source for named colors
http//www.w3schools.com/html/html_colornames.asp
41Hexadecimal codes for colors
http//www.december.com/html/spec/color.html
Web search on hexadecimal codes web page
42Formatting with the div tag
43The 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
44Formatting with the div tag
45Many Boxes with Same Formatting
46Between 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
47Between the Head Tags
ltheadgt ... ... lt/headgt
ltstyle type"text/css"gt
lt/stylegt
48Add 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
49Add 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
50Add 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
51Add 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
52Add 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
53Margin attribute
Previous text. Following text.
Tip Adding a margin around text emphasizes it.
The margin is the white space surrounding the box.
54Add 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
55Margin attribute
Previous text. Following text.
Tip Adding a margin around text emphasizes it.
The padding is the space surrounding the text
within the box.
56The Result
57Youve already seen this...
http//www2.hawaii.edu/donnab/infocomm/dns_assign
ment.html
58Use div tags create a page like this
You will chose your own colors (do not duplicate
mine).