Notes for by Craig Grannell

1. CSS shorthand for boxes:

margin: 10px — applies to all edges
margin: 10px, 20px — 10px applies to the top and bottom edges; 20px applies to left and right edges
margin: 10px, 20px, 30px — 10px applies to the top, 20px to the left and right, 30px to the bottom
margin: 10px, 20px, 30px, 40px — clockwise order starting from the top (top, right, bottom, and left)

2. Applying styles to a Web page:

a) use a link tag:
[link rel=”stylesheet” type=”text/css” href=”mystylesheet.css” /]

b) use import:
[style type=”text/css”]
@import url(mystylesheet.css);
[/style]

c) embed styles in HTML document:
[head]
[style type=”text/css” media=”all”]
p{
color: black;
}

navigation p{

color: blue;
font-weight: bold;
font-size: 120%;
}
[/style]
[/head]

d) inline styles:
[p style=”color: red;”]This is painted in Red.[/p]

3. DOCTYPE declarations:

a) XHTML strict:
[!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”]

b) XHTML transitional: good for depreciated tags
[!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”]

c) XHTML frameset:
[!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”]

4. Go to top of a page:

a) [a id=”top” name=”top”][/a]
[a href=”#top”]Back to top[/a]

b) some browsers ignore empty elements, so we need to put a single
space in between; if we use XHTML Strict, we need to put elements into
a block element such as [p] or [div].
[div id=”topOfPageAnchor”]
[a id=”top” name=”top”] [/a][/div]

define CSS
div#topOfPageAnchor{
position: absolute;
top: 0;
left: 0;
height: 0;
}

c) use Javascript:
[div id=”topOfPageAnchor”]
[a id=”top” name=”top”] [/a][/div]

[a href=”#top” onclick=”javascript: scrollTo(0,0);”]Top of page[/a]

5. Attaching Javascript:

a) External
[script type=”text/javascript” src=”javascriptfile.js”][/script]

b) Internal
[script type=”text/javascript”] script content [/script]

6. Toggling div visibility with Javascript:

function swap(targetID){
if(document.getElementByID){
target = document.getElementById(targetId);
if(target.style.display == “none”){
target.style.display == “block”;
}else{
target.style.display == “none”;
}
}
}

[div][a href=”#” title=”show text” onclick=”swap(’hiddenDiv’);return false;”]show text[/a][/div]
[div id=”hiddenDiv” style=”display: none;”][p]hello[/p][/div]

7. pseudo-class selectors:

For anchors

a{color: #3366cc;}
a:link{color: #3366cc;}
a:visited{color:#777700;}
a:active{color:#cc00ff;}
a:hover{color:#0066ff;}

Useful resources:

CSS hacks for different Web browsers
W3C Markup Validation
W3C Link Checker
W3C CSS Validation
iCapture shows your page in Safari
CSS switcher demo