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:  TUTORIELSCSS

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 (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):

Introduction to HTML CSS3 . Info - All you ever needed to know about CSS3 Getting started Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations. jQuery required Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported. Precompiled Bootstrap Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── │ ├── bootstrap.min.css │ ├── │ ├── bootstrap-theme.css │ ├── │ ├── bootstrap-theme.min.css │ └── ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 Bootstrap source code - 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.

don’t use @import In Chapter 5 of High Performance Web Sites, I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo, creating several test pages and HTTP waterfall charts, all shown below. The bottomline is: use LINK instead of @import if you want stylesheets to download in parallel resulting in a faster page. LINK vs. There are two ways to include a stylesheet in your web page. Or you can use the @import rule: <style> @import url('a.css'); </style> I prefer using LINK for simplicity—you have to remember to put @import at the top of the style block or else it won’t work. @import @import I’m going to walk through the different ways LINK and @import can be used. <style> @import url('a.css'); @import url('b.css'); </style> If you always use @import in this way, there are no performance problems, although we’ll see below it could result in JavaScript errors due to race conditions. Figure 1. always using @import is okay LINK @import

Web technology for developers The open nature of the World Wide Web presents incredible opportunities for people who want to create websites or online applications. To take full advantage of the web's capabilities, you need to know how to use them. Explore the links below to learn more about various web technologies. Web technologies Basics HyperText Markup Language (HTML) is used to describe and define the content of a webpage. Cascading Style Sheets (CSS) are used to describe the appearance or presentation of content on a webpage. Hypertext Transfer Protocol (HTTP) is used to deliver HTML and other hypermedia documents on the web. Scripting JavaScript JavaScript is the programming language that runs in your browser. Web APIs Web Application Programming Interfaces (Web APIs) are used to perform a variety of tasks, such as manipulating the DOM, playing audio or video, or generating 3D graphics. Graphics Canvas The <canvas> element provides APIs to draw 2D graphics using JavaScript. WebGL Web media technologies WebRTC Other MathML

Components Available glyphs Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible. How to use For performance reasons, all icons require a base class and individual icon class. Don't mix with other components Icon classes cannot be directly combined with other components. Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements. Changing the icon font location Bootstrap assumes icon font files will be located in the .. Change the @icon-font-path and/or @icon-font-name variables in the source Less files. Use whatever option best suits your specific development setup. Accessible icons Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters.

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.