Website CSS tutorial - making and editing css stylesheets

Formatting / Styling your text using CSS


For any element (e.g. h1, p, a, etc.) but particularly for your own divs, (e.g. navgation, body, ...) you may wish to define many properties at once. An example is the div 'text' in the free website templates.

Properties that you may like to style, and the style rules to use, are listed here.

CSS Formatting your text

For this example we'll style a div named 'text', but any element can have syles applied in this manner.

font family
	text	{font-family:	"Verdana", serif;}
The first choice of font is 'Verdana'. A second choice, serif, is offered in case the visitor does not have Verdana installed on their computer.

Missing fonts is an increasingly rare occurence. Macs, Linux and Microsoft operating systems and web browsers all come well equipped nowadays.

font size
	text	{font-size:	12px;}
The text size is set to 12 pixels. In addition to pixels (px), ems (em), keywords (x-small, small, medium, large, x-large, xx-large) are also options.

font-size is inherited, so if you always use the same size text, define it in the 'body' element and the job is done.

In every browser I've tried (except Microsoft Internet Explorer) the visitor can resize the text to suit their young/old, good/bad eyesight.

The font size can also be changed relative to what comes before (the parent element) - 'larger', smaller', '75%', for example.

font style
	text	{font-style:	normal;}
The available options for font style are normal, italic and oblique.
bold format
	text	{font-weight:	bold;}
There are several different ways of specifying the weight of text. 'bold', 'light', 'normal'; is one. The relative means is 'bolder', 'lighter'. The numerical is in multiples of 100:- 400 is 'normal', 700 is 'bold'. Experiment!
line height
	text	{line-height:	120%;}
Increasing the line height is particularly helpful for lengthy passages of text. It makes them much easier to read.

This page may also be helpful:-

explaining an existing cascading style sheet.

CSS Guide  




Website Design Blogs

Website Templates, xhtml & css Blog

SEO for Beginners Blog

Website Publishing & Promotion Blog

Home

www.pjf.org.uk