CSS tutorial and HTML tag styling

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.

CSS 2 and CSS 3 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.

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.

HTML Styling

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 ...

Styling H1 tag

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.

CSS Widgets

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

Bar chart

Generating bar chart in CSS and no framework.

Image gallery without JavaScript

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

CSS Lightbox

A lightbox without framework.

Interfaces

Skeuomorphism and graphical interface

Widely used concept by Apple, and successfully.

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. (History)

Browser support. External link. Show support by browsers.

© 2006-2024 Xul.fr