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.
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.
- Text over an image.
Using the position property for surimposing layers.
background. Using images.
- Window on a landscape
Scroll the background viewed through a window.
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.
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.
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.
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.
A lightbox without framework.
