DACS Web Design Special Interest Group

DACS
Resource
Center
Ives Manor
(lower level)
198 Main Street Danbury.

For information contact:
Annette van Ommeren
(aka "Anna Collens")

Join Us!
Just show up or send an email so you can be notified of upcoming meetings.

Intro to Cascading Style Sheets
Cascading Style Sheets (.css) are the best way to control and manage a web site, some advantages include:
Constancy of visual elements (text properties, box properties, etc) Easy to change style of multiple pages simultaneously Control Browser/Platform differences Simplify html code in each page allowing for faster download. 96% of Browsers in use today support CSS1 styles. (80% for CSS2)
One (or more) external style sheets can control the visual look of multiple pages. And a simple change to the style sheet will change all instances where that style is used.

Some possible disadvantages:
Old browsers, Netscape 3x and IE older than 5x will not support CSS. The text will be readable but have no formatting Netscape 4x supports some of the CSS styles. If Netscape 4x support is important, make sure to test on both the PC and MAC platforms!
Types of style sheets:
Internal (embedded) CSS Code in the <Head> of the page, effecting only that page External CSS Separate .CSS file in the root folder. Each page linked to it
CSS can be used to modify:
Font properties: size, color, weight, background etc. Link behavior: change default – colors, underline etc Modify the standard HTML tags Control layout using the “box” model
Declaration:
To make sure browsers interpret CSS correctly, make sure this declaration is placed above the start of the html code of the page < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> You can see it in the source code for this page, as this page uses an external style sheet, called: acstyle.css (my naming)
EXTERNAL .CSS:
A Style Sheet is a simple text file with java script, (no HTML!) saved with the “.css” extension. An HTML file is connected to a .css file with this link within the <head> tag: < link href=“acstyle.css" rel="stylesheet" type="text/css"> Once linked, the styles become available to the HTML file. Select each elements and apply the needed style
INTERNAL .CSS:
The javascript code is written in the <head> section of the HTML page. ONLY applies to that page! Can be used to fine-tune sections only used on that page – (can be in addition to using styles from an external style sheet). The CSS style most closely located to the subject will overrule those further away.
Example of the code for an internal .css style	< style type="text/css"> < !—- .basictext { font-family: "Courier New", Courier, mono; font-size: 12px; color: #009933; }--> < /style>
Styles: Classes:
Used for fonts and can be applied to text, tables, divs etc. Class names ALWAYS start with a period: .mytext (without the period it won’t work!)
Re-defining HTML tags:
A rule that specifies how standard HTML tags should look (Such as “h1, h2” etc) Advantage is that if a browser doesn’t recognize CSS then it will interpret the standard HTML tags. (but customized CSS formatting will be lost)
Example:	<style type="text/css"> < !— h4 {font-family: "Courier New",Courier, mono; font-size: 14px; color: #0099CC; }--> < /style>
Changing the default link format and behavior:
CSS can change color/fonts/background etc for each of the 4 states of links:	a:link a:hover a:active a:visited (Netscape may confuse things!)
Example of a .css link code: Click here to see it in action!	a:link { font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px; color: #993300; text-decoration: none; padding: 2px; width: 200px; background-color: #FFF0E1; }
Additional possibilities with .css-2: A different .css style sheet can be applied depending on the media showing the site. Such as a cell phone, PDA or smaller screens. .CSS can be used to specify which elements will be shown
A seperate .css can be set for print: 1 for screen and 1 for print.
The links in the page: < link href="main.css" rel="Stylesheet" media="screen"> < link href="print.css" rel="Stylesheet" media="print"> The print version can be adjusted to be printer-friendly Can also specify certain elements not to print at all (if specified as classes)
To exclude certain items from a print out Define it as a class=“noprint" then put in the css file for print only:	p.noprint { display: none; }
Can start with the “screen” styles and modify them for print. Change fonts to a serif font Change font “px” size to “pt” size Change font color to black Change back ground colors to white
Handhelds can butcher tables, if they recognize them at all - use CSS positioning. Use "display: none" to hide navigation columns, images, advertising. If you put the handheld stylesheet after the screen stylesheet in your code, then use "display: none" for whatever you don't want going to a handheld. It may work even if the handheld tries to read the screen stylesheet.
Always make sure the external .CSS files are uploaded to the server in the same folder hierachy as on the local site!
(Slightly off-topic, but worth knowing)
After making javascript rollovers, you can put them in an external javascript file. This lightens the HTML of the page	<script language="JavaScript" type="text/JavaScript"src=rollfile.js> </script> Where the “rollfile.js” is the name of the external javascript file
Additional Links of interest: http://www.w3.org/TR/REC-CSS2/ http://www.w3.org/TR/REC-CSS2/media.html http://www.w3.org/TR/2003/CR-css-tv-20030514 http://css-discuss.incutio.com/?page=HandheldStylesheets http://developer.msntv.com/Develop/CSS.asp http://developer.msntv.com/Tools/WebTVVwr.asp