CSS tutorial and case studies

CSS (Cascading Style Sheet) is a grammar of rules for defining the presentation of a document. It is a standard recognized by all Web browsers and that allows the separation of content in pages and their presentation.

The document format is irrelevant: it could be HTML, XHTML, XML or any other format where a rendering engine can handle the rules and apply them on a media. The XUL GUI language Gecko-based rendering uses CSS.

The evolution of Web pages format in HTML 5 trends towards total abolition of presentation tags such as <b> (bold) <i> (italics), while are appearing new tag for medias (video) or structure (section).

The separation of content and presentation improves productivity by allowing defining once a style and reuse it with different contents, with each webpage.
And conversely, it is possible to customize the look by changing the CSS file, user's choice in particular, to promote accessibility, which is allowed by CMS.
The presentation can be adapted according to the media. A standard format is defined which supports, among others, screen (screen), printing (print), mobile (handheld), speech synthesis (speech) or media (all).

The cascade principle

The styles are cascading, meaning that you can refine a rule already defined, by overloading a style or adapt it to a context.
For example, if you define a style for the <a> tag, you can change the definition when this tag is contained in a table with the "<table> <a>" rule .

The order of statements is important. A new rule in a single file or afteran imported file, supersedes the previous one for each property defined in the new rule.

Rules and properties

CSS syntax.
CSS 2 and CSS 3 selectors.
Box-shadow.
Adding a shadow to images or text boxes in CSS 3.
We can also add a Shadow in CSS 2.
display. Property for visual layout.
position. Combining containers et inner tag.
float.
clear.
background. Using images.
padding and margin.
fieldset. Customisation of background and border.
clip. Making thumbnail with CSS.
overflow. Alignment in boxes.
!important. Breaking the precedences.
white-space. Controlling spaces and line feeds. Inserting tabs into a HTML page.
z-index. Layout property that may be used for special effects.
opacity. Transparency and overlay.
transition. Graphical effects by CSS.
Glossary.

Demonstrations and case studies

Text over an image

Window on a landscape

Scroll the background viewed through a window.

CSS Lightbox

A lightbox without framework.

Custom list with images

A list can become a graphical element to enrich a page.

Bar chart

Generating bar chart in CSS and no framework.
The histogram is a simplified version with same size labels.

Image gallery without JavaScript

How to build very quickly an image gallery with no thumbnail.

Pretty table

Building tables with a professional look with CSS and no Ajax framework.

Textured border

How do add a texture to the borders surrounding text boxes or images.

The Apple Menu and more.

CSS button without JavaScript

How to make buttons for the interface of a website, and demonstration of a button bar.

CSS and CMS

The increasing development of CMS (content management systems) further increases the interest of style sheets. It is easy for a user to install templates including styles and images, and change the appearance of the site instantly.

Software such as Drupal allow each user to choose a template and therefore the appearance of the site for himself.

Compatibility

The W3C specification of CSS 2.0 is implemented by all browsers.

Version 3 is being implemented. It is entirely in Safari 4. CSS3 elements may be added to the styles of the current page with an alternative non-standard definition for Internet Explorer.

Compatibility in IE 6 and IE 7.

Browser support. External link. Show support by browsers.