Library

css properties/ html tags/ javascript

[ code center ] [ scriptorium ] [ welcome ] [ youth resources] [ books ] [ design ] [ links ]

Library - advanced

[ font ]
[ colours and background ]
[ text ]

Example1
internal/external css

H1{ font-family: "arial", "verdana", "cursive";
font-style: italic;
font-weight: bold}

Example2 - inline css

[ font ]
[ colours and background ]
[ text ]

Example1
internal/external css

body{ background-image: URL(flower.gif);
background-repeat: repeat-x)}

Example2 - inline css

[ font ]
[ colours and background ]
[ text ]

Example1
internal/external css

p{ text-align:justify;
text-indent:8pt;
font-size:12pt;
line-height:15pt;
color:black }

Example2 - inline css

Cascading stylesheet properties

Cascading stylesheets are relatively new. Therefore they do not work on all versions of browsers yet. Listed below are the safe ones to use:

font [ back to top of page ]

font-family : "times new roman" for specifying a font family

: serif
: sans-serif
: cursive
: fantasy
: monospace

fonts with flags at letter tips
fonts without these flags
scripted fonts
stylised fonts
fonts with letters evenly spaced

font-style : normal
: italic
: oblique
normal
italic (almost like cursive fonts)
slanted to the right (like italics)

font-variant : normal
normal

: small-caps Small-caps text

font-weight : normal
: bold
: bolder
: lighter
: 100
normal (default value=400)
bold (default value=700)
relative to current value already set
relative to current value already set
values from 100(faint) - 900(bold!)

font-size : 10pt
: 18px
: 1.5em
similiar to word, can specify size in terms of points or pixels or scale font size by a factor (1.5em)

: xx-small | x-small | medium | large | x-large | xx-large

: smaller
: larger
makes the text (150%) smaller or
(150%) larger than surrounding text

colours and backgrounds [ back to top of page ]

color	: red	set font colour

background-color	: blue	set background color of any tag
background-image	: URL(flower.gif) : none	set background to an image no image set to background
background-repeat	: repeat : repeat-x : repeat-y : no-repeat	background image repeated image repeated only horizontally image repeated only vertically image appears only once

text [ back to top of page ]

text-align	: right : center : left : justify	aligns text to the right centers text aligns text to the left justifies text (makes a neat block)
text-decoration	: underline : overline : linethrough : blink : none	underlines text overlines text strikes text (puts a line through it) makes text blink on and off no decoration
text-indent	: 8px : 10%	indents a paragraph's first line by your value(in pixels,points,%,em)
text-transform	: capitalize : uppercase : lowercase : none	capitalises every word's 1st letter capitalises every letter puts every letter into lowercase text is as typed in
line-height	: normal : 50%	normal spacing between lines of text or enter a value to change this. It is dependent on font-size