div tagsfull.ppt

7/28/2019 div tagsfull.ppt

1/54

Fun with Formatting: DIV tags

and Cascading Style Sheets


2/54

The Tag

Defines a division or section

in an HTML document

Visually, allows us to make

containers that can beformatted


3/54

Without any tags

Fun with Div Tags and CSS

Aloha!

Lets play with div tags. These tags create

divisions within a web page that can be formatted

using style elements.


4/54

Basic page


5/54

The tag


Aloha!


divisions within a web page that can be formattedusing style elements.


6/54

Basic page with Div tags


7/54

The tag


Aloha!


divisions within a web page that can be formattedusing style elements.


8/54

Div tags with style element


9/54

The tag


Aloha!

Lets play with div tags. These tags createdivisions within a web page that can be formatted

using style elements.


10/54

Div tags with style element


11/54

Creating nested boxes with div tags

Box 1

Box 2

Box 3


12/54

Colored boxes


13/54

Many Boxes with Same Formatting


14/54


div.tip { border : solid 2px purple ;

background-color : #FFDDFF ;

margin : 1em ; padding : 0.5em ; }

Format Many Boxes with One Style Sheet

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.

Tip: Using a style sheet helps.

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.

Tip: Using a different background color helps call

attention to text.


15/54

Adding class to our div tags

...


...

Tip: Using a different background color

helps call attention to text.


16/54

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

fleurgraphic

b.f.ital.


17/54

Between the Head Tags

...

div.tip { border : solid 2px purple ;background-color : #FFDDFF ;

margin : 1em ; padding : 0.5em ; }

...


18/54

but first . . .


19/54

Without a style sheet


20/54

Without a style sheet

Basic HTML document with paragraphs

Cascading Style Sheets

Introduction

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.

The Term

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.


21/54

With a style sheet


22/54


23/54

Adding a style sheet

donnas Web portal

cascadingstyle sheet


24/54

Style-sheet rule

Selector Declaration block

h2 { color : blue ; }

Property Value


25/54

Adding a style sheet

donnas Web portal



26/54

Add background color to our header


h2 { color : blue ; background-color : pink ; }

Cascading Style Sheets

Introduction

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.

The Term





27/54

Adding background color using

our style sheet


28/54


29/54

Color coding in hexadecimal

numbers

#FFC0FF

Red

Green

Blue

R G

B


30/54

Binary numbers

0 0 7

100 10 1

1 1 1

4 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


31/54

Hexadecimal numbers2 5 5

100 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


32/54

Coding black in hexadecimalnumbers

#00000000 00 00


33/54

Coding red in hexadecimalnumbers

#FF000000 00 00FF


34/54

Coding green in hexadecimalnumbers

#00FF0000 0000 FF


35/54

Coding blue in hexadecimalnumbers

#0000FF00 0000 FF


36/54

Coding white in hexadecimalnumbers

#FFFFFF00 0000 FFFF FF


37/54

Coding turquoise inhexadecimal numbers

#00FFFF00 0000 FFFF


38/54

Coding fuchsia in hexadecimalnumbers

#FF00FF

00 0000 FFFF


39/54

Coding lilac in hexadecimalnumbers

#FFC0FF00 0000 FFFF C0

C0

12 x 16 = 192


40/54

Formatting with the div tag

The tag


41/54

The tag



Cascading Style SheetsIntroduction

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.

The Term




div { background-color : #FFDDFF}


42/54

Formatting with the div tag


43/54



44/54

Between the Body Tags

...


...

Tip: Using a different background colorhelps call attention to text.


45/54

Between the Head Tags

...

...


46/54

Add formatting for our tip box

...

...



margin : 1em ;

padding : 0.5em ; }

div.tip


47/54

Add formatting for our tip box (2)

...

...


background-color : #FFDDFF ;margin : 1em ;

padding : 0.5em ; }

{ } enclose formatting

statement


48/54


...

...



padding : 0.5em ; }

border : solid 2px purple ;


49/54


...

...



padding : 0.5em ; }



50/54


...

...



padding : 0.5em ; }

margin : 1em ;


51/54

Margin attribute

Previous text.

Following text.

Tip: Adding a margin around textemphasizes it.

The margin is the white

space surrounding the box.


52/54


...

...



padding : 0.5em ; }

padding : 0.5em ;


53/54

Margin attribute

Previous text.

Following text.

Tip: Adding a margin around textemphasizes it.

The padding is the space

surrounding the text within the box.


54/54

The Result

Documents

div tagsfull.ppt