Keith Soltys, ksoltys@home.com, http://members.home.com/ksoltys/
HTML was developed by Tim Berners-Lee in the late 1980s to share scientific research information electronically. The first versions of HTML had only basic formatting options and the first browsers operated in text mode. The intention was that most formatting would be controlled by the user’s browser.
With the release of Mosaic and later graphical browsers, the Web became a graphical environment. The World-Wide Web Consortium (W3C) made additions to HTML to allow the use of coloured text, graphics, varying fonts, and typographic special effects, as well as expanded layout options (tables, frames, image maps). The commercialisation of the Web led to demands for even more formatting control.
Netscape and Internet Explorer quickly became the dominant Web browsers. Each had different ways of handling advanced formatting.
Cascading Style Sheets are an attempt to return to structural markup by separating format from content. The first specification, CSS1 formalized existing HTML standards in a style-sheet model, providing control over:
The most recent specification, CSS2, provides enhanced formatting controls and multimedia extensions.
A style is a collection of display and positioning attributes. A style has a name. If the name is the same as an HTML tag, the style attributes are applied to all tags in that document.
To be technical, a style is a rule, which consists of two parts, a selector and a declaration.
Selector {declaration}
For example:
H1 {Font-Family: Verdana, Arial, Helvetica, sans-serif;
Color: #800000; Font-Size: 18pt; Font-Weight: bold;}
defines a H1 heading with dark brown text using 18-point bold Verdana.
You can apply styles in three ways: inline, embedded, or linked.
The style is defined in the document, usually in an HTML tag. You can modify the properties of a tag, a group of tags, or a block of information. This is OK for one-off formatting but wasteful if you have to apply the style more than once.
<H1 STYLE="Font-Family: Verdana, Arial, Helvetica, sans-serif; Color: #800000; Font-Size: 18pt; Font-Weight: bold;">
The style is defined in a document, in a <STYLE> </STYLE> block, usually in the <HEAD> section. Styles apply to the entire document.
<STYLE TYPE="text/css">
<!--
H1 {Font-Family: Verdana, Arial, Helvetica, sans-serif;
Color: #800000; Font-Size: 18pt; Font-Weight: bold;}
--></STYLE>
The style definitions are placed in a comment block for compatibility with older browsers.
The style sheet is a separate document with a .css extension. You put a link to it in the header of the document that you want to format.
<LINK REL=Stylesheet HREF="kshome.css" TYPE="text/css"
TITLE="Styles for KS home pages">
You can apply one style sheet to many documents and you can have many stylesheets as part of a site.
You can create styles and apply them to page elements that aren’t part of existing tags or you can use them to create variants of existing tags. For example:
.small {font-family: "Arial, Sans-Serif";
font-weight: normal;
font-size: 8-pt; text-align: center;}
can be applied to a standard paragraph <P class=small> This is a small paragraph.</P> or a list item <LI class=small> This is a small list item.</LIL>.
It depends on your audience. It’s best for corporate environment or where you can control the use of a browser
http://www.w3.org/Style/ Web Style Sheets page at the W3C.
http://www.blooberry.com/indexdot/css/, Style Sheets Guide by Index DOT HTML.
http://style.webreview.com/ Cascading Style Sheets Guide by Web Review.
http://www.zdnet.com/devhead/filters/css/ CSS-related articles from ZDNet’s Devhead site.
Soltys Family Home | Internet Resources For Technical Communicators | Articles | Core Dump