CSS and (X)HTML lessons and tutorials

Alsacreations, creating websites with CSS and (X)HTML : tutorials and lessons

CSS Style Sheets are a complement to HTML (or XHTML) language and their function is to take care of all the layout aspects of a document. This goes from aesthetics (colors, fonts...) to functionality (positioning, structure, navigation).

Current Web norms encourage webmasters and website conceptors to rigorously respect this separation between content (HTML) and design (CSS).

A basic knowledge of CSS and HTML is required to understand these tutorials and lessons..
It is better to know the basic techniques for positionning in CSS that are explained on the reference site HTML Dog as well as the list of CSS properties and their functions.

Note: Codes and examples in these tutorials are free to use. If they have been helpful and that you use them on your website, please mention their source and create a link to Alsacreations. This is a sign of respect to the author and his hard work on these.
You may also chose to use a support button or the Wishlist.

Indispensable basics :

• Tags structure: blocks / inline
• How to use and position <div> tags and other CSS elements
• What is the difference between a <div> and a "layer"?
• What is the difference between a class (.test) and a id (#test)?
• Too many <div> kills <div>!
• My XHTML valid website is not compatible everywhere! Why?

Tabless layout :

• Tables or div, an example
• Use CSS for layout and design
• Create a complex website without tables (CSS)
• Center CSS elements (horizontally and vertically)
• Create a rounded cadre and graphics without tables
• CSS layout sample

Menus creation :

• Create a simple CSS menu (vertical / horizontal)
• Create a CSS and javascript drop-down menu (vertical / horizontal)
• Create a horizontal menu with tooltips without Javascript (CSS)
• Create a reactive image (rollover) without javascript (CSS)
• Create a graphic menu with only one image and without preload
• Create a CSS menu with tabs
• CSS menus galleries

Miscellaneous articles and tutorials :

• Create expandable "cells" with CSS
• Understand inheritance and styles imbrication
• Create a website for any screen resolution
• Create a reactive zone (image map) with CSS
• View/Hide "layers" without javascript
• Avoid frames and iframes with CSS and PHP
• Create a shadow or a contour on text with CSS
• Create a drop cap on a text with CSS
• An image preloader without javascript
• Deprecated and obsolete HTML tags and properties
• Website optimization: CSS and PHP Include