Difference between revisions of "CSS"

Revision as of 01:37, 10 November 2009

Cascading Style Sheets (commonly abbreviated CSS) are page coding constructs used to separate form from content. It has become an internationally recognized W3C standard. Typically, you will define the various visual attributes of the objects and elements contained on your page through the CSS, covering any number of the following attributes:

• type
• size
• position
• margins
• borders
• colors
• focus
• displayed/hidden
• ...and many, many more

CSS Print

Initially, one of CSS's main goals was to provide a means of printing webpages in a standard format. In fact, it is only moderately successful at fulfilling this premise and instead has been taken advantage of as a means of centralizing website presentation markup in one area (or a set of modular stylesheets which are adaptable and more easily updated so that changes are reflected across an entire site).

In any case the CSS print command to specify a printer-specific markup is as follows:

CSS Media

CSS Media are another optional way to specify alternate presentations of content depending on the media format or device upon which the media is accessd.

• Adapt to your audience with CSS media types: http://blogs.techrepublic.com.com/programming-and-development/?p=640&tag=nl.e055

Specification

• W3C CSS specifications: http://www.w3.org/Style/CSS/

Controlling CSS from JavaScript

• JS change whole stylesheet: http://javascript.internet.com/css/change-style.html
• How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically: http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
• JavaScript – Change CSS class dynamically: http://www.easywayserver.com/blog/?p=18
• Altering CSS Class Attributes with JavaScript: http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html
• Change CSS Styles through javascript: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_22981408.html?eeSearch=true
• JavaScript Detection using CSS: http://www.openjs.com/articles/javascript_detection_using_css.php

CSS Code

Rounded Corners

• Nifty Corners - Javascript CSS rounded corners: http://www.html.it/articoli/niftycube/nifty5.html#

Cursor Control

• CSS Cursor Control: http://rainbow.arch.scriptmania.com/css/css_cursor_control.html
• Change cursor to an Hourglass during function execution: http://www.webcodingtech.com/javascript/change-cursor.php

Change Class Attribute

• Change HTML class attribute using javascript: http://woork.blogspot.com/2008/01/change-class-attribute-using-javascript.html

Tools

• 40+ “Must see” CSS Tools: http://www.webair.it/blog/2009/02/09/40-must-see-css-tools/
• CSS Layout Generator: http://csscreator.com/version2/pagelayout.php

Blueprint CSS

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

Latest version: 0.9.1 Last updated August 20, 2009 What does Blueprint have to offer?

   * A CSS reset that eliminates the discrepancies across browsers.
   * A solid grid that can support the most complex of layouts.
   * Typography based on expert principles that predate the web.
   * Form styles for great looking user interfaces.
   * Print styles for making any webpage ready for paper.
   * Plugins for buttons, tabs and sprites.
   * Tools, editors, and templates for every step in your workflow.

• BluePrint CSS: http://www.blueprintcss.org/
• Blueprint Grid CSS Generator: http://kematzy.com/blueprint-generator/
• Quick-Start Tutorial: http://wiki.github.com/joshuaclayton/blueprint-css/quick-start-tutorial
• Tabs Demo (v. 0.1): http://blueprintcss.org/demos/tabs.html

Resources

• CSS Reference from W3Schools: http://www.w3schools.com/css/css_reference.asp
• W3Schools - CSS course: http://www.w3schools.com/css/
• design: creating an inline css image border: http://www.dynamixlabs.com/tag/mouseover/
• CSS background-image Tutorial: http://www.netlobo.com/css_background_image.html
• CSS background-repeat Property: http://www.w3schools.com/css/pr_background-repeat.asp
• Applying border & opacity to images onMouseover in CSS: http://www.javascriptkit.com/dhtmltutors/cssimage.shtml
• CSS Tricks - Downloadable Examples: http://css-tricks.com/downloads/
• CSS Tabs 2.0: http://unraveled.com/publications/css_tabs/

External Links

• CSS Zen Garden - The Road to Enlightenment (some of the most impressive CSS Designs known to man): http://www.csszengarden.com/
• CSSupdates - the latest and greatest CSS layouts and stylings: http://www.cssupdates.com/
• CSS Cheatsheet: http://web.tampabay.rr.com/bmerkey/cheatsheet.htm
• Why Inline CSS And JavaScript Code Is Such A Bad Thing: http://css.dzone.com/news/why-inline-css-and-javascript-
• CSS Gallery Inspiration: http://www.webair.it/blog/2008/12/15/css-gallery-inspiration/
• Best Designers and Developers RSS Feed: http://www.webair.it/blog/2009/02/19/best-designers-and-developers-rss-feed/
• Javascript/CSS Scrollbar Effects: http://andylangton.co.uk/articles/css/javascript-css-scrollbars/
• Stylesheet Color Picker: http://andylangton.co.uk/stuff/colour-picker
• Cool CSS Image Pop-up: http://moneytreesystems.com/css/picpopup.html
• CSS Techniques, Experiments and Wheezes: http://www.zytrax.com/tech/css/workarounds.html#spacing
• Son of Suckerfish Dropdowns: http://htmldog.com/articles/suckerfish/dropdowns/
• Skinning HTML Select Boxes: http://www.lotsofcode.com/javascript-and-ajax/jquery-select-box-skin.htm
• Styling dropdown select boxes: http://home.tiscali.nl/developerscorner/fdc-varia/styling-dropdown-boxes.htm
• css Zen Garden (lists as stylized select boxes): http://www.csszengarden.com/?cssfile=/057/057.css
• Forms With Style: http://dhtmlkitchen.com/learn/css/forms/index5.jsp
• Styling an input type="file": http://www.quirksmode.org/dom/inputfile.html
• How To Skin A Web Form With Pure CSS: http://www.onextrapixel.com/2009/08/25/how-to-use-pure-css-to-style-web-form-dynamically-plus-12-awesome-javascript-plugins/
• Javascript - onclick change css class: http://www.webmasterworld.com/javascript/3908605.htm
• CSS Image Swap: http://brassblogs.com/blog/css-image-swap
• Pure CSS Hide and Display Content: http://www.devinrolsen.com/css-hide-and-display-content/
• CSSHttpRequest is cross-domain AJAX using CSS.: http://nb.io/hacks/csshttprequest
• Internet Explorer & CSS issues: http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
• Definitive Guide to Taming the IE6 Beast: http://sixrevisions.com/web-development/definitive-guide-to-taming-the-ie6-beast/
• How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers): http://www.thesitewizard.com/css/excludecss.shtml
• IE PNG Alpha Fix v2.0 Alpha 4: http://www.twinhelix.com/css/iepngfix/demo/
• Semi-transparent Backgrounds Script: http://www.ajaxupdates.com/semi-transparent-backgrounds-script/
• Pure CSS Light Box: http://www.tutorialhero.com/click-49852-pure_css_light_box.php
• CSS-based Dropdown with a twist: http://www.tjkdesign.com/articles/dropdown/demo.asp