  
Programming
& construction
|
|
WYSIWYG editors
(in development)
|
Interactivity & animation
(in development)
|
Web applications
(in development)
|
Implementation
(in development)
|
 |
Style sheets (CSS)
The future of web publishing has the separation of page formatting from the
actual text or image content of web pages. This means that block level formatting
tags such as <font>,<b>,<i> etc will no longer be supported
in browsers in the future and have already been "deprecated" by the
international standards body the "W3C Consortium".
The method by which this separation is to occur is via the "Cascading
Style Sheet" or CSS for short.
CSS is VERY powerful, can be used to control the appearance of hundreds of
web pages in a single site OR only a single page in hundreds pages on a web site
OR a specific section of content within a page.
Used in combination with the DIV tag, Style sheets can apply very specific
attributes to web page content, including colour, font, size, background, margins,
page placement and much more. 'Cascading' style sheets refer to the ability to
apply styles at all levels of web content from inline (single words or lines of
text) to global (whole websites).
Style sheets work on the same principle as styles in Microsoft Word, that is
you define a style which you then apply to a block of text. Styles are usually
applied to an HTML document in one of two ways. The easiest way is to "Redefine
an HTML tag". This means that the behaviour of that tag is consistently modified
across the document.
Example:
<style type="text/css">
<!--
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; color:
#FF0000}
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-large; color:
#00FFFF}
-->
</style>
This code, placed in the head of the document, redefines the <p> and
<h3> tags, applying font, colour and size attributes. These override text
attributes set in the <body> tag, however text attributes set in a <font>
tag will override the style sheets.
To use the style sheet globally, add a link tag into the head of your document:
<link rel="style sheets" href="sample.css" type="text/css">
And save the tag definitions in a separate document with a .css extension:
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium;
color: #FF0000}
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-large; color:
#00FFFF}
You can also define and name individual styles which are called classes. These
classes are then applied to individual sections of text by using either the <DIV>
or <SPAN> tags….
Example:
<DIV class="pretty">Little Girls are….</DIV>
Where do Style Sheets live?
Style Sheets can reside in several locations…
Document head within the <HEAD> </HEAD> tags: A style sheet
can be defined in the header of a document. This means that the style information
is available to only that document.
Externally: A style sheet can be written into a text file which is saved
with a .css extension. This file can then be brought into any html document within
you site by placing the <LINK > tag in the document header. This is a very
powerful tool as it allows you to define things such as type faces, link colours
for a web site globally. Any alterations to the .css file will affect every page
which is linked to it.
Inline: Style information can also be placed within the body of a document.
This is achieved by assigning a style attribute to a tag such as a <p> tag
or <span>,<div> etc block level tag. The style information is then
written directly to the tag.
Example:
< div style="font-family:Arial,Helvetica,sans-serif; font-size:10pt">Blah
Blah Blah</div>
This style is ONLY available within the block tag in which it is defined.
WebCT supports the use of CSS, the most browser-proof method being to embed
the styles into your HTML document, rather than link to a style sheet.
Explore Style Sheets:
This is the end of the basic HTML module. Now go to Advanced
HTML >
|
