Transcript CSS-I
Cascading Style Sheets
External Style rules for HTML
Standardize organization web sites
by sharing style sheets
Box Formatting Model - for HTML Elements
Absolute & Relative Positioning of Elements
Page Layout using positioning
- instead of tables
Powerful when combined with Javascript
Cross-Reference
Style Sheets
reference to style sheet
<html>
<head>
<style type="text/css">@import "myCS01.css"; </style>
</head>
<body>
Hello
style rule for body element
</body>
</html>
myCS01.css
body {
background-color: #bbbbbb ;
font-family: verdana ;
}
style sheet
XML CSS DTD Link > CSS-XML-Examples > CSS-Examples
Standardize "Look" of multiple web sites
Style sheet
Web site 1
Web site 3
Web site 3
called 'Cascading'
because of how priority rules resolve conflicts
when multiple rules apply to an element.
fonts in order of
preference
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
Box
Formatting
Model
EVERY HTML element
Buffer space
beyond border
margin
has width & color
- solid, dashed
border
padding
HTML
content
http://www.w3.org/TR/REC-CSS1#formatting-model
Atmospheric space
around HTML content
space-border-space
<td> element
cell spacing
margin
border
border
padding
cell padding
HTML
content
cell contents
Box Formatting Model
myCS01.css
Style rule for paragraph
p {
font-size: 11px;
line-height: 20px;
margin:
20px 20px 20px 20px;
padding:
0px;
border:
3px dashed #333;
}
Top-Right-Bottom-Left
T RI B LE
(clockwise)
Types of Style Rules
NO quotes!
declaration
Simple style rules -
h1
{ color: blue }
Grouped elements
h1, h2, h3 { color: blue }
Grouped declarations
h1
{ color:
blue ;
font-size: 12pt ; }
Versus rules for HTML Elements
h1 { color: blue }
h1, h2, h3 { color: blue }
Named rules
CSS Rule
ID selector
#bluish {
HTML reference
}
<p id=bluish> --- </p>
These can be applied to any HTML element – tables, forms, etc !c
CSS Rule
Class selector
HTML reference
.
h1 bluish { color: blue }
.bluish {
color: blue }
CSS Rule
ID selector
#bluish {
<h1 class=bluish> --- </h1>
<p class=bluish> --- </p>
HTML reference
}
<p id=bluish> --- </p>
Absolute Positioning
parent absolute container
top
#Immobile {
left
position:
top:
left:
width:
absolute;
150px;
50px;
200px;
line-height: 17px;
background-color: #cba;
font: 11px/20px verdana, arial
padding:
10px;
border:
1px dashed #999;
}
Anchors element
on page
width
Html Element
Relative Positioning
Body
CSS Rule
Parent Html
#Content-right {
margin:
50px 30px 50px 300px ;
Top
padding:
border:
line-height:
10px ;
1px dashed #999 ;
17px ;
Html
content
Left
background-color: #eee;
Right
}
Bottom
Embedded in Parent
Html Element
/* Top-Right-Bottom-Left margin box
T RI
B
LE */
test00.html & css00.css
Experiment with these.
<body>
margin
test00.html
myCS00.css
Relative to body
Absolute &
Relative
Layout
Control
<p>
margin
<div id='Immobile> '
position absolute
<pre id="Content-right">
<pre id="Content-left">
<table id="Content-right">
<div id='Menu'>
position absolute
<form id="Content-left">
<select id="Content-right">
<img id="Content-right">
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;
}
<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"
Site
</option>
> Choose an HTML Reference
<option value="http://www.transaction.net/web/tutor/cmdtable.html"> Table of HTML
Commands and Attributes </option>
<option value="http://www.htmlreference.com/"
</option>
> HTML reference
<option value="http://www.w3schools.com/tags//tag_img.asp"
reference
</option>
<option value="http://www.htmlreference.com/"
reference
</option>
> w3schools HTML
> w3schools DOM
<option
value="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/refer
ence/properties/fontsize.asp"> Style Properties </option>
</select>
<img id="Content-right" src="California.gif" />
</body>
References to CSS Links
XML CSS menu > CSS-XML-Topics
> CSS-Examples/
http://www.w3.org/TR/REC-CSS1#formatting-model
especially Box Formatting model
Web Standards
Organization
http://bluerobot.com/web/layouts/
http://justinsomnia.org/notes/css/CSS_notes.html
examples adapted
from here
http://www.html-faq.com/faq.php