|
Our topic was Developing Web Styles Guides and Cascading Style Sheets.
Resources
Cascading Style Sheets http://www.htmlhelp.org/reference/css/quick-tutorial.html
O'Reilly Network CSS http://www.oreillynet.com/topics/javascript/css
Dave Raggett's introduction to
style sheets: http://www.w3.org/MarkUp/Guide/Style
Getting Started with Cascading
Style Sheets http://www.wise-women.org/tutorials/csstut/
Web Developer Style Guides http://wdvl.internet.com/Authoring/Style/Guides/
Yale Web Style Guide http://www.webstyleguide.com/
WC3 Style Guide for Hypertext
http://www.w3.org/Provider/Style/
Library of Congress World Wide
Web Style Guide http://www.loc.gov/loc/webstyle/
New York Public Library Style
Guide http://www.nypl.org/styleguide/
BCM Web Style Guide http://www.bcm.tmc.edu/style/
Edit-Work.com Web Style Guide
http://www.edit-work.com/
Web Developers Virtual Library
http://wdvl.internet.com/Authoring/Style/Sheets/
Major links for CSS http://www.westciv.com/style_master/academy/links.html
Style Sheets and Guides http://users.erols.com/foxdm/style.htm
Beginning CSS http://html.about.com/library/weekly/aa011899.htm
Guide to Cascading Style Sheets
http://www.htmlhelp.com/reference/css/
Web Review.Com CSS Guide http://www.webreview.com/style/index.shtml
The Complete CSS Guide http://www.westciv.com/style_master/academy/css_tutorial/
CSS Cookbook http://home.att.net/~knoblock/cookbook/index.html
Cascading Style Sheets Guide
http://www.cacr.caltech.edu/~slombey/asci/html/style/styleindex.htm
>
CSS Tutorial http://nowheres.hypermart.net/briefing.html
Cascading Style Sheets An Overview
http://www.soltys.ca/techcomm/articles/Cascading_style_sheets.html
Visual Quickstart Guide's Chapter
on CSS in DW MX http://www.macromedia.com/desdev/mx/dreamweaver/articles/dwmx_vqs_ch11.html
Web Reference Articles on CSS http://webreference.com/authoring/style/sheets/
Builder.com CSS
http://builder.cnet.com/webbuilding/0-7258.html?tag=dir
CSS Articles http://www.webmasterbase.com/article/43/15
CSS and Different Media http://www.webreview.com/style/2000/01_07_00.shtml
Issues
CSS: Pixels versus Percentages
- Except for text where size
relative to graphics is critical (captions) or overall size is critical
(navigation bars), text should be in a relative font so that users can
easily increase it for readability with their vision on their screen.
- Using fixed font sizes for
all text elements is an errant attempt to design for the web as if it
were print rather than designing for the web as the medium it is.
- Body text sizes should be
relative (em, % or named sizes) so that they scale in relation to the
user's default text size.
- Note that browsers have a
default stylesheet, where the size of elements as h1 are specified in
relative units, so if you specify nothing for the (ie) h1, the browser
will use its default scaling factor to size the h1, likely something
like 1.8.
- Accessibility doesn't mean
you have to use em for fonts. You can use pixels and still validate
for accessibility and create an accessible site.
- Style switcher that allows
users to select from various font sizes -- can be seen on http://wired.com,
http://ebird.org, http://www.zeldman.com/daily/1002a.html#challenge
Tips
Examples of valid code and good
presentation http://www.alastairc.ac/css/examples.asp
Dave Raggett's introduction to
style sheets: http://www.w3.org/MarkUp/Guide/Style
With a chart of 'web safe colors' (regardless of O/S, browser, settings
etc...), why these are 'safe' and also lists the 16 named colors defined
in the HTML 3.2 and 4.01 specifications
Webmonkey article "Death of the
Websafe Color Palette?" explains it all, along with a bunch of other things
related to color: http://hotwired.lycos.com/webmonkey/00/37/index2a.html?tw=design
How do you get your heading tags
(h1, h2, etc) to be single-spaced rather than taking up tons of vertical
space? Answers:
- Try margin-top, margin-bottom,
and padding-top, padding-bottom. Play with those (viewing in different
browsers) to get the effect you want. You may also have to play with
the same settings for you paragraphs. I think I recently did one by
changing the margin and padding for the paragraph so the top was 0 and
the bottom was 14 (or something) to create space b/n the paragraphs
but not b/n the header and the paragraph.
- Use the 'margin' feature to
do that, so something like: h1{margin:0} will cut down that large 'return'
space that seems to accompany h1s.
- For Dreamweaver, but they also
apply to hand coding, too: Change the stylesheet definition, specifically
Line Height = 0 (not blank) Box-Padding/Margin = top & bottom = 0 (not
blank) Positioning/Placement = top & bottom = 0 (not blank) In most
cases it looks like crap on your screen until you view the page through
a live browser (not a preview browser that's built into Dreamweaver).
Warning: As soon as you start tooling around with line spacing issues
such as these, weird stuff happens in different browsers. In one memorable
case, the text looked fabulous on screen in every browser. But as soon
the page was printed out, it printed one line of type per page. Yep,
there were 45 lines of type on the page, so 45 sheets of paper came
out, each with one line of text on them. -
- Use the line break tag
after the first line that's the head so that the headline text and the
body text are really all one paragraph. Use manual formatting or CSS
to format the headline portion to have the font and size you want. View
a sample webpage that uses this method at http://www.tpff.org/findperformers.htm
Contact Us
Email us and let us know you questions, your comments, your
ideas for upcoming meeting topics or inform us of web sites
that would be helpful additions to these lists. |
