Div Tagsfull

Fun with Formatting: DIV tags and Cascading Style Sheets
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>Lets 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

<body> <h2>Fun with Div Tags and CSS</h2>
<div>
<p>Aloha!</p>
</div> <div>
<p>Lets play with div tags. These tags create divisions within a web page that can be formatted using style elements. </p>
</div>
</body>
</html>
Basic page with Div tags
The <div> tag

<div style="color:blue">
<p>Aloha!</p>
</div> <div style="color:green">

</div>
</body>
</html>
Div tags with style element
The <div> tag

<div style="color:blue">
<p>Aloha!</p>
</div> <div style="color:purple ; backgroundcolor:pink">

</div>
</body>
</html>
Div tags with style element
Creating nested boxes with div tags

<html> <head></head> <body>
<div style="background-color:blue ; padding:3em ; margin-top:1em">

<h2>Box 1</h2>
<div style="background-color:pink ; padding:2em ; margin-top:1em">

<h2>Box 2</h2>
<div style="background-color:green ; padding:1em ; margin-top:1em">

<h2>Box 3</h2>
</div> </div> </div>

</body> </html>
Colored boxes
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> ... <div class=tip> Tip: Using a style sheet helps. <div class=tip> </div> ... <div class=tip> Tip: Using a different background color helps call attention to text. </div> </body>
Marked-up manuscript
A
BA
Chapter One
fleur
graphic 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. ital. All of a sudden, I heard a loud b.f. 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.
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> donnas Web portal </TITLE>
cascading style sheet
<style type="text/css">
</style>
</HEAD>
Style-sheet rule
Selector Declaration block
h2 { color : blue ; }
Property Value

h2 { color : blue ; }
</style>
</HEAD>
Add background color to our header

<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

<style type="text/css"> body { background : #FFC0FF ; } h1 { color : green ; } h2 { color : blue ; } </style>
</HEAD>
Color coding in hexadecimal numbers
#FFC0FF
Red
Green
Blue
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
Hexadecimal numbers
Counting
2 5 5
100 10 1
Decimal number
0 0 1 F E D C B A 9 8 7 6 5 4 3 2 1
16 1
F F
256 16 1
Hexadecimal number
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
Coding black in hexadecimal numbers
00
00
00
#000000
Coding red in hexadecimal numbers
FF 00
00
00
#FF0000
Coding green in hexadecimal numbers
00
00 FF
00
#00FF00
Coding blue in hexadecimal numbers
00
00
FF 00
#0000FF
Coding white in hexadecimal numbers
FF 00
FF 00
FF 00
#FFFFFF
Coding turquoise in hexadecimal numbers
00
FF 00
FF 00
#00FFFF
Coding fuchsia in hexadecimal numbers
FF 00
00
FF 00
#FF00FF
Coding lilac in hexadecimal numbers
FF 00
C0 00
FF 00
C0 12 x 16 = 192
#FFC0FF
Formatting with the div tag
The <div> tag

<style type="text/css"> h2 { color : blue ; } div { background-color : #FFDDFF} </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>
Formatting with the div tag
Between the Body Tags

<body> ... <div class="tip"> Tip: Using a style sheet helps. </div> <div class=tip> ... <div class="tip"> Tip: Using a different background color helps call attention to text. </div> </body>
Between the Head Tags

<head> ...
</style>
... </head>
Add formatting for our tip box

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

<head> ...
</style>
... </head>
{ } enclose formatting statement

<head> ...
</style>
... </head>
border : solid 2px purple ;

<head> ...
</style>
... </head>
background-color : #FFDDFF ;

<head> ...
</style>
... </head>
margin : 1em ;
Margin attribute
Previous text.
Tip: Adding a margin around text emphasizes it.
Following text.
The margin is the white space surrounding the box.

<head> ...
</style>
... </head>
padding : 0.5em ;
Margin attribute
Previous text.
Tip: Adding a margin around text emphasizes it.
Following text.
The padding is the space surrounding the text within the box.
The Result

Div Tagsfull

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Div Tagsfull

Caricato da

Copyright:

Formati disponibili

Fun with Formatting: DIV tags and Cascading Style Sheets

The <div> Tag

Without any <div> tags

The <div> tag

<body> <h2>Fun with Div Tags and CSS</h2>

Basic page with Div tags

The <div> tag

<body> <h2>Fun with Div Tags and CSS</h2>

</div> <div style="color:green">

Div tags with style element

The <div> tag

<body> <h2>Fun with Div Tags and CSS</h2>

</div> <div style="color:purple ; backgroundcolor:pink">

Div tags with style element

Creating nested boxes with div tags

<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>

Many Boxes with Same Formatting

Many Boxes with Same Formatting

<div class="tip"> Tip: Using a style sheet helps. </div>

Adding class to our div tags

Between the Head Tags

Without a style sheet

Without a style sheet

<h1>Cascading Style Sheets</h1> <h2>Introduction</h2>

With a style sheet

With a style sheet

<style type="text/css"> h2 { color : blue ; } </style>

Adding a style sheet

cascading style sheet

Adding a style sheet

Add background color to our header

<style type="text/css"> h2 { color : blue ; background-color : pink ; } </style>

Adding background color using our style sheet

Adding a style sheet

Color coding in hexadecimal numbers

Base Two 0 1 10 11 100 101 110 111 1000 1001 1010

Coding black in hexadecimal numbers

Coding red in hexadecimal numbers

Coding green in hexadecimal numbers

Coding blue in hexadecimal numbers

Coding white in hexadecimal numbers

Coding turquoise in hexadecimal numbers

Coding fuchsia in hexadecimal numbers

Coding lilac in hexadecimal numbers

Formatting with the div tag

The <div> tag

<style type="text/css"> h2 { color : blue ; } div { background-color : #FFDDFF} </style>

Formatting with the div tag

Many Boxes with Same Formatting

Between the Body Tags

Between the Head Tags

Add formatting for our tip box

Add formatting for our tip box (2)

{ } enclose formatting statement

Add formatting for our tip box (2)

border : solid 2px purple ;

Add formatting for our tip box (2)

Add formatting for our tip box (2)

The margin is the white space surrounding the box.

Add formatting for our tip box (2)