Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy

The Tag Defines a division or section in an HTML document Visually, allows us to make containers that can be formatted

Without any tags Fun with Div Tags and CSS Aloha! Let’s play with div tags. These tags create divisions within a web page that can be formatted using style elements.

Basic page

The tag Fun with Div Tags and CSS Aloha! Let’s play with div tags. These tags create divisions within a web page that can be formatted using style elements.

Basic page with Div tags

The tag Fun with Div Tags and CSS Aloha! Let’s play with div tags. These tags create divisions within a web page that can be formatted using style elements.

Div tags with style element

The tag Fun with Div Tags and CSS Aloha! Let’s play with div tags. These tags create divisions within a web page that can be formatted using style elements.

Div tags with style element

Creating nested boxes with div tags Box 1 Box 2 Box 3

Colored boxes

Many Boxes with Same Formatting

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.

Adding class to our div tags... Tip: Using a style sheet helps.... Tip: Using a different background color helps call attention to text.

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. B A ¶ fleur graphic b.f. ital. ¶

Between the Head Tags... div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; }...

but first...

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.

With a style sheet

Basic HTML document with paragraphs h2 { color : blue ; } 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.

Adding a style sheet donna’s Web portal cascading style sheet

Style-sheet rule SelectorDeclaration block h2 { color : blue ; } Property Value

Adding a style sheet donna’s Web portal h2 { color : blue ; }

Add background color to our header Basic HTML document with paragraphs 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 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.

Adding background color using our style sheet

Adding a style sheet donna’s Web portal body { background : #FFC0FF ; } h1 { color : green ; } h2 { color : blue ; }

Color coding in hexadecimal numbers #FFC0FF Red Green Blue RG B

Binary numbers Base Ten Base Two

Hexadecimal numbers F F Base Ten Base A B C D E F ABCDEF Counting… 16 1 Decimal number Hexadecimal number 0

Coding black in hexadecimal numbers #

Coding red in hexadecimal numbers #FF FF

Coding green in hexadecimal numbers #00FF00 00 FF

Coding blue in hexadecimal numbers #0000FF 00 FF

Coding white in hexadecimal numbers #FFFFFF 00 FF

Coding turquoise in hexadecimal numbers #00FFFF 00 FF

Coding fuchsia in hexadecimal numbers #FF00FF 00 FF

Coding lilac in hexadecimal numbers #FFC0FF 00 FF C0 12 x 16 = 192

Source for named colors

Hexadecimal codes for colors Web search on: hexadecimal codes web page

Formatting with the div tag

The tag Basic HTML document with paragraphs h2 { color : blue ; } 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. div { background-color : #FFDDFF}

Formatting with the div tag

Many Boxes with Same Formatting

Between the Body Tags... Tip: Using a style sheet helps.... Tip: Using a different background color helps call attention to text.

Between the Head Tags......

Add formatting for our tip box div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } div.tip

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

Add formatting for our tip box (2) 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) div.tip { border : solid 2px purple ; background-color : #FFDDFF ; margin : 1em ; padding : 0.5em ; } background-color : #FFDDFF ;

Add formatting for our tip box (2) 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) 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...

Use div tags create a page like this You will chose your own colors (do not duplicate mine).