background preloader

CSS Table Generator

CSS Table Generator
Related:  html-css

Cours HTML débutant PART 1 Cours HTML Partie 1 Un peu d'histoire.... Le W3C (World Wide Web Consortium, a été créé à l'occasion du premier standard du HTML : HTML 1.0. Entrons dans le vif du sujet ! Le HTML (Hyper Text Markup Language) est composé de BALISES qui s'écrivent de cette manière : <balise> La plupart de ces balises sont par paires.Lorsque vous "ouvrirez" une balise il faudra également la "refermer". <html> est la première balise qui ouvre le document html <head> est la balise dite de tête du document </head>on referme la balise de tête du document <body> on ouvre la balise dite du corps du document </body> on referme le corps du document </html> et on referme la balise html du document Premier exercice Si vous êtes sous windows cliquez sur demarrer puis sur executer et tapez notepad puis tapez la touche entrée. <html> <head> </head> <body> Ceci est ma première page HTML. <html> <head> <title>Ma première page</title> </head> <body> Ceci est ma première page HTML. Exemple & résultat

CSS Sprite Generator | Project Fondue Best CSS Button Generator: Create CSS-only Buttons Comprendre la cascade en CSS | Tutoriaux Cette partie du site n'est plus maintenue, elle reste en ligne pour la postérité. Date de mise en ligne : 13 décembre 2004 Cet article est l'adaptation en langue française (pas une traduction exacte) de l'article Understanding The Cascade Article original par Holly 'n John ©positioniseverything Cet article va décrire ce que signifie exactement "cascade", et pourquoi c'est si important lorsqu'on utilise des feuilles de style en cascade. Rappel de la syntaxe CSS : Que signifie exactement une "feuille de style"? Une "feuille de style" est un jeu de règles de styles. CSS2 est un langage de feuille de style qui permet aux auteurs et aux lecteurs de lier du style (ex. les polices de caractères, l'espacement, les couleurs etc.) aux documents structurés (ex. documents HTML ou XHTML). La source d'un document (X)HTML est un bloc unique de code (tout du moins lorsqu'il atteint l'internaute), et n'importe quel nombre de feuilles de style peuvent lui être appliqué. D'où viennent les feuilles de style ? !

CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. HTML & CSS Table Border Style Wizard Compatibility Notes If you are using Internet Explorer 6, you should be able to use this wizard with only minor limitations. This page does not work with Opera 8 or IE 5 on Mac. Internet Explorer 6 does not support the border-spacing CSS2 table property. Table Border Style Wizard Welcome to the totally revamped HTML and CSS border style wizard! The style sheet code generated by this wizard shows the easy way to apply a style to a table. The above example doesn't show it, but you can also efficiently alternate the row colors in an HTML table by using inheritance. The -moz-border-radius style tag will be rendered in browsers based on the Gecko Runtime Engine. HTML Toggle Buttons You might also have noticed the interesting toggle buttons that control the table style. The toggle buttons above behave like real radio buttons, like the ones on old-fashioned car radios. This is a lot of work to do something fairly simple. Get Firefox Now! Links More CSS Wizards Recommended Books

50 fantastic tools for responsive web design | CSS3 As introduced/coined by Ethan Marcotte in both his article "Responsive Web Design" as well as his best-selling book, one needs three elements to make a site responsive: A flexible/fluid grid Responsive images Media queries There are plenty of other great articles that cover motives, concepts, and techniques regarding responsive web design, so we'll keep the focus of this article on some top tools that will help you become responsibly responsive. Tools for starting out Before you start with building your site, it's best to sketch out how the elements on the page will adapt to fit the different browser sizes of the various devices that they will be viewed upon, and to avoid the disconnect that often comes from thinking primarily about the desktop design and the rest of the responsive iterations as an afterthought (see especially Stephanie (Sullivan) Rewis' comment). 01. 02. 03. 04. 05. Tools for a flexible/fluid grid 06. 07. 08. 09. 10. 11. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. slabText 23.

Comprendre le poids des règles CSS Certain d’entre vous ont peut être encore quelques soucis à comprendre les spécificités des css, spécialement avec les « pas si nouveaux » sélecteur CSS3. Légende : X-0-0 : représente les sélecteurs de type ID, illustrés par les requins.0-Y-0 : représente les sélecteurs de type class, attribut, pseudo-class , illustrés par les poissons0-0-Z : représente les sélecteurs de type balises, pseudo-élément, illustrés par Plankton.* : le sélecteur universel n’a pas de valeur+,>,~ : sont des combinateurs ils offrent plus de spécificités sur les sélecteurs, mais n’augmentent pas la valeurs.:not(x) : le sélecteur négatif n’a lui non plus pas de poids. Vous pouvez télécharger le pdf ici : PDF of fishy CSS specificity here Ces spécificités déterminent quelle déclaration de propriété CSS est appliquée lorsque plusieurs règles s’appliquent à un même élément. Prenons un exemple : <p id="maDiv">You think water moves fast? Les spécificités du poids des sélecteurs ! Calcul des spécificités

Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! screen Écrans handheld print Impression

Créer un Simple Responsive Email en HTML Dans ce tutoriel je vais vous montrer comment créer un email en HTML responsive simplement et qui fonctionnera sur tous les clients mail, y compris les applications et nouveaux clients mail sur smartphone. Pour cela, nous allons utiliser des Media Queries basiques et un système de largeur variable pour assurer une compatibilité maximale. Il fut une époque où les media queries suffisaient à rendre les emails responsive sur les clients mail iOS et Android. Depuis, les applications mail pour les plateformes iOS et Android fleurissent sur les marchés respectifs, avec divers niveaux de support des emails responsives. Le plus marquant étant la dernière mise à jour de l'application Gmail pour Android qui est deux fois plus populaire que l'application mail par défaut chez les utilisateurs d'Android (qui comprend maintenant 11% d'ouvertures au total). Cependant, il se peut que vous ayez des compromis à faire sur le design. Voici ce que nous allons réaliser ensemble : Remplacez le petit "Hello!"

Combinateurs et pseudo-classes CSS Nous poursuivons notre introduction aux basiques de CSS avec un article sur les combinateurs et les pseudo-classes. La maîtrise de cette syntaxe vous permettra d'être plus efficaces et d'améliorer la structure de votre code. Comme leur nom le suggère, les combinateurs aident à combiner différents sélecteurs pour former de nouveaux sélecteurs, plus spécifiques. Il existe quatre types de combinateurs ciblant les relations parent/enfants et frères existant entre les éléments. Ce premier combinateur est représenté par un espace entre deux éléments, par exemple ul / espace / li : Ce combinateur cible un élément F qui est un descendant de l'élément E. Toutes les listes auront un background rouge, car chacune est un descendant (enfant ou petit-enfant) de la liste non-ordonnée. Combinateur enfant E > F Cible un élément F qui est l'enfant d'un élément E. Avec le même HTML que ci-dessus et le CSS : Combinateur adjacent E + F Cible un élément F immédiatement précédé par un élément E. Les pseudo-classes

Apprendre à créer une grille Bootstrap Twitter Le système de grille est le coeur de BOOTSTRAP twitter. Bootstrap Twitter considère qu'une ligne .row fait 12 colonnes. L'idée d'un responsive design c'est de dire que pour telle taille d'écran un élément occupe X colonne(s). Boostrap Devices Bootstrap twitter prend en charge 4 types de format: Il existe un préfixe pour ces formats: On va prendre l'exemple d'affichage de deux éléments. Sur un écran de poste de travail Tablette Smartphone Maintenant que nous avons établi la stratégie d'affichage des éléments, on peut passer au code: Code HTML Rendu Si vous changez la taille de votre navigateur, vous verrez que le rendu ci-dessus s'adaptera à la taille comme nous le voulions plus haut. Explication du code Nous avons construit deux blocs un orange et un vert. Pour le bloc orange: Offset Maintenant voyons comment nous avons géré l'espace entre les éléments pour la version LG ( Large device ). Pour le bloc vert:

Related: