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
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>
CSS Rule HTML reference
CSS Rule HTML reference
#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
<select id="Content-right">
<img id="Content-right">
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;
border:1px dashed #999;
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;
border:1px dashed #999;
background-color:#dce;
line-height:17px;
}
#Immobile {
position:absolute;
top:150px;
left:50px; bottom 220px;
font:11px/20px verdana, arial, helvetica, sans-serif;
padding:10px;
width:200px;
background-color:#cba;
border:1px dashed #999;
line-height:17px;
}
#Menu {
position:absolute;
top:650px;
left:50px;
width:172px;
padding:10px;
font:11px/20px verdana, arial, helvetica, sans-serif;
background-color:#eba;
border:1px dashed #999;
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;
border:1px dashed #999;
line-height:17px;
}
</div>
<table id="Content-right">
<tr><td>hello</td><td>hello</td><td>hello</td></tr>
<tr><td>hello</td><td>hello</td><td>hello</td></tr>
<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
Top Related