background preloader

CSS Tutorials

CSS Tutorials
CSS Beginner Tutorial A step-by-step guide to CSS basics. Go here if you’re comfortable with basic HTML. Applying CSS - The different ways you can apply CSS to HTML.Selectors, Properties, and Values - The bits that make up CSS.Colors - How to use color.Text - How to manipulate the size and shape of text.Margins and Padding - How to space things out.Borders - Erm. Borders. Things that go around things.Putting It All Together - Throwing all of the above ingredients into one spicy hotpot. CSS Intermediate Tutorial Various odds-and-sods building on the basics of CSS. Class and ID Selectors: Make your own selectors without the need for sticky-backed plastic! CSS Advanced Tutorial Exploiting the versatile depths of CSS. Rounded Corners: Corners. Related:  TUTORIELS

CSS Color Module Level 3 Abstract CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. It uses color-related properties and values to color the text, backgrounds, borders, and other parts of elements in a document. This specification describes color values and properties for foreground color and group opacity. These include properties and values from CSS level 2 and new values. Status of this document This section describes the status of this document at the time of its publication. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). A separate implementation report contains a test suite and shows that each test in the test suite was passed by at least two independent implementations. A complete list of changes to this document is available. Table of Contents 1. 2. 3. 3.1. Example(s):

CSS3 . Info - All you ever needed to know about CSS3 CSS Properties/All CSS Properties - TAG index CSS Properties CSS Codes and Examples www.tagindex.net < Home / CSS Properties / All CSS Properties All CSS Properties Categories CSS Properties CSS Properties empty-cells height scrollbar-***-color unicode-bidi < Home HTML5-CSS3.fr - Tutoriels, exemples et démos HTML5 et CSS3 Trouver son code couleur HTML ! Les couleurs avec du CSS sont les mêmes que celles avec un code HTML. Pour faire référence à d'autres couleurs, vous devrez utiliser le code hexadécimal. Vous pouvez choisir votre couleur en cliquant ici : <-- Cliquer ici Il existe des couleurs nommées normalisées : Les 16 couleurs de fondamentales ont un nom parlant (en anglais) normalisé : elles sont reconnus par tous les navigateurs : Il est possible d'avoir l'ensemble des couleurs de l'arc en ciel :) avec une sa valeur hexadecimal : Couleur HTML et CSS En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style. color: Gestion de la couleur du texte letter-spacing: Espace entre les lettres text-align: Alignement d'un texte text-decoration: Habiblement d'un texte A savoir : Dans ce chapitre, la notion d'héritage est appliquée. Couleur d'un texte ou une phrase en CSS Espace entre les lettres Alignement d'un texte Ce texte est aligner à gauche.

Web technology for developers The open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find links to our Web technology documentation. Documentation for Web developers Web Developer Guide The Web Developer Guide provides useful how-to content to help you actually use Web technologies to do what you want or need to do. Tutorials for Web developers A list of tutorials to take you step-by-step through learning APIs, technologies, or broad topic areas. Progressive web apps (PWAs) Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications. Web technology references Web APIs Reference material for each of the individual APIs that comprise the Web's powerful scriptability, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps. Events

CSS1 Properties Syntax Used in Property Definitions Value of type Foo. Common types are discussed in the Units section. Foo A keyword that must appear literally (though without case sensitivity). A must occur, then B, then C, in that order. A or B must occur. A or B or both must occur, in any order. [ Foo ] Brackets are used to group items together. Foo* Foo is repeated zero or more times. Foo+ Foo is repeated one or more times. Foo? Foo is optional. Foo{A,B} Foo must occur at least A times and at most B times. Font Properties Font Family Font families may be assigned by a specific font name or a generic font family. A sample font-family declaration might look like this: Notice that the first two assignments are specific type faces: New Century Schoolbook and Times. Any font name containing whitespace must be quoted, with either single or double quotes. The font family may also be given with the font property. Font Style Font Variant The font-variant property determines if the font is to display in normal or small-caps.

HasLayout et bugs de rendu dans Internet Explorer 6-7 Le HasLayout, dont vous avez sans doute entendu parler au détour d'un tutoriel ou sur un forum, est une spécificité du navigateur Internet Explorer pour Windows, qui affecte les versions 5 à 7 incluses. Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Bref, c'est une question de cuisine interne. Pourquoi s'en occuper, s'il s'agit de cuisine interne ? Eh bien parce que cette cuisine-là n'est pas invisible, et que ses conséquences se font sentir dans nos pages web. Concrètement, qu'est-ce-que c'est? Les explications détaillées sur le HasLayout peuvent être trouvées dans l'article On Having Layout. On retiendra surtout que, pour Internet Explorer, tout élément d'une page HTML peut avoir deux états: soit il a le layout, soit il ne l'a pas. Mais qui a le layout? Un exemple de différence de rendu lié au layout On pourrait multiplier les exemples.

Créer un tableau de bord interactif en jQuery Depuis que Windows 8 a publié les premières images de sa nouvelle interface, beaucoup de gens sont devenus fous autour du style Metro. En 2013 la tendance va faire que vous allez voir de plus en plus de sites Web utiliser le style Metro pour leur design. Mais est-ce vraiment une bonne idée de design pour des sites ? C'est ce que nous allons voir dans ce tutoriel en utilisant un plugin jQuery très utile : Gridster. Gridster vous permet de créer des grilles multicolonnes dans lesquelles vous pouvez utiliser le drag and drop. La meilleure fonctionnalité de ce plugin est la possibilité d'utiliser le drag and drop sur les boites, ce qui permet à vos visiteurs une personnalisation totale de l'apparence de la grille. La première chose à faire pour créer une interface ressemblant à Metro est donc de télécharger ce plugin. Télécharger Gridster. Pour utiliser Gridster il vous suffit, comme pour n'importe quel autre plugin jQuery, de l'inclure dans vos pages Web.

CSS reference style-rule ::= selectors-list { properties-list } ... where : selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list] See the index of selectors, pseudo-classes, and pseudo-elements below. Style rule examples For a beginner-level introduction to the syntax of selectors, see our guide on CSS Selectors.

Related: