Hypertext Markup Language and Cascading Style Sheets

Table of Contents

last revision
27 October 2011, 6:33pm
book quality

quote: "the language of the web is the language of the world"

Html and Css are inextricably linked. This document advocates using, as far as possible, semantic html along with simple standards compliant Css to alter the appearance of the Html documents

It is one of the strange ironies of the internet that websites dedicated to css are generally ugly and unreadable. The idea behind modern html (or xhtml) is to make it "semantic" (which is probably a vain hope), and use CSS to change the appearance of this supposedly "clean", "semantic" html markup....

The reality is that the majority of modern website clog their pages with <div> and <span> tags, hair-raising javascript scripts, and abstruse indecifrable cross-browser hacks, pandering to weird standards-mangling quirks in Internet Explorer 5.301806 etc.

www: www.htmlcodetutorial.com
an old but good site
www: http://www.cookwood.com/html/extras/xhtml_ref.html
www: http://krijnhoetmer.nl/stuff/
some simple css ideas

Quotes ‹↑›

Both double quotes " and single quotes ' are valid for quoting html attribute values.

  <p cite="shakespeare">to be...</p> 
  <p cite='shakespeare'>to be...</p> 
  ##(these are both correct)

Html ‹↑›

Meta Information ‹↑›

Meta tags should go in the <head>...</head> section of the page

www: http://www.i18nguy.com/markup/metatags.html
Information about the use of "meta" tags in the html <head> section
indicate that the character set for the document is utf-8
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
possibly the most important metatag! All pages should have this tag

indicate that the author of the page is 'J Biggle'

 <meta name="author" content="J Biggle">

state that the last revision of the page occurred on the 3 june 2008

 <meta name="revision" content="Biggle, 3 June 2008">

indicate that the page is about plants

 <meta name="description" content="information about plants">

indicate some keywords for the document

 <meta name="keywords" content="plants, flowers">

state which program generated the html page

 <meta name="generator" content="someprogram">

Foreign Languages And Alphabets ‹↑›

the miscelaneous page for html unicode entities


place some chinese characters using entities notation

 高效使用: &#x269E; this is useful if the page is not utf8

indicate that the character set for the document is utf-8

 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
put this with the <head>...</head> of the document

indicate that the language of a document is British English

 <html lang="en-GB">

indicate that the language of a paragraph is welsh

 <p lang="cy">

find valid language codes for the 'lang' attribute

 look at iso-639

find valid language codes for indigenous languages

 see www.sil.org (iso-639-3)

Entities ‹↑›

 xmlstarlet esc "&"

Semantic Tags ‹↑›

Semantic html tags refer to the 'meaning' of the content of the document, rather than to its appearance.

www: http://www.w3.org/TR/WCAG10-HTML-TECHS/
a guide for writing accessible html
some special chars
U+260E - &#x260E; &#9742; ☎ BLACK TELEPHONE
U+260F - &#x260F; &#9743; ☏ WHITE TELEPHONE
U+265B - &#x265B; &#9819; ♛ BLACK CHESS QUEEN
U+265C - &#x265C; &#9820; ♜ BLACK CHESS ROOK
U+265D - &#x265D; &#9821; ♝ BLACK CHESS BISHOP
U+265E - &#x265E; &#9822; ♞ BLACK CHESS KNIGHT
U+265F - &#x265F; &#9823; ♟ BLACK CHESS PAWN
U+2660 - &#x2660; &#9824; ♠ BLACK SPADE SUIT

include the title of the document, which appears in the browser title bar

 <title>...</title>  this goes in the <head> section of the page

mark up the text of a quotation (may be several lines)

 <blockquote cite="http://reference">...</blockquote>

mark up an inline quotation

 <q cite="...">...</q>

include computers source code in a document

 <code> ... </code>

include an acronym in a document

 <acronym title="World Wide Web">WWW</acronym>
it is only necessary to include the 'title' the first occurrance in the page

abbreviated words should be marked up with <abbr>


