<link href="farm.

css" rel="stylesheet" type="text/css" />

CSS HTM
background: black url(back1.gif) style ="background-
image:url(background.jpg) "
background-color: rgb(0, 154, 0)
style =" background-position: 10% 20%"”
blockquote border: 3px solid black
h1 border-bottom: 1px solid black
border-left: 0.1em solid green
border-right-style: outset
border-style: outset
border-top: 0.5em double green
border-top-width: 4px
border-top-color: red
border-width: 0.5em
img clear: right
b color: white
style="border-width: 0"
a display: block
float: right
font:normal small-caps 0.8em
h1 font-family: arial, Helvetica, sans-serif font-family: 'Courier New', monospace;
font-size: 24pt
font-size: 2em
address font-style: normal
h2 font-variant: small-caps
<p> font-weight: bold
letter-spacing:0.4em
line-height: 0.7
ul list-style: none
p margin: 0em 0em 1em 1em
margin: 0px
margin-left: 12em
outline: 0
padding: 10px
padding-left: 1em
padding-top: 1em
repeat-y repeat-x style =" background-repeat:repeat-y”
text-align: center style="text-align: center"
a text-decoration: none No markers or underline
p text-indent: 1em
address text-transform: uppercase
width: 50em width="599" height="223"
#image1 vertical-align: middle
<link href="willet.css" rel="stylesheet" type="text/css" media="screen, tv, tty" />

Page
Contextual selectors
parent descendant li b {color: blue}
{styles} li b, h2 {color: blue}
#notes b {color: blue}
* {color: blue}
p > b {color: blue}

attribute selectors a[href] {color: blue} put IE into standard mode rather than quick
mode or IE5/6 apply conditional comments

Markers for list list-style-type: type ol {list-style-type: upper-alpha} 208

Bullet or others disc, circle, squar, decimal, decimal-leading-
zero, lower-roman, upper-roman, lower-alpha,
upper-alpha, none
list-style-image: url(url)
list-style-position: position Inside, outside
list-style: Type url(url) position
Classes #links li.newGroup {margin-top: 15px} <li class="newGroup"><a hre = "#"> Home
</a></li>
Pseudo-class a visited{color:red}
#links a:link {text-decoration: none}
#links a:visited {text-decoration: none} Non underline
#links a:hover {color: black; text-
decoration: underline overline}
#links a:active {text-decoration: none}
Pseudo-elemets #firstp:first-line {font-variant: small-caps} 221
#firstp:first-letter {float: left; font-size: 400%;
line-height: 0.8}
Selector:before {content: “text”}

Notes <style type="text/css"> <div id="note1" class="notes">

#note1 {position: .notes {font-family: sans-serif; font-size: <p>Paste cut-out letters and words in your
absolute; left: 8pt; color: brown; background-color: ivory;
600px; top: 120px} border: 3px inset rgb(212, 212, 212); width: scrapbook to create a 3D effect. Online
130px; height: 90px; overflow: auto Scrapbooks sells professionally designed
#note1 {position: absolute; left: 600px; top: cut-out letters, words, and phrases for all
120px} occasions.</p>
</style> </div>

Media rule
@page {size: 8.5in 11in portrait; margin:
0.5in}
printer #samples {position: absolute; left: 1in;
 top:0.5in; page-break-after: always}
#sample_image {page-break-before: always;
text-align: center}
Rolleover effect: when a user rolls the mouse pointer over an element
Tables

Row Groups <table> htm

<thead>
<tr>cells</tr>
<th>content</th>
<td>content</td>
</thead>
<tfoot>
tablerows
</tfoot>
<tbody>
tablerows
</tbody>
</table>
Css Border- collapse: separate(default) or Collapse: removes spaces between the
borders collapse borders
table {border-collapse: separate; border-
spacing: 10px)
table {border-style: hidden}
table.schedule thead tr {height: 20px} Row column
table.schedule tbody tr {height: 30px}
table.schedule col.firstCol { width: 7%} Column width
table.schedule thead {color: white}
table.schedule tbody td {vertical-align: vertical alignment
top; padding: 5px}
table.schedule caption {caption-side: caption position
top; text-align: right}
Column <colgroup> Htm
groups <col class="first col"/> Column span
<col class="daycols" span="7"/>
</colgroup>
css .topLeft {background: url(topleft.png) no-repeat Background image in the table for corners
top left} do no tiling
#tBorder {background: url(top.jpg) repeat-x
39px top}
<th> rowspan=2” colspan=”3”</th> Data span or row span
<td> rowspan=2” colspan=”3”</td>
Forms

<form name="donationForm" id="donationForm" action=http://www.thelighthouse.org/cgi-bin/donation method="post">

<input type="hidden" name="eMail" id="eMail" value="donations@thelighthouse.org" />
Input <form name="donationForm" id="donationForm">
<fieldset id="id">
textbox <legend>text</legend>
<label>
Name: <input type="type" name="name" id="id" />
</label>
</fieldset>
</form>

Name: <input type="type" name="name" id="id" size="7" /> Size to control the
width of the input
maxlength="2" Maximum
characters in the
input
value="value" To set up a default
value
accesskey="j" Shortcut to select
any control element
Not working in
Firefox
Radio <input type="radio" id="homeType" name="addressType" value="home" checked="checked" >
button
Selection <select id="creditCard" name="creditCard">
List <optgroup label="FirstGroup">
<option selected="selected" value="Amex" size=”>American Express</option>
<option value="Disc">Discover</option>
</optgroup>
<option value="MC">MasterCard</option>
<option value="Visa">Visa</option>
</select>

Checkbo <input id="volunteer" name="volunteer" type=" checked="checked" value="yes" />

x
textarea <textarea name="name" id="id" rows="value" cols="value" wrap="type"
> </textarea>

Buttons <input type="submit" value="Submit Donation" />

<input type="reset" value="Cancel"/ >
<input type="button"value="text" />
<button name="name" id="id" value="value" type="type">
content
</button>
Hidden <input type="hidden" name="name" id="id" value="value" />
<input type="hidden" name="eMail" id="eMail" value="donations@thelighthouse.org" />
Fields