http://www.w3schools.com/css/css_reference.asp
Online Color Calculator
Effects
Image Sprites
http://99designs.com/
http://www.smashingmagazine.com/2008/12/01/100-free-high-quality-xhtmlcss-templates/
http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/
http://www.csstemplates.net/
http://www.csswizard.net/
http://www.freecsstemplates.org/
http://www.free-css-templates.com/
http://www.free-css.com/
http://www.freecsstemplate.net/
http://html-color-codes.com/
http://www.computerhope.com/htmcolor.htm
http://store.giell.com/Hair/Treatments/
http://www.webmonkey.com/reference/Color_Charts
http://www.majordojo.com/2009/01/jquery-dialog-theme-for-movable-type.php
http://ithemes.com/
http://www.filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/
http://docs.jquery.com/UI/Theming/Themeroller
http://www.colorhunter.com/
http://www.cssjuice.com/25-popular-color-scheme-and-palette-generators/
http://www.free-press-release.com/news/200901/1232666663.html
http://www.useit.com/alertbox/9707a.html
http://www.useit.com/
http://www.alistapart.com/topics/code/css/
http://cssmania.com/
http://css-tricks.com/
http://cssremix.com/
http://www.csszengarden.com/
http://www.w3.org/Style/
http://www.dynamicdrive.com/style/
http://www.cssglobe.com/
http://css.weblogsinc.com/
http://bestwebgallery.com/
http://www.cssdrive.com/
http://www.visual-blast.com/
http://www.freecsstemplates.org/
http://cssvault.com/
http://www.glish.com/css/
http://www.sitepoint.com/
http://www.webcredible.co.uk/user-friendly-resources/css/planning-stylesheet.shtml
http://www.webcredible.co.uk/user-friendly-resources/
http://www.alistapart.com/stories/goingtoprint/
http://developer.apple.com/internet/webcontent/bestwebdev.html
http://www.brookgroup.com/Resources/Design-and-Usability/CSS-Best-Practices.html
http://www.mezzoblue.com/archives/2003/11/17/css_best_pra/
http://www.adobe.com/devnet/dreamweaver/articles/css_practices.html
http://www.kashit.org/2008/02/09/css-best-practices/
http://webdesign.about.com/od/css/a/aa073106.htm
http://www.wheeloffortune.com/
http://news.bbc.co.uk/
http://www.howstuffworks.com/
http://www.discovery.com/
http://www.yahoo.com/
http://abc.go.com/
http://www.abc7.com/
http://www.facebook.com/
http://www.myspace.com/
External stylesheet:
<link rel="stylesheet" type="text/css" href="mystyle.css" />
Internal stylesheet:
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
Old browser that do not understand the style tag will render its content on the page. To avoid this, use an HTML comment as follow:
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
Inline style
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
Comments:
/* This is a comment */
Basic CSS:
selector {property: value}
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:
body {color: black}
Note: If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}
If you wish to specify more than one property, you must separate each property with a semicolon:
p { text-align:center; color:red }
Selectors:
Class selector. Select all elements that belong to class "center":
.center {text-align: center}
Attribute selector. Select all input elements that have a type attribute with a value of "text":
input[type="text"] {background-color: blue}
ID selector. Select an element by its ID:
#mydiv {color: green}
* match any element
E match any element of type E (E is an HTML tag)
E F match any element of type F that is direct descendent of type E
E > F match any element of type F that is a child of element type E
E:first-child
E:link
E:visited
E:active
E:hover
E:focus
E:lang(c)
Stylesheet switching and alternative stylesheet
Main stylesheet:
<link href='/css/main.css' rel='stylesheet' type='text/css' title='main' media='screen'>
Alternate stylesheet:
<link href='/css/alt1.css' rel='alternate stylesheet' type='text/css' title='alt1' media='screen'>
Persistent stylesheets are always enabled (they are always on) and are combined with the active stylesheet. They can be used for shared rules that are common to every stylesheet. To make a stylesheet persistent, the rel attribute is set to 'stylesheet' and no title attribute is set.
Preferred styelsheets are enabled by default (they are on when the page is loaded). They can be disabled if the user select an alternate stylesheet. To make a stylesheet preferred, the rel attribute is set to 'stylesheet' and the style sheet is named with the title attribute. Several preferred style sheets can be grouped together by giving them identical title attribute. These grouped stylesheets are then all enabled or disabled together. If more than one group of preferred style sheet are declared, the first group take precedence.
We can store the name/title of the selected style sheet in a cookie, and some javascript, to make the effect of selecting a stylesheet persist across pages.
User Style Sheets
User Style Sheets are created by end users and shared with others by userstyles.org. "User Style Sheets" are mostly used by end users that have impaired vision. As your site become popular (people start to create user style sheet for your site), and avoid changing your style drastically / frequently, because the people that use "user style sheets" would have to update their style sheet to work with your new style, unless your new design would make it better for everyone.
Positioning Properties
clear sets the sides of the element where other floating elements are not allowed. Possible values are left, right, both, none.
| Value | Description |
|---|---|
| left | No floating elements allowed on the left side |
| right | No floating elements allowed on the right side |
| both | No floating elements allowed on either the left or the right side |
| none | Default. Allows floating elements on both sides |
cursor specifies the type of cursor to be displayed. Possible values are url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help
display sets how/if an element is displayed. Possible values are none, inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption
| Value | Description |
|---|---|
| none | The element will not be displayed |
| block | The element will be displayed as a block-level element, with a line break before and after the element |
| inline | Default. The element will be displayed as an inline element, with no line break before or after the element |
| list-item | The element will be displayed as a list |
| run-in | The element will be displayed as block-level or inline element depending on context |
| compact | The element will be displayed as block-level or inline element depending on context |
| marker | |
| table | The element will be displayed as a block table with a line break before and after the table |
| inline-table | The element will be displayed as an inline table with no line break before or after the table |
| table-row-group | The element will be displayed as a group of one or more rows like tbody |
| table-header-group | The element will be displayed as a group of one or more rows like thead |
| table-footer-group | The element will be displayed as a group of one or more rows like tfoot |
| table-row | The element will be displayed as a table row like tr |
| table-column-group | The element will be displayed as a group of one or more columns like colgroup tag |
| table-column | The element will be displayed as a column of cells like col tag |
| table-cell | The element will be displayed as a table cell like td and th |
| table-caption | The element will be displayed as a table caption like the caption tag |
float sets where an image or a text will appear in another element. Possible values are left, right, or none.
| Value | Description |
|---|---|
| left | The image or text moves to the left in the parent element |
| right | The image or text moves to the right in the parent element |
| none | Default. The image or the text will be displayed just where it occurs in the text |
position places an element in a static, relative, absolute or fixed position. Possible values are static, relative, absolute, fixed
| Value | Description |
|---|---|
| static | Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations) |
| relative | An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position |
| absolute | An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties |
| fixed | An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode) |
visibility sets if an element should be visible or invisible. Possible values are visible, hidden, collapse.
| Value | Description |
|---|---|
| visible | The element is visible |
| hidden | The element is invisible |
| collapse | When used in table elements, this value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If this value is used on other elements, it renders as "hidden" |
line-height sets the distance between lines. Possible values are normal, number, length, %
max-height sets the maximum height of an element. Possible values are none, length, %
max-width sets the maximum width of an element. Possible values are none, length, %
min-height sets the minimum height of an element. Possible values are length, %
min-width sets the minimum width of an element. Possible values are length, %
font
font-size-adjust
font-stretch
margin
border
outline
padding
clip sets the shape of an element. The element is clipped into this shape, and displayed. Possible values are shape, auto
| Value | Description |
|---|---|
| shape | Sets the shape of the element. The valid shape value is: rect (top, right, bottom, left) |
| auto | Default. The browser sets the shape of the element |
overflow sets what happens if the content of an element overflow its area. Possible values are visible, hidden, scroll, auto.
| Value | Description |
|---|---|
| visible | Default. The content is not clipped. It renders outside the element |
| hidden | The content is clipped, but the browser does not display a scroll-bar to see the rest of the content |
| scroll | The content is clipped, but the browser displays a scroll-bar to see the rest of the content |
| auto | If the content is clipped, the browser should display a scroll-bar to see the rest of the content |
vertical-align sets the vertical alignment of an element. Possible values are:
| Value | Description |
|---|---|
| baseline | Default. The element is placed on the baseline of the parent element |
| sub | Aligns the element as it was subscript |
| super | Aligns the element as it was superscript |
| top | The top of the element is aligned with the top of the tallest element on the line |
| text-top | The top of the element is aligned with the top of the parent element's font |
| middle | The element is placed in the middle of the parent element |
| bottom | The bottom of the element is aligned with the lowest element on the line |
| text-bottom | The bottom of the element is aligned with the bottom of the parent element's font |
| length | |
| % | Aligns the element in a % value of the "line-height" property. Negative values are allowed |
Keep structure and design separate
Each HTML or XHTML document must begin with a valid doctype declaration.
Progressive enhancement
Do not make functioning of the website dependent on optional technology, such as CSS and client-side scripting: optional technology should complement the information on the site and its use, and should not interfere with access to it if this technology is not supported.
The alt (alternative) attribute should be used on every img (image) and area element and should provide an effective alternative text. Do not use an alt attribute to display tooltips. Instead, use the title attribute.
Use of the longdesc (long description) attribute is preferred if the alternative text on the alt attribute is inadequate for understanding the information in the image.
When using image maps, indicate an effective alternative text for both the img element and each area element by means of the alt attribute.
Decorative images should be inserted via CSS as much as possible. Informative images should be inserted via HTML.
Applying CSS Image Replacement techniques for replacing essential information is not recommended.
no 'click here'
Links on government websites should not automatically open new windows without warning.
Do not open any new windows automatically, unless the location of the link contains useful information that may be necessary during an important uninterruptible process.
Links to e-mail addresses: the e-mail address to which the message is addressed must be visible in the link text.
Do not apply any technical measures to the website to hide an e-mail address from spam robots.
Use the label element to explicitly associate text with an input field in a form.
Group input fields by means of the fieldset element.
Avoid automatic redirection during interaction with forms.
Do not ask a visitor to provide more information by means of a form than necessary for the purpose of the form. Keep forms as short as possible and limit the mandatory completion of form fields.
Indicate which fields are mandatory and which are optional.
Provide alternative contact options, such as address details, telephone number or e-mail addresses, if available.
Once the visitor has completed and sent the form, send him confirmation that his message has been received by the recipient (autoreply).
Use reset buttons only if the form initially contains data.
Do not use client-side script for essential functionality on web pages, unless any lack of support for these scripts is sufficiently compensated by HTML alternatives and/or server-side script.
The visitor should have the option of choosing between languages on every page of the site.
Links for language choice should have a clear and consistent place in the navigation of the site.
Write links to language versions in their corresponding languages.
Use a unique, descriptive title for each page.
Use language that the visitor understands: limit the use of jargon, difficult terms and abbreviations.
Give visitors an 'escape route': possibilities to continue if they get stuck. Escape routes include useful links, being able to use the back button, a search function, and being able to correct input errors immediately.
Don't make visitors guess: provide information on how they can correct errors they have made. Take into account the most common errors. Eat your own dog food?
Create modified error pages for errors such as dead links (404 Not Found) where the visitor is given options for continuing within the site.
In the event of an error message as a result of sending a form, give the visitor the option of correcting the error in the form immediately and don't make him be dependent on the use of the back button.
When implementing a search engine on the website: use 'smart' search technology that takes into account spelling errors, similar search terms, terms in singular or plural form, etc.
Provide a well-organised list of the most relevant search results. If too many search results are provided, it takes visitors too long to find the desired information. Give visitors the option of entering search criteria, or sorting the search results.
Give visitors the option of reporting errors on the site.
Use colours, icons and textual explanations to draw the visitor's attention to an error message and explain the problem.
Give visitors the option of finding information in alternative ways. For example, by providing a sitemap, search functions, or by means of a request by e-mail, letter or telephone.
