Internet Applications

Internet Applications Diane Kelly

Block and Inline Style Block elements • Always start a new line for themselves • Examples : <p> <h1> • In CSS, <div> tag is also used to specify block elements Inline elements • Only starts a new line when they run out space • Examples : <img>, <a> • In CSS, use <span> tag to specify an inline element

Rule Structure Every rule follows the same structure: SELECTOR { DECLARATION; } Examples: body { margin: 0px; } body { margin: 0px, 0px, 0px, 0px; } body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }

<head> <title>block and inline elements</title> <style type="text/css"> div { padding: 20px; margin: 0px auto; background: #CCC; border: 5px solid #000; width: 50%; } #content { font-family: Verdana; } .animal { font-variant: small-caps; text-decoration: underline; }

</style> </head> <body> <div id=“content”> <h1>Fox</h1> <p>The quick brown <span class=“animal”>fox</span> jumped over the lazy <span class=“animal”>dog</span>. </p> </div> </body> </html> EXAMPLES : test2.html | test3.html

Inheritance • Describes how styles are applied through one another without conflict • Based on the properties of • Ancestors and descendents • Parents and children

Today we are learnin CSS and XHTML. Box Model TOP-MARGIN TOP-BORDER TOP-PADDING CONTENT BOX

Boxes : Position : Static body { margin: 0px; padding: 0px; color: #000; background-color: #CCC; } #wee { padding: 10px; margin: 5px; background-color: #FFF; border: 1px solid #000; } <body> <div id=“wee”>1</div> <div id =“wee”>2</div> <div id =“wee”>3</div> <div id =“wee”>4</div> </body> EXAMPLES: wee.html wee2.html

Boxes : Position : Absolute #different { position: absolute; top: 25px; right: 25px; padding: 10px; background-color: #FFF; border: 1px solid #000; width: 20%; } EXAMPLE: wee-different-absolute.html

Boxes : Position : Relative #different { position: relative; top: 25px; right: 25px; padding: 10px; background-color: #FFF; border: 1px solid #000; width: 20%; } EXAMPLE: wee-different.html

Boxes : Position : Fixed #navigation { position: fixed; } EXAMPLE: fixed.html But …

Boxes : Float #wee { float: left; } EXAMPLE: float.html

Specifying Color • 16 key words (not as precise) • RGB hexidecimal colors (#000000 - #FFFFFF) • CSS includes short-hand for these values (#000) • % and decimal form: rgb(255, 0, 0) or rgb(100%, 0%, 0%)

Specifying Size • Percent (%), pixels (px), or ems (em) • Pixels, percent and ems are relative units • EMs is the height of the character box of the default text of the user’s system, or the height of the ancestor font-size declaration

Specifying Type p { font-family: Verdana, sans-serif; font-size: 12px; font-weight: bold; line-height: 16px; font-style: italic; text-decoration: underline; }

Type Blocks • Paragraphs: indention, vertical space, and alignment • Space between blocks (e.g. between two paragraphs) • Space between elements (e.g. between two headings) • Options for styling headings: • Type, weight, size, space, and color

Lists ul { list-style-type: square; list-style-position: outside; width: 50%; padding: 5px; border-top: 1px solid black; margin: 10px 0px 0px 10px; } li { padding: 0px; margin: 0px; width: 50%; border: 1px dashed black; } EXAMPLES: test4.html | test5.html

Background Images body { background-image: url(sils_logo.png); background-repeat: repeat-x; background-position: top left; background-attachment: fixed; } EXAMPLE: background.html

Case Studies • Aaron Brubaker’s Problem Set 1 Re-design

Internet Applications