La priorité des sélecteurs CSS !

La priorité des sélécteurs

Vous connaissez tous les sélecteurs, c’est ce qui permet de spécifier tel élément HTML à un autre et de lui faire appliquer des propriétés comme une position dans une page web ou sa couleur par exemple.

Mais que se passe-t-il si deux règles ciblent le même élément et lui appliquent des valeurs différentes sur une même propriété ? Du style une règle qui met une balise div en rouge et une autre règle qui le met en bleu. Le CSS donne la priorité à une règle en fonction de son poids ! Un poids ? Et bien, voyons ce qui fait qu’une règle est choisie au lieu d’une autre et ça n’a rien à voir avec les kilos qu’elle fait ! C’est parti !

[ Lire la suite ]

Les 4 sélecteurs de combinaison !

Les sélecteurs de css3, partie 2 !

On a vu les 5 sélecteurs de bases en CSS qui permettent de cibler des éléments HTML pour leur appliquer tout un tas de règles. Avec ces sélecteurs, on peut déjà faire plein de trucs sympathiques sur une page web. Mais il en existe encore d’autres qui étends encore plus les possibilités de sélections, voyons un nouveau type de sélecteurs qu’on appelle des sélecteurs combinatoires ! C’est parti !

[ Lire la suite ]

Le positionnement en CSS !

Des positions css3 sur un élément

Le positionnement des éléments sur un site web se fait grâce à la structure HTML par défaut. En fonction des éléments HTML et de la hiérarchie, ces éléments vont s’empiler les uns sur les autres.

Certains éléments se succèdent verticalement, ce sont les éléments de type inline, on retrouve le fameux div, mais aussi les balises h pour les titres et les balises p pour les paragraphes. Sans modification par le CSS, ces éléments prennent toute la largeur disponible. De plus, il y a un saut de ligne avant et après ce qui donne cet empilement vertical.

Nous avons aussi les éléments de type block, qui sont l’inverse des types inline, elles ne prennent pas de place et peuvent s’empiler horizontalement. Ces types de balises servent à encadrer ou à mettre en valeur du contenu.

Ce qui fait la puissance du CSS c’est qu’il nous la donne la possibilité de positionner nos éléments comme on veux et peu importe son type ou sa place dans le code HTML grâce à la propriété position, utilisée conjointement avec d’autres propriétés de position comme top, left, etc…

Nous allons voir les différentes valeurs que peut prendre la propriété position ! C’est parti !

[ Lire la suite ]

Box Sizing, la propriété magique !

Taille d'un élément HTML et toutes les propriétés qui entre en jeu

Un article encore signé CSS ! Pour spécifier la taille d’un bloc quelconque en HTML, par exemple un div ou un span, on utilise la propriété width. Mais savez-vous que la taille réelle de ce bloc n’est pas la valeur de width ?

En effet, la vraie taille d’un élément prend bien évidemment en compte les valeurs width et height, mais aussi sa bordure et son padding (la marge entre la bordure et le contenu) !

Bref du coup on ne sait plus trop qu’elle taille notre bloc fait réellement et cela peut être un peu embêtant, surtout si vous avez des contraintes et que vous voulez des tailles précises. Heureusement, ici on aime le code sans prise de tête, je vous présente une petite astuce qui va vous faire économiser des calculs et du temps ! C’est parti !

[ Lire la suite ]