MyWebGuider.com


A one-stop free Web building tools, hosting, seo-marketing, web articles and guides

What is CSS?

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Its most common application is to style web pages written in HTML and XHTML,

It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). The filename extension is .css

CSS RESOURCES

CSS Layouts vs. Table Layouts

When developing a web site one can choose between creating a CSS-based or TABLE-based web site. Both types of layouts have advantages and disadvantages and perform quite differently. They also raise (or address) accessibility issues.

Facts about web sites using tables

- They're easy to use and implement (compared to css-layouts).

- WYSIWYG (What You See Is What You Get) editors like Frontpage and Dreamweaver or HTML text editors like HTMLkit make it very easy for webmasters to include them.

- Tables "break" on various browsers (newer and older versions) thus producing layout dysfunctions.

- Increase almost unnecessarily the HTML/text ratio. This means that other options could be used to create layouts that produce smaller page files by employing less HTML tags.

Facts about CSS layouts

- Widely supported by modern browsers but not by older browsers

- Allows extreme flexibility in positioning

- Increases usability by encouraging liquid design

- Keeps the HTMl/text ratio at a low level thus decreasing load time

- Allows the display of main content first while the graphics load afterwards

We see tables being used on over 95% of the websites on the net today. We see them being used on web sites with heavy content like news sites as well as on simpler sites like corporate sites or educational sites. Among the many issues related to tables, the most disturbing one (for users as well as web developers) is browser compatibility.

CSS-based layouts have been used until now for text formatting but recently, developers have started using it for positioning and layouts. CSS layouts are still difficult and time-consuming to implement but their advantages are certainly worth the trouble.

W3C advocated many times that tables shouldn't be use in HTML for layout purposes instead proposed css-based tableless layouts. The future of the web is "FULL CSS", and not TABLES, so you should start learning it now.

Using CSS can also avoid accessibility issues raised by table cells. When creating CSS-based web sites the content flows logically without disruption.

Conclusion

Use tables to layout web pages instead of using tableless designs.

Not everyone has time to learn all that it takes to create a sophisticated tableless design which includes:

  • A thorough understanding of HTML.
  • A thorough understanding of the W3C Box Model as well as the difference between Standards Mode and Quirks Mode, and the DOCTYPE switch.
  • A thorough understanding of advanced CSS techniques like floating, positioning, negative margins and more.
  • A thorough understanding of various CSS "hacks" that will keep your tableless design from falling to pieces when it's loaded in various different web browsers.

Tables should only be used in cases where there is no other viable alternative.




Sponsors

CSS TABLES & FORMS

Tool Description Type
PIXELINE strict xhtml and css login form

Free
WUFOO FORM GALLERY download or install predefined HTML templates and CSS styles

Free
CSS TABLE GALLERY free HTML Form Builder - create web form template online

Free
ACCESSIFY accessible HTML/XHTML forms

Free
FORM ASSEMBLY create contact forms, feedback forms, registration forms, order forms

Free
SMASING MAGAZINE free CSS-based tables

Free
CSS TABLES tables styled with CSS rules are much more efficient

Free
IMAPUTZ pure css scrollable table with fixed header using css to allow scrolling within a single html table

Free
CSS TABLE GALLERY css gallery of data tables

Free

GENERATORS

Tool Description Type
MENU TABS GENERATOR Generate menu tabs in second

Free
BLIND TEXT GENERATOR a handy Lorem Ipsum Generator that helps to create dummy text for all layout needs

Free
DUCK ISLAND another text generator

Free
MALEVOLE a text generator with a difference

Free
DESIGNER TEXT a text generator

Free
CSS MENU MAKER generate and download CSS menus

Free
DOT TEMPLATE easily create professional web templates

Free
YVOSCHAAP Wordpress Theme generator

Free
NEUROTIC WEB CSS Rounded Box generator

Free
BGMAKER background image maker

Free
BUTTONATOR drag and drop web buttons for your site

Free
ALL CRUNCHY amazing gradient generator

Free
STRIPE GENERATOR generate seamless striped background images

Free
REFLECTION MAKER image reflection generator

Free
METATITAN generate styles for your CSS selectors on the fly - valid syntax and property names are defined for you

Free
LIST-U-LIKE create cross-browser list-based navigation bars with ease

Free
WEBMASTER-TOOLKIT CSS menu generator

Free
LIST GENERATOR a list generator

Free
WEBDEVTIPS dropmenu pagemaker

Free
LAB.RAILS2U background image maker

Free
DYNAMICDRIVE gradient image maker

Free
EVERAMBER transparent PNG generator

Free
LUCAZAPPA brilliant button maker

Free
DYNAMIC DRIVE button generator

Free
EXPLODINGBOY easy top corner banners

Free
COOLTEXT logo & graphics generator

Free
AJAXLOAD allows you to generate an animated Ajax loading image with your choice of foreground & background color

Free
ACCESSIFY accessible pop-up window generator

Free
TYPETESTER a tool to compare fonts on the web

Free
LIPSUM text generator

Free
YUI YUI-CSS Grid Builder

Free
CSSCREATOR create a fluid or fixed width floated column layout, with up to 3 columns & with header & footer

Free
INKNOISE CSS layout generator

Free
FU2K another CSS layout generator

Free
CLEVATREVA CSS source ordered variable border 1-3 columned page maker

Free
EZDESIGN this sidebar wizard gives you all you need to be able to make your own sidebar with your own content

Free
SOMACON HTML & CSS table border style wizard

Free
COPYSENSE this utility enables the sampling of CSS border styles, and creates the corresponding CSS code for implementation

Free
MYWEBRESOURCES a handy list of generators available on the web

Free

FREE CSS LAYOUTS

Tool Description Type
GLISH CSS layout techniques

Free
TANFA 3 column CSS layout - fluid, multi-column stretch with header, footer, fluid center - fixed or fluid widths

Free
JELLO a different liquid layout

Free
K.CHAYKA miscellaneous tests & samples of layouts, templates & navigation menus

Free
WEBDESIGN progressive layout - how to easily turn with Javascript a CSS-based layout (fixed or fluid) into a progressive one

Free
POSITION IS EVERYTHING how to achieve a 3 column layout with main content coming first in the source code

Free
MAXDESIGN one method of building full CSS layouts

Free
MAXDESIGN LIQUID LAYOUTS liquid layouts the easy way

Free
CSSBOXES various layouts

Free
WEBREFERENCE advanced CSS layouts: step by step

Free
MARDIROS how to transform fixed table layouts to liquid CSS based layouts

Free
BON ROUGE free layouts

Free
3 COLUMN LAYOUTS list of good 3 column layouts

Free
2 COLUMN LAYOUT fluid 2 column layout

Free
SAILA tableless, CSS-based, liquid, three-column layout

Free
BENMEADOWCROFT CSS layout templates

Free

CSS NAVIGATION

Tool Description Type
MYGOSUMENU tree menu, drop down menu, bar menu, simple dhtml menu

Free
CLAGNUT CSS Tabs example

Free
EASY MENU semantically correct xhtml/css/dhtml drop down menus

Free
TANFA CSS Tabs example

Free
CORNER DOCK NAVIGATION Corner Dock Navigation

Free
71 CSS Menus top 71 CSS Menus

Free
SPERLING CORPORATION horizontal dropdown menu (the menu used on this site)

Free
13STYLES free ready made menus

Free
LISTAMATIC using CSS with unordered lists

Free
DRAGON-LABS the ultimate tabbed menu

Free
EXPLODINGBOY free navigation menus

Free
BROTHERCAKE a simple list-based menu with CSS2 menu triggers for browsers that support them

Free
ALSACREATIONS a gallery of CSS web menus

Free
E-LUSION more free navigation menus

Free
BRAINJAR using CSS to build a tabbed display tutorial

Free
CSSVAULT CSS navigation resources

Free
NUNDROO CSS based navigation

Free
CSSPLAY lots of menu demonstrations

Free
SIMPLEBITS bulletproof slants

Free
SIMPLEBITS CSS tabs

Free
SIMPLEBITS mini tabs shapes

Free
SIMPLEBITS mini tabs

Free
SIMPLEBITS mini tab rollovers

Free
2 LEVEL MENU source code & stylesheet for a 2 level menu

Free
24WAYS centered tabs with CSS

Free
HTMLDOG an example page for Suckerfish dropdown menus

Free
ALVIT.DE a CSS navigation showcase

Free
ADAMKALSEY CSS Tabs with submenus

Free
IMFO more accessible graphic menu

Free
NEWT EDGE CSS horizontal & vertical menus

Free
EXPLODINGBOY more free navigation menus for download

Free
TABTASTIC a simple way to implement tabs on your page using CSS/JS

Free

ROUNDED CORNERS

Tool Description Type
ROUNDED CORNERS WITH JS rounded corners with Javascript(jQuery)

Free
CURVY CORNERS ultimate rounded corners

Free
NIFTY CORNERS rounded corners without images

Free
SPIFFY CORNERS a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or JavaScript

Free
SPANKY CORNERS generate semantically sensible, rounded corners with CSS

Free
ROUNDEDCORNR online tool generates HTML/CSS code and images to decorate your Web site with rounded corners and gradient

Free
SCHILLMANIA more rounded corners with CSS

Free
SMILEY CAT a collection of techniques for creating boxes and layouts with rounded corners using CSS

Free
NEUROTICWEB CSS rounded box generator

Free
TECHSTUD dynamic rounded corner image generator

Free
CORNERSHOP this page is for creating rounded corner graphics to use in your website design

Free
LIQUID CORNERS some illustrations of the method "liquid round corners"

Free

CSS GALLERY SHOWCASES

Tool Description Type
CSS LOVE CSS web design gallery featuring the most inspiring and beautiful sites on the web today

Free
CSS REMIX showcasing only the best designs

Free
CSS HEAVEN CSS design showcase

Free
CSS PRINCESS CSS design showcase

Free
CSS CREME web design inspiration

Free
CSS TUX the best dressed sites on the web

Free
ONE PIXEL ARMY web design inspiration

Free
CSS GLANCE Italian website focused on providing its audience with a database of well designed and innovative CSS based websites from all around the world

Free
PIEPMATZEL collecting best practice web standards design examples

Free
WEBSITE GALLERY gallery of the best flash, blog, resources, portfolio, services, and business websites on the internet

Free
DESIGNSHACK examples of great CSS, standards based design to help inspire & create

Free
CSSZENGARDEN the beauty of CSS design

Free
CSSBEAUTY CSS design showcase

Free
CSSVAULT CSS design showcase

Free
STYLEGALA CSS design showcase

Free
CSSIMPORT CSS design showcase

Free
CSSDRIVE CSS design showcase

Free
CSSMANIA CSS design showcase

Free
UNMATCHEDSTYLE CSS design showcase

Free
W3CSITES web sites that conform with the W3C standards

Free
CSS SHOWCASE a showcase gallery of css menus & css navigation tabs

Free

COLOUR RESOURCES

Tool Description Type
COLORLAB colour scheme generator

Free
COLORMATCH a utility to help you select a matching 6-colour palette for your website

Free
AVIVA list of online colour resources for designers

Free
UNSAFE COLORMATCH create 24-bit colour schemes online

Free
MORE CRAYONS this grayscale palette consists of the 16 shades of grey

Free
GENOPAL create great colour schemes

Free
COLOR TOY 2 the flash colour schemer

Free
KULER create and share colour schemes

Free
DAILY COLOR SCHEMES a new scheme every day, with lots of schemes in the archive

Free
COLORJACK colour scheme generator

Free
COLORSCHEMER gallery of colour schemes

Free
COLOR BLENDER takes two user-defined valid colours & creates a palette using a set number of points between the colours

Free
COLOURLOVERS a place to view, rate & review some lovely colours & palettes

Free
DRAAC colorconverter - change your text colors To RGB Or HEX Color Codes

Free
NUTROCKER colour code chart

Free
COLORCOMBOS visualise colour combinations

Free
COLORWHORE a directory of nice colours

Free
LIMITLESS INNOVATIONS interactive colour exploration tools for web designers

Free
WELLSTYLED colour scheme generator

Free
WEB SOURCE 216 web safe color chart

Free
SNOOK colour contrast check

Free
HEX HUB pick a hexadecimal colour code from more than 700 named colors

Free
COLORMIXERS online colour mixer

Free
SLAYEROFFICE online colour tool

Free
REDALT type in the URL & it grabs the interface colors & display them in hex

Free


©2008 All Rights Reserved.  •  All information contained on this website is for informational purposes only. *Disclaimer: www.webguider.com does not warrant any company, product, service or any content contained herein. Any other names used on this website may be trademarks of their respective owners, which I fully respect.
This site is powered by Site Build It