CSS Basics

CSS Basics

contains following chapters:

1. Chapter 1 - Introduction to CSS



2. Chapter 2 - CSS Syntax


3. Chapter 3 - CSS Classes


4. Chapter 4 - CSS IDs


5. Chapter 5 - CSS Divisions


6. Chapter 6 - CSS Spans


7. Chapter 7 - CSS Margins



8. Chapter 8 - CSS Padding


9. Chapter 9 - CSS Text


10. Chapter 10 - CSS Fonts


11. Chapter 11 - CSS Anchors, links and pseudo classes


12. Chapter 12 - CSS Backgrounds


13. Chapter 13 - CSS Borders



14. Chapter 14 - CSS Lists


15. Chapter 15 - CSS Width and Height


16. Chapter 16 - CSS Classification


17. Chapter 17 - CSS Position


18. Chapter 18 - CSS Pseudo Elements

Web Design related topics

Web Design from Scratch
- Free web design course - basics, layout, free tutorials, case studies, how to guides and examples.

Contains mainly the following sub-sections:

• Basics


• Design process


• Opinion


• Business


• Goal-oriented design


• Graphic design


• Site architecture


• Accessibility


• Usability


• Copy writing


• Production


• HTML


• CSS


• JavaScript / DHTML


• Recommended

Topics in Usability

Topics in Usability

Usability Basics
Introductory information about usability

Usability Toolkit
A collection of forms, samples and other useful tools

Research and Resource Sites
Links to other sites with good resource collections

More about the following:
- Usability Labs and Participant Recruiting Services
- User Analysis and Usability Evaluation Methods
- Conducting and Reporting Usability Activities
- Accessibility, Ergonomics and Special Audiences
- Design Topics
- Standards and Guidelines
- Career and Training Information

How to Improve Your Logo

http://www.fizbang.com/1-3-06.php

Logo "touch-up" is one of our most frequent requests. Our final work must be more effective, more visually appealing, and most importantly, recognizable as a revision of the old logo. How do we go about this? I wrote this guide both to offer potential business clients insight into our graphic design process and to help aspiring graphic designers.

- Logo Design Objectives
- Tips for Improving Logos
- Apple's and Microsoft's Logos
- How We Improve a Logo
- Conclusion

CSS Hacks and IE7

CSS Hacks and IE7

Recently the Microsoft blog announced some of the changes we may expect for the release of the IE7 browser, perhaps in early 2006. It's very good that we are getting this advance notice, because MS is biting the bullet and cleaning up a lot of selector effects that coders are using to hack special rules for Explorer.

Specifically a number of CSS hacks that rely on IEwin's failure to support certain advanced selectors will be failing, because IE7 will introduce IE's support those selectors. In the long run, this is a very good thing for us CSS'ers, since it will give us a lot more power and control over what our CSS does and where. Unfortunately, in the short run it will mean rewriting stylesheets and making alternate provisions for hacking IEwin.

Read More...

CSS Zen Garden

http://www.csszengarden.com/


A demonstration of what can be accomplished visually through CSS-based design.

Download the sample html file and css file from the site for trying it out yourself.

CSS Page Maker

CSS Source Ordered 1-3 Columned Page Maker v2.90 from ClevaTreva Designs

Features:

* Source Ordered Layout (Content First).
* Substantial x-browser support in one design.
* 100% page height design (except MAC IE 5.x, which is fluid height instead). Fluid height version soon.
* No images used to make layout (unless you add your own 3D effects).
* Fully customisable by user from online form (makes the css for you).
* Heavily commented css and source code to explain design.
* User can select from various Doctypes to use.
* On line Tooltips to explain the form.
* Uses source code ideas from Paul O'Brien, Big John, and loads of others, plus lots of ideas of my own!
* Allows multiple header and footer rows.
* Centered/Left Aligned fix-width design (fluid width design may come later), user sets the widths of all columns.
* Top and Bottom margins (shows background color) now possible within the 100% height.
* It's FREE.

CSS: Fast Rollovers Without Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We've got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

http://wellstyled.com/css-nopreload-rollovers.html

www.welie.com -- patterns in Interaction Design

A huge collection of patterns in Interaction Design.
http://www.welie.com/patterns/index.html

Typetester ? Compare fonts for the screen

What is Typetester?

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer's life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

Technical details

Typetester's code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.