Apprendre le HTML : les bases des CSS Les CSS (Cascading Style Sheets) peuvent constituer le point de réference du formatage (couleurs et apparence du texte, des liens, et de certains éléments de la page html) de tout le site web. Si votre site comporte plus d'une centaine de pages HTML, il serait fastidieux de les modifier une à une, si vous décidez de changer la couleur de vos liens sur votre site ! Les CSS vous permettent une maintenance extrèmement simple... Les liens avec les CSS Par exemple, si vous désirez que tous les liens de votre site soient rouges, blancs lorsqu'ils sont survolés par la souris, et orange une fois cliqués, vous utiliserez ce code : Pourquoi "a:" ? Autre exemple, mais ici les liens survolés vont être en gras, soulignés, verts et en taille de 20pt : Le body et les CSS Intégrez la couleur du body dans les CSS et non dans le code HTML de la page : si vous décidez de modifier après coup la couleur du body, vous n'aurez qu'à modifier une ligne dans le fichier CSS et non chaque page HTML !
CSS Tutorial Réalisation d'un design complet (HTML / CSS) en 4 étapes Dans ce tutoriel nous allons voir étape par étape comment concevoir le code initial HTML et CSS d'une page web, afin d'acquérir quelques techniques de base. Rien de trop ardu pour une page web de ce type : un titre, un menu, le contenu de la page, et un pied de page contenant les informations d'ordre informatif. Voir le résultat final que l'on souhaite obtenir Télécharger les sources des fichiers (zip) Voici le code HTML construit pour cette page : <! Voir le résultat initial Notez qu'aucun style n'a été appliqué à la page, vous remarquerez que le site est tout à fait lisible et utilisable, certes peu agréable à l'œil mais fonctionnel Note : Le support du tutoriel (graphisme et code) est libre d'utilisation à condition de préciser la source (Alsacreations).
Tuto Geek » Tutoriaux » [CSS] Les bases 1) Introduction Bonjour Le langage CSS, Cascade Style Sheet, traduit littéralement Feuille de Style en Cascade sert à la mise en forme. Il est en effet très utile pour séparer mise en forme et contenu du XHTML. 2) Utilisation du CSS Pour pouvoir l'utiliser, vous devez créer une balise <div> ou <span> avec un attribut class ou id. 1. Il faut savoir qu'il y a des différences entre class et id : - Un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page - Une classe peut désigner plusieurs objets identiques. Par exemple, il peut avoir 1. 2. Mais il n'est pas correct 1. 2. De même entre <span> et <div> : - Un <div> s'applique à un élément bloc, qui contribue à la mise en page du document. - Un <span> s'applique à un élément en-ligne, qui enrichie du texte. Il est préférable de créer une feuille de style à part en .css pour plus de lisibilité. 1. Vous pouvez spécifier le type de media comme screen, print,... 1. 2. 3. 1. Et ceci dans votre feuille de style CSS: 1. 1. 1.h1
Ce qu'il faut et ne pas faire en CSS : Les balises Si vous voulez vraiment entrer dans les standards Web, vous découvrirez bientôt que la chose la plus importante est le codage. Un code correct, solide et bien structuré. Le HTML, XHTML, les balises, les attributs, la structure...C'est tout ce dont il s'agit réellement. Nous sommes attachés aux termes des standards Web et CSS. Le terme CSS est presque devenu un synonyme de standard. J'ai souvent utilisé le terme "CSS designer" ou "CSS ci", "CSS ça" pour expliquer rapidement les méthodes et l'approche dont je parlais. La clé des documents conformes aux standards Web est leur structure. La plupart des documents ont différentes sections (navigation, contenu principal, contenu latéral, le droit d'auteur, zone de contact, etc.). La section la plus importante doit être aussi élevée que possible dans le flux, mais l'importance de certaines sections est également définie par la position des balises d'en-tête (h1, h2, h3, h4, h5, h6). La validation a son importance dans l'analyse de votre code.
XML Francophone Sélecteurs CSS class et id A quoi servent les sélecteurs CSS class et id ? Tout simplement à définir des styles particuliers que l'on voudra reproduire de façon ponctuelle ou récurrente dans les pages HTML.Une fois que la la feuille de style de base n'a plus de secrets, il est temps de passer à la vitesse supérieure. Les sélecteurs class et id sont incontournables et indispensables. Voyons leurs similitudes et leurs différences par deux exemples. Fonctionne avec : Tous les navigateurs Propriétés utilisés : background-color float width margin text-align Le sélecteur class Premier exemple : les pages web sont souvent ponctuées d'ancres permettant de remonter en haut de page, et celles-ci sont souvent placées à droite de la page. Code CSS Code (X)HTML Pour appeler ce style dans la page html, on indique simplement class="haut" à l'intérieur de la balise voulue. <p class="haut"><a href="#haut">Haut de page</a></p> Et voilà, et cette mise en forme peut-être répétée autant de fois que besoin dans la page. Sélecteur id Haut
Galeries CSS, télécharger des thèmes libres de droits Pour qu'un site soit lu il vaut mieux privilégier le contenu au design, cela ne fait aucun doute. En revanche un design bancal, un contraste trop faible, peuvent nuire à la clarté de l'information et de ce fait faire fuir les visiteurs. Voici donc une sélection de quelques sites où vous pouvez télécharger des thèmes (design ou templates en anglais) librement. Il est important de noter que ces thèmes sont prêts à être utilisés. Open Web Design Ce site vous propose une galerie de thèmes avec un moteur de recherche et des filtres sur la version (HTML ou XHTML strict, transitional), le contraste (clair sur foncé, foncé sur clair), couleurs primaires et secondaires... Open Design Community Un groupe de web designers est à l'origine de ce site. CSS Design Templates Ce site est composé d'une section pour les sites classiques ainsi que de plusieurs autres pour des plateformes. Free CSS Templates Offre un certain nombre de thèmes gratuits que je trouve bien réalisés. Free CSS Templates Solucija Osskins
Débuter avec HTML + CSS Ce court tutoriel est destiné à ceux qui commencent à utiliser CSS et n'ont jamais écrit de feuille de style CSS. Il n'explique pas CSS en profondeur. Il explique comment créer un fichier HTML, un fichier CSS et comment les faire fonctionner ensemble. Après cela, vous pourrez lire d'autres tutoriels afin d'ajouter plus de caractéristiques à vos fichiers HTML et CSS. Ou bien vous pouvez utiliser un éditeur HTML ou CSS afin de mettre en place des sites complexes. A la fin de ce tutoriel, vous aurez fait un fichier HTML qui ressemble à cela: Page HTML résultante, couleurs et disposition effectuées avec CSS. Notez que je ne prétends pas que c'est joli :) Voici un exemple de section optionelle. Etape 1: Le langage HTML Pour ce tutoriel, je vous recommande d'utiliser des outils simples comme Blocnote (Windows), TextEdit (Mac) ou KEdit (KDE). <! En fait, vous n'avez pas à le taper: vous pouvez le copier et coller depuis cette page Web dans votre éditeur. Etape 2: Ajouter de la couleur <! En savoir plus
CSS Débutant : cours et tutoriels sur les feuilles de style CSS 21 outils et générateurs CSS pour développeurs web Les générateurs et outils CSS sont de plus en plus nombreux sur la toile, et facilitent la tâche des développeurs web en leur faisant gagner un gain de temps considérable, en particulier ceux qui génèrent du CSS3. Voici une liste non exhaustive de 21 ressources CSS à connaître et à tester dès maintenant ! 1. Bear CSS est un service qui permet de générer une feuille de style à partir d’un code HTML en prenant en compte les éléments et le balisage de la structure du document (id et classes CSS). 2. CSS Type Set est un service qui permet de gérer la mise en forme d’un texte dans une interface simple et intuitive. 3. Border Radius est un générateur déstiné uniquement à la propriété CSS3 border-radius qui permet de créer des coins arrondis sur un élément HTML. 4. 5. 6. 7. CSS3 Please est probablement l’un des tous meilleurs générateurs CSS3. 8. 9. 10. 12.