indicate an address in the page

 <address>3 smith st, bigtown</address>

cite a literary work

 <cite>... </cite>

put a caption or heading on a table. usually displayed above the table

 <table><caption>a table</caption>...</table>



Revisions ‹↑›

strike out text with a line

 text-decoration: line-through;
 <strike>...</strike>   the same but older

Css Stylesheets ‹↑›

insert an external stylesheet in a document

 <link href="/path/to/sheet.css" type="text/css" rel="stylesheet">

put an embedded style sheet in a web page,

   <style type="text/css">
     h1 {color:red}
     p {color:blue}

embed style in the element in the html page

 <p style="font-size: xx-large">big</p>

Css Syntax ‹↑›

a semicolon before a close brace is not necessary

 p { font-weight: bold }         this is correct
 p { font-weight: bold; }        this is also correct

Using Divs With Id Names ‹↑›

using a named div html: <div id="example" name="example"> css: div#example { ... }

elements within the named div

 #example ul { ... }

Tables ‹↑›

use <th> to create header cells


create table with a thin silver border around all cells ,

html: <table class="b">...</table> css: TABLE.b { border: 1px solid silver; border-collapse: collapse; } .b TD { border: 1px solid silver; } .b TH { border: 1px solid silver; } ,,,

Fonts ‹↑›

create small capital text for H3 headings

 H3 { font-variant: small-caps }    the 'correct' way
 H3 { font-size: smaller; text-transform: uppercase; }   another way

set all the font properties in one go. This is known as a 'short-hand'

 H4 { font: italic bold x-large arial,sans-serif; }

Font Family ‹↑›

set the font family for a heading

 H1 { font-family: "Times New Roman", Georgia, Serif; }

generic families

 serif, sans-serif, monospace

Text Transformations ‹↑›

text-transform: none, uppercase lowercase, capitalize text-decoration: none underline overline line-through blink

put an overline and an underline when the mouse is over a link

 A:hover { text-decoration: underline overline }

Text Spacing ‹↑›

line-height: the space between lines on the page

 line-height: 1.5            no units are required

letter-spacing: -2px word-spacing:

Font Sizes ‹↑›

'1em' is the current font size.

The font size can be set using a 'named' value. This has the advantage of being more readable and also does not fix the pixel size absolutely

    H3 { font-size: small}

font-size values

 xx-small x-small small medium large x-large xx-large smaller larger

semantic html tags
<q> an inline quotation
<cite> citation
<var> variable
<code> computer code
<acronym> an acronym
<abbr> an abbreviated word

set the font size with a percentage

  css: P { font-size: 120%; }

  * set the font size to be 2.5 times the normal size
  >> H1 {font-size: 2.5em; }   ##(the default size is often 16px)


  * possible "font-style" values
  >> normal, italic, oblique
  == font-weight values
  .. normal,
  .. bold,
  .. bolder,
  .. lighter,
  .. 100,
  .. 200,
  .. 300,
  .. 400,
  .. 500,
  .. 600,
  .. 700,
  .. 800,
  .. 900


  * a layout with a bordered side bar and an outset image,
    <div><image src="" title="" alt="">
    <p id="sidebar"> text...  </p>
     { border: 2px dashed; font-size: smaller; text-indent: 0 }
     { float: left; margin-right: 0.5em; border: none }
     { float: left; width: 30%; margin-right: 0.8em }

Lists ‹↑›

www: http://css.maxdesign.com.au/listamatic/
lots of different ways to style lists, including horizontally

Definition Lists ‹↑›

www: http://www.maxdesign.com.au/presentation/definition/
a discussion about definition lists
display a definition list with the definition on the same line as the term

    dt { float: left; margin-right: 0.3em; width: 10%; text-align: right; }  

A reasonably nice list with side bar

     { margin-left: 5%; border-left: 6px solid lightgrey; padding-top: 1em }
    dl.bar dt
     { font-style: italic; font-variant: small-caps; 
       border-bottom: 1px dotted gray;
       padding-left: 0.5em; padding-bottom: 0.1em; font-weight: bold; }
    dl.bar dd
     { font-style: normal; margin-left: 2em; padding-top: 0.5em }

Horizontal Lists ‹↑›

a simple "tab" style horizontal menu with hyperlinks

    <li><a href="#">Books</a></li>
    <li><a href="#">Kanji</a></li>
    <li><a href="#">Examples </a></li>
    { list-style-type: none; border-bottom: 3px solid black }
   ul li
    { display: inline; border: 1px solid gray; 
      padding: 0 .2em 0 .2em; margin-left: 0.4em; }
   ul. li a
    { text-decoration: none; }

do something

html: <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> css: #navlist { padding: 3px 1em; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; display: inline; } #navlist li a { padding: 3px 0.5em; margin-left: 0.5em; border: 1px solid #778; border-bottom: none; background: whitesmoke; text-decoration: none; }

#navlist li a:link { color: #448; } #navlist li a:visited { color: #667; } ,,,

Unordered Lists ‹↑›

display a <ul> list horizontally ("inline")

     ul { list-style-type: none; }
     li { display: inline; border: 1px solid grey; }
      <li>Item 1</li>
      <li>Item 2</li>

set an image to use for a list marker

    ul { list-style: url(star.gif) disc }

set an image for a particular <li> element

    ul li.x { list-style-image: url(star.png) }

remove the indentation on a list

   ul { margin-left: 0; padding-left: 0; }

display a list with no marker

    UL { list-style-type: none; }

side by side lists with a dark heading

     { float: left; border-left: 1px dashed; padding-right: 1em }
    div p:first-child
     { background: blue; color: white }

font-size units
px pixels
cm centimeters
mm milimeters
em relative to current fontsize
% percentage
in inches
pc picas

Menus ‹↑›

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
    #tagCloud a.cloud3
    #tagCloud a.cloud2

a perl library for making tag clouds


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/

Forms ‹↑›

Consider using a <fieldset> with a <legend> See the webmistress forms

Images ‹↑›

make an image float right

    <img class="float-right" src="imagefile" border="0" />
    img.float-right { border:0; float: right; clear: right; margin: 1.2em; }

make a blockquote with big quote marks

    <blockquote cite="someone">
    <div>annoying but excellent</div></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-position:top right;

Icons ‹↑›

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

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

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
     <div class="banner'>...</div>
      { 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.

     <div class="float-right">...</div>
       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.

        float:left; width:0.7em;
        font-size:400%; font-family:algerian,courier;

Alignment ‹↑›

aligning the text of an element

     H2 { text-align: center; }

Images ‹↑›

create an image with a border and caption at the bottom...

      <div class="figure">
      <p><img class="scaled" src="st-tropez.jpg" alt="St. Tropez">
      <p>Saint Tropez and its fort in the evening sun
         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

      TABLE { border: 1px solid black; }

make a 'pre' element have a beige background and a width of 80%

      <pre class="code"> ... </pre>
      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.

      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border: 1px solid #000;

make a dotted border

    <p class="dashed">...</p>
    p.dashed {border-style: dashed; } 

make a heading with a box around it which stretches 70% of the page..

    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

    <p class="code"><a href="...">...</a></p>
    P.code a { font-weight: bold }

dont display horizontal rules which come after h1 headings

 h1 + hr { display: none }  select 'brother' elements

select list items which are inside unordered lists

 ul li {}

select elements inside other elements

    <dl class="book-list">
      <dt><em class="book-description">text</em>
    dl.book-list dt em.book-description
    { padding-bottom: .5em; }

make red all elements which have an href of 'google.com'

   [href="google.com"] { color: red }
   [href] { color: red }

change the colour for english css: [lang=en] { color: red} :lang(en) {} the same ,,,

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
image gallery tools
imageindex - generate static HTML galleries from images

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 /@
    -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 ‹↑›


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 the file type is guessed from the ext
 webcpp inputfile outputfile -s  dont write <html> and <body> tags

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


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 )