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
