Cascading Style Sheets (CSS)

Listed below are links to sites you may find useful as you learn more about CSS. If you discover a site you feel would be useful, please send me a note lhemenway@santarosa.edu

Begin lesson

• Download Firefox
• Firefox plug in
• Request an account on the SRJC Web server "student"
• Download SSH Client [pc] look for a link on this page.
• Download Fugu [mac]
• SRJC Download site for both SSH Client and Fugu
• HTML ToolKit
• CSS Toolkit
• Taco HTML [mac]
• Article about HTML & CSS Editors [pc]
• Article about HTML & CSS Editors [mac]
• Website for our Textbook

XHTML lesson

• Differences between XHTML and HTML
• W3C HTML validator
• Validation translator written by Carolyn Massell
  When the validator reports an error the message is often confusing and intimidating. Carolyn Massell one of my colleagues, has written a "validation for dummies" version that is very helpful.  It explains in plain English what the validation error means.
• XHTML - Kicking and Screaming into the Future
• Block vs Inline elements
• Special Characters reference

CSS lesson

• CSS Syntax
• Pseudo Class
• Pseudo Elements
• CSS for Websites

Font - Text

• TypeKit - a source for fonts
• Hexadecimal site -http://www.psyclops.com/tools/rgb/
  Use this site when setting the color and background-color value or a block of texts.
• W3school CSS Fonts Tutorial- http://www.w3schools.com/css/css_font.asp
• W3school CSS Text Tutorial - http://www.w3schools.com/css/css_text.asp
• Design Principles for Text - http://desktoppub.about.com/od/designprinciples/l/aa_pod2.htm
• Font Equivalency Chart - http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
• Typography Guidelines, Web Style Guide - http://webstyleguide.com/type/legible.html
• Type Tester - a site where you cans see how a font will look with various settings
  http://typetester.maratz.com/
• Principles of Displaying text on the Web - http://www.improvetheweb.com/how-to-format-text-content-on-your-website

Position

• How to Make sites that work on IE and Firefox
• FloatTutorial

Browser Links

• Download IE - http://www.microsoft.com/downloads/Browse.aspx?displaylang=en&categoryid=6
• Safari (mac) http://www.apple.com/support/downloads/safari.html
• Firefox/Modzilla (both) http://www.mozilla.com/firefox/
• Opera (both) http://www.opera.com/
• Netscape (both) http://browser.netscape.com/ns8/
• Browser Stats W3 school- http://www.w3schools.com/browsers/browsers_stats.asp
• Wikepedia Stats - http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
  
  
• Firefox Web Developer Toolbar
  https://addons.mozilla.org/en-US/firefox/addon/60
  
  Browser Simulators
  
• http://www.totalvalidator.com I really like this site because it allows me to do 3 things at once. I can check my HTML code, run a spell check and simulate how the site would look in other browsers.
  

• http://www.browsrcamp.com - where you can enter a URL and an Apple Safari screen shot is generated, however to get the other mac browsers, you have to pay a fee.

• http://browsershots.org this site has every browser you could ever want to simulate, but it take FOREVER. The average wait time is 20-30 minutes.

• http://lifehacker.com/395353/ietester-renders-sites-like-internet-explorer-55-through-8 renders your site in IE versions 5.5 - 8.

Layout

• Excellent Tutorial on the concept of Float
• Float vs Absolute Layout
• Tutorial on 2 column layout

Navigation

• CSS menu maker - help in designing navigation bars
• Sliding Doors Navigation

Sources of Inspiration

• CSS Zen Garden
• A List Apart
• CSS menu maker - help in designing navigation bars
• Sliding Doors Navigation