possible values for the 'list-style-type'
| none | No marker |
| circle | a circle |
| disc | filled circle. This is default |
| square | a square |
| armenian | The marker is traditional Armenian numbering |
| decimal | The marker is a number |
| decimal-leading-zero | a number padded by initial zeros (01, 02, 03, etc.) |
| georgian | traditional Georgian numbering (an, ban, gan, etc.) |
| lower-alpha | lower-alphabetic (a, b, c, d, e, etc.) |
| lower-greek | lower-greek (alpha, beta, gamma, etc.) |
| lower-latin | lower-latin (a, b, c, d, e, etc.) |
| lower-roman | lower-roman (i, ii, iii, iv, v, etc.) |
| upper-alpha | upper-alpha (A, B, C, D, E, etc.) |
| upper-latin | upper-latin (A, B, C, D, E, etc.) |
| upper-roman | upper-roman (I, II, III, IV, V, etc.) |
| inherit | the value of the list-style-type property inherits |
Tag Clouds ‹↑›
A tag cloud allows data items to be visualised by
the size of the text. see http://www.astray.com/recipes for
an example.
a fragment of the css for an html tag cloud
#tagCloud a.cloud4
{
font-size:8pt;
}
#tagCloud a.cloud3
{
font-size:10pt;
}
#tagCloud a.cloud2
{
font-size:12pt;
}
a perl library for making tag clouds
libhtml-tagcloud-perl
Horizontal Tab Menus ‹↑›
- www: http://www.dynamicdrive.com/style/csslibrary/item/shade-image-tabs-menu/
-
shows how to do horizontal tab menus with shaded background
- www: http://articles.sitepoint.com/article/accessible-menu-tabs
-
a good article about horizontal menu tabs with rounded tabs and
resizable
- www: http://ashoksuthar.wordpress.com/2007/02/14/rounded-tab-menu-through-css/
-
Consider using a <fieldset> with a <legend>
See the webmistress forms
Images ‹↑›
make an image float right
html:
<img class="float-right" src="imagefile" border="0" />
css:
img.float-right { border:0; float: right; clear: right; margin: 1.2em; }
make a blockquote with big quote marks
html:
<blockquote cite="someone">
<div>annoying but excellent</div></blockquote>
css:
blockquote
{ background: transparent url(quoleft.png) left top no-repeat; }
blockquote div
{
padding: 0 48px;
background: transparent url(quoright.png) right bottom no-repeat;
}
make a background image for an element, on the left
a { background:#ffffff url('img_tree.png') no-repeat top left}
make a background image for an element, on the left (ommitting values)
a { background: url('img_tree.png') no-repeat left}
make a no-repeating background image, long-hand
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;
- www: http://www.favicon.cc/
-
A site which allows the user to create a 16x16 icon image or
modifiy an existing image. The site also has a large collection
of icons under the "creative commons" licence.
Image Galleries ‹↑›
debian: igal, galrey, webmagick,
llgal - Command-line online gallery generator based on "igal"
image magick
image gallery tools
| imageindex - generate static HTML galleries from images |
Margins ‹↑›
set the page margins to 5% of the page width
body { margin-left: 5%; margin-right: 5%; }
Floating Elements ‹↑›
- www: http://css.maxdesign.com.au/floatutorial/
-
Make a box which stays put even when the page is scrolled
html:
<div class="banner'>...</div>
css:
DIV.banner
{ position: fixed; left: auto; width: 8.5em; right: 2em; }
##(not internet explorer 5,6)
A box with a border, white background, which floats right
takes up 25% of the page width, and uses margins to distance
itself from other page elements.
html:
<div class="float-right">...</div>
css:
div.float-right
{
float: right; width: 25%;
margin: 0 0 10px 10px;
padding: 10px;
background-color: white; border: 1px solid silver;
}
create a 'drop capital' at the beginning of a paragraph.
html:
<span>T</span>...
css:
span
{
float:left; width:0.7em;
font-size:400%; font-family:algerian,courier;
line-height:80%;
}
Alignment ‹↑›
aligning the text of an element
html:
<h2>title</h2>
css:
H2 { text-align: center; }
Images ‹↑›
create an image with a border and caption at the bottom...
html:
<div class="figure">
<p><img class="scaled" src="st-tropez.jpg" alt="St. Tropez">
<p>Saint Tropez and its fort in the evening sun
</div>
css:
DIV.figure
{
float: right; width: 25%;
border: thin silver solid;
margin: 0.5em; padding: 0.5em;
}
DIV.figure p
{
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}
img.scaled { width: 100%; }
Boxes And Borders ‹↑›
The 'margin' is outside the border. the margin has no background colour;
the 'padding' is inside the border and can have a background colour. the
border is a (visible) box which goes around an element.
set all the border properties in one go
border: 5px solid red;
put a thin black solid border around a table
html:
<table>...</table>
css:
TABLE { border: 1px solid black; }
make a 'pre' element have a beige background and a width of 80%
html:
<pre class="code"> ... </pre>
css:
pre.code-line { background-color: beige; width: 80% }
make rounded corners on pre tags. This is not a standards compliant
way to make borders, but the other methods are complicated.
pre
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
}
make a dotted border
html:
<p class="dashed">...</p>
css:
p.dashed {border-style: dashed; }
make a heading with a box around it which stretches 70% of the page..
css:
h3 { padding-left:1em; margin-left:0;
border:1 px solid black; width:70 %; }
Rounded Corners ‹↑›
- www: http://www.maxdesign.com.au/articles/pullquote/
-
A good simple article about how to create rounded corner
boxes using a background image
round only the top left corner of a heading
-----
<html>
<style type="text/css">
div#pullquote
{
margin: 2em;
background: #09f url(pullquote-a.gif) no-repeat;
}
</style>
<body>
<div id="pullquote">
<h2> Heading here </h2>
<p> Lorem ipsum dolor sit amet.... </p>
<p class="more">
<a href="#">More information</a>
</p>
</div>
</body>
</html>
,,,
Selecting Elements With Css ‹↑›
make the font bold for a link within a paragraph element
html:
<p class="code"><a href="...">...</a></p>
css:
P.code a { font-weight: bold }
dont display horizontal rules which come after h1 headings
h1 + hr { display: none }
select list items which are inside unordered lists
ul li {}
select elements inside other elements
html:
<dl class="book-list">
<dt><em class="book-description">text</em>
<dd>
</dl>
css:
dl.book-list dt em.book-description
{ padding-bottom: .5em; }
make red all elements which have an href of 'google.com'
css:
[href="google.com"] { color: red }
[href] { color: red }
change the colour for english
css:
[lang=en] { color: red}
:lang(en) {}
,,,
make attributes for a particular media
@media screen {}
@media print {}
Web Resources ‹↑›
- www: http://www.w3.org/Style/Examples/007/figures
-
- www: http://www.w3.org/Style/CSS/
-
the official site for css
Checking Hyperlinks ‹↑›
- www: http://www.linklint.org
-
site for linklint, a hyperlink checker
- www: http://validator.w3.org/checklink
-
the site for the w3c hyperlink checker
hyperlink checking utilities
| htcheck - derived from htdig | uses MySql backend |
| linkchecker - a Python program to check websites for broken links |
| linklint - A Perl link checker | development seems to have stopped in 2001 |
| checklink - W3C Link Checker Perl script (package w3c-linkchecker ) |
check the validity of links in the file bookmarks.html
wget --spider --force-html -i bookmarks.html
check the links on "site.net" and put output files in the "dir" folder
linklint -http -host site.net -limit 1000 -doc dir /@
options:
-http , check via http
-host site.net , the site to check
-limit 1000 , check at most 1000 pages
-doc dir , put output documents in the "dir" folder
/@ , check the entire site
check only the top and the "/doc/" webfolder for bad hyperlinks
linklint -http -host site.net -doc dir /# /doc/#
Hyperlinks ‹↑›
remove the underline for hyperlinks (visited and unvisited)
a { text-decoration: none; }
make links which have NOT been visited (clicked) have no underline
A:link { text-decoration: none; }
set the colour to purple for a hyperlink which has been clicked
A:visited {color: purple;}
make the link turn blue when the mouse pointer hovers over it
A:hover { color: navy; }
a link which changes colour when the mouse pointer hovers
a { color: #000099; text-decoration: none; }
a:hover { color: #0000FF; background: #FFFF00; }
apply a style to hyperlinks with point to 'pdf' files
a[href $='.pdf'] { }
put a dotted line underneath a hyperlink
a { text-decoration: none; border-bottom: 1px dotted; }
Backgrounds ‹↑›
set all the background properties
background: #00ff00 url('image.gif') no-repeat fixed center;
Colours ‹↑›
- www: http://www.dhtmlgoodies.com/scripts/color-schemer/color-schemer.html
-
choose colour schemes
- www: http://palettebuilder.com/rgb.aspx
-
another colour chooser site
- www: http://www.w3schools.com/css/css_colornames.asp
-
a list of colour names
Html Editors ‹↑›
bluefish
Html Validators ‹↑›
weblint, xmllint
Site Design Examples ‹↑›
These sites contain some colour or design element which may be useful
in the development of website.
- www: http://stapps.cdu.edu.au/pls/apex/f?p=100:30:1510741901221133
-
interesting use of icons in the menu bar
- www: http://www.sampletheweb.com/
-
what I consider to be a nice horizontal menu bar
- www: http://jmcpherson.org/editing.html
-
soft grey colours
- www: http://mail-archives.apache.org/mod_mbox/www-mirrors/200004.mbox/%3CPine.LNX.4.10.10004041616100.4099-100000@squishy.ameth.org%3E
-
bold but pleasant colours.
table layout, wine red (white on #900) with bluey greys
(bold black on #ddd, normal black on #eee)
- www: rsync.net
-
a simple style
- www: http://www.cyberciti.biz/
-
- www: http://www.nixtutor.com/freebsd/understanding-symbolic-links/
-
Nice colours, rounded page tabs.
- www: http://leepoint.net/notes-java/GUI/containers/10windows/15framesize.html
-
a simple underline style
- www: http://www.panamet.com.ar/servicios.htm
-
yellowy red colours
- www: http://cslife.wordpress.com/2008/12/01/save-vim-syntax-highlighting-to-html/
-
simple wordpress
- www: http://www.online-kredit-index.de/
-
A simple green style with subtle shaded image backgrounds
on banners and navigation bars
- www: http://perunews.wordpress.com/threatdown/the-north-coast/ecuadorian-border-crossing/
-
a reasonably nice banner with browny colours
- www: http://www.wollemipine.com/index.php
-
simple, nice colours and a kind of watermark image
Source Code Formatting Examples ‹↑›
- www: http://stackoverflow.com/questions/1037927/run-pdflatex-quietly
-
Syntax highlighted code and a blueish background for code
snippets.
- www: http://en.wikipedia.org/wiki/Named_pipe#Named_pipes_in_Unix
-
The wikipedia code boxes is an example of another code formatting style
Publishing Source Code ‹↑›
convert source code to syntax highlighted html
webcpp inputfile outputfile.ext
webcpp inputfile outputfile -s
Syntax Highlighting Programs ‹↑›
highlight http://www.andre-simon.de/ supports 140 languages and
can also output to LaTeX, rtf, HTML, svg, xhtml uses '<span>' tags
gnu source-highlight
code2html a perl script
:: webcpp http://webcpp.sourceforge.net
uses <font> tags with classes. Html is 'all on one line' style. Supports
the languages: iAda95, ASP, Assembler, Basic, C, C#, C++, Cg, CLIPS,
Fortran, Haskell, Java, Markup, Modula2, Objective C, Pascal, Perl, PHP,
Python, Renderman, Ruby, SQL, Tcl, Unix shell, UnrealScript & VHDL
DOCUMENT-NOTES: