WebAssembly.fr/en/

CSS tutorial and HTML tag styling

This CSS tutorial uses interactive demonstrations to learn about the properties and how they work.

CSS (Cascading Style Sheet) is a grammar of rules for defining the presentation of HTML, XHTML or XML document. It is a standard recognized by all Web browsers.

This CSS  tutorial uses interactive demonstrations to learn about the properties and how they work.

CSS syntax.

Selectors.

box-shadow.
Adding a shadow to images or text boxes in CSS 3.

CSS Italic

display. Property for visual layout.

position. Combining containers et inner tag.

float.

clear.

background. Using images.

window on a landscape
Scroll the background viewed through a window.

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.

The separation of content and presentation principle 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, or according to the use or the media.

This allows us to define a style for each HTML element and customize pages and documents.

Embellish the H1 tag in pure CSS
Without adding extra tag in the document, the H1 tag can be styled with various effects through a single CSS property ...

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

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

Blockquote
Quotes highlighted, a simple offset, or a sophisticated rendering such as a speech bubble in front of the picture of the author.

Ray Bradbury quote

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

Custom list with images
A list can become a graphical element to enrich a page.

The Apple Menu
Another case of list styling.

 

Adding new elements to HTML with CSS only and no JavaScript.

Bar chart

Generating bar chart in CSS and no framework.

Histogram
A simplified version with same size labels.

Image gallery without JavaScript

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

CSS Lightbox

A lightbox without framework.