Cascading Style Sheets (CSS) existed as a recommendation of W3C since 1996, but the real acceptance of CSS happened in the last one or two years (with the arrival of newer browsers like IE 5). Nowadays almost every web-site contains Cascading Style Sheets in its source code. This web technology gives web authors greater control over the look of elements in a web page. CSS makes it possible to remove the underline in text-links, to make text - rollovers without JavaScript, to absolutely position elements on a page, define a style-change rule once and then use it on several pages (and that way reducing the amount of work) and so on. Style sheets can be placed in the header of the HTML document, embedded in <style>...</style> tags. Style rules can also be placed in the body section and in that case it applies usually to individual elements (for example:<p style="color:red;font:bold 18">). The third option is to specify external style sheets : that is a document with plain text where all the rules are specified and which is saved with a .css extension. Rules defined in such a document can be applied to all HTML documents which are linked to it, for example: <link rel="stylesheet" href="xy.css" type="text/css>, where xy is the name of the external document.
Style sheets can be defined with the class attribute (a class name is preceeded by a period (.) and it can appear several times in a document), the id attribute (an ID name is preceeded by a hash (#) and it can appear only once in a document) and by setting rules for HTML elements (P, H2, DIV etc). Example:
The style for this text is defined inside the DIV tag using the style attribute (bold and green).
</div>
Links can change their appearance if CSS is used. Example:
<style>
a:link { font-weight:bold; color:darkblue; text-decoration:none }
a:visited { font-weight:bold; color:maroon; text-decoration:none }
a:hover { font-weight:bold; color:blue; text-decoration:underline }
a:active { font-weight:bold; color:blue; text-decoration:underline }
a:focus { font-weight:bold; color:blue; text-decoration:underline }
</style> Now whenever the mouse goes over a link (hover), the link changes the color to blue and becomes underlined. The order (: link, : visited, : hover, :active) has to be kept for this to work, but you don't have to use all the attributes.
Filters: They are also a part of CSS and some great effects can be achieved with filters in combination with scripts. Some of the visual filters are alpha, blur, flipV, mask, dropShadow etc. Transition filters are defined with numbers from 0 to 23. With the introduction of IE 5.5 the filter syntax progid:DXImageTransform.Microsoft. is preffered, but the IE 4 syntax is also accepted. I use in the below examples the IE 4 syntax.
Filter examples:
<span style="width:105;filter:Shadow(color=gold, strength=3)">Example with shadow</span>
