external style rules for html standardize organization web sites page layout using positioning...

External Style rules for HTML

Standardize organization web sites

Page Layout using positioning

Absolute & Relative Positioning of Elements

Cascading Style Sheets

by sharing style sheets

- instead of tables

Box Formatting Model - for HTML Elements

Powerful when combined with Javascript

<html>

XML CSS DTD Link > CSS-XML-Examples > CSS-Examples

<body> Hello</body></html>

<head> <style type="text/css">@import "myCS01.css"; </style>

</head>

body {

}

background-color: #bbbbbb ;font-family: verdana ;

reference to style sheet

myCS01.css

style rule for body element

Cross-Reference Style Sheets

style sheet

http://www.cs.njit.edu/mchugh/psswrd/web-course-materials/IT202/Fall2003/A-assignments/Fall04/Fall04AddedNotes/XML-CSS/

Style sheet

Web site 1 Web site 3 Web site 3

Standardize "Look" of multiple web sites

called 'Cascading' because of how priority rules resolve conflictswhen multiple rules apply to an element.

body {

}

background-color: #bbbbbb;

font-family: verdana, arial, helvetica, sans-serif ;

myCS01.css

h1 {margin: 30px;padding: 50px;border: 3px dashed #333;}

uses Box Format Model For Html elements

fonts in order of preference

margin

border

padding

HTMLcontent

Atmospheric space around HTML content

has width & color- solid, dashed

Buffer space beyond border

BoxFormatting Model

EVERY HTML element

http://www.w3.org/TR/REC-CSS1#formatting-model space-border-space

margin

border

padding

HTMLcontent

cell padding

border

cell spacing<td> element

cell contents

myCS01.css

Style rule for paragraph

p {

}

Top-Right-Bottom-Left

T RI B LE(clockwise)

border: 3px dashed #333;

font-size: 11px;line-height: 20px;

margin: 20px 20px 20px 20px;padding: 0px;

Box Formatting Model

Simple style rules -

Grouped elements

Types of Style Rules

h1 { color: blue }

declaration

h1, h2, h3 { color: blue }

Grouped declarations h1 { color: blue ; font-size: 12pt ; }

NO quotes!

ID selector #bluish { } <p id=bluish> --- </p>

CSS Rule HTML reference

Versus rules for HTML Elements

h1 { color: blue }

h1, h2, h3 { color: blue }

Named rules

These can be applied to any HTML element – tables, forms, etc !c

Class selector

ID selector

h1.bluish { color: blue }

.bluish { color: blue }

<h1 class=bluish> --- </h1>

<p class=bluish> --- </p>

#bluish { } <p id=bluish> --- </p>



#Immobile {

}

Absolute Positioning

parent absolute container

top

width

left

position: absolute;

top: 150px;left: 50px;width: 200px;

line-height: 17px;background-color: #cba; font: 11px/20px verdana, arialpadding: 10px; border: 1px dashed #999;

Anchors element

on page

Html Element

#Content-right {

}

Relative Positioning

/* Top-Right-Bottom-Left margin box T RI B LE */

margin: 50px 30px 50px 300px ;

background-color: #eee;

line-height: 17px ;border: 1px dashed #999 ;padding: 10px ;

Htmlcontent

Parent Html

Top

Right

Bottom

Left

Body

test00.html & css00.cssExperiment with these.

Style rule

Embedded in Parent Html Element

CSS Rule

<body>

<p>

<pre id="Content-right">

<div id='Immobile> 'position absolute

<pre id="Content-left">

<table id="Content-right">

<form id="Content-left">

<div id='Menu'>position absolute

test00.html myCS00.css

Absolute &RelativeLayout Control

Relative to bodymargin

margin

body {

margin: 10px;

padding:0px;

font-family:verdana, arial, helvetica, sans-serif;

border:10px solid #111;

background-color:#bbb;

}

p {

font:11px/20px verdana, arial, helvetica, sans-serif;

margin:20px 20px 20px 20px;

padding:0px;

border:1px dashed #999;

background-color:#eee;

}

/* same as:

p {

font-family: verdana, arial, helvetica, sans-serif;

font-size: 11px;

line-height: 20px;

margin:20px 20px 20px 20px;

padding:0px;

}

*/

#Content-right {

margin: 50px 30px 50px 300px;

padding:10px;


background-color:#eee;

line-height:17px;

}

/* Top-Right-Bottom-Left constraints on margin box T-RI-B-LE */

#Content-left {

margin: 20px 350px 70px 20px;

padding:10px;


background-color:#dce;

line-height:17px;

}

#Immobile {

position:absolute;

top:150px;

left:50px; bottom 220px;


padding:10px;

width:200px;

background-color:#cba;


line-height:17px;

}

#Menu {

position:absolute;

top:650px;

left:50px;

width:172px;

padding:10px;


background-color:#eba;


line-height:17px;

}

<html>

<head><style type="text/css">@import "myCS00.css";</style></head>

<body>

Hello

<p> Hello. I hope you are having a nice day. </p>

<pre id="Content-right">

THE SUN RISING.

by John Donne

BUSY old fool, unruly Sun,

Why dost thou thus,

Through windows, and through curtains, call on us ?

Must to thy motions lovers' seasons run ?

Saucy pedantic wretch, go chide

Late school-boys and sour prentices,

.

</pre>

<pre id="Content-left">

Thy beams so reverend, and strong

Why shouldst thou think ?

I could eclipse and cloud them with a wink,

But that I would not lose her sight so long.

If her eyes have not blinded thine,

Look, and to-morrow late tell me,

</pre>

<div id="Immobile">See what the Immobile style does.

#Immobile {

position:absolute;

top:150px;

left:0px;

padding:10px;

width:200px;

background-color:#cba;


line-height:17px;

}

</div>

<table id="Content-right">

<tr><td>hello</td><td>hello</td><td>hello</td></tr>



</table>

<form id="Content-left" >

<input type="text" value= "hello" />

<input type="button" value= "bye " />

</form>

<div id="Menu">List of Links <br>

<a href="a.html"> nowhere to go </a><br>

<a href="a.html"> fake link </a><br>

<a href="a.html"> another deadend </a><br>

</div>

<select id="Content-right" name="menu" onchange="window.location = menu.value" >

<option value="Menu04.html" > Choose an HTML Reference Site </option>

<option value="http://www.transaction.net/web/tutor/cmdtable.html"> Table of HTML Commands and Attributes </option>

<option value="http://www.htmlreference.com/" > HTML reference </option>

<option value="http://www.w3schools.com/tags//tag_img.asp" > w3schools HTML reference </option>

<option value="http://www.htmlreference.com/" > w3schools DOM reference </option>

<option value="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/fontsize.asp"> Style Properties </option>

</select>

<img id="Content-right" src="California.gif" />

</body>

</html>

XML CSS menu > CSS-XML-Topics

http://www.w3.org/TR/REC-CSS1#formatting-model

http://www.html-faq.com/faq.php

especially Box Formatting model

http://justinsomnia.org/notes/css/CSS_notes.html

References to CSS Links

> CSS-Examples/

Web Standards Organization

http://bluerobot.com/web/layouts/

examples adapted from here

http://www.cs.njit.edu/mchugh/psswrd/web-course-materials/IT202/Fall2003/A-assignments/Fall04/Fall04AddedNotes/CSS-XML-Topics.doc

http://www.cs.njit.edu/mchugh/psswrd/web-course-materials/IT202/Fall2003/A-assignments/Fall04/Fall04AddedNotes/XML-CSS/CSS-Examples/

external style rules for html standardize organization web sites page layout using positioning...

Documents