Dans ce tuto en vidéo, je souhaite partager avec vous 10 trucs et astuces autour du langage CSS, afin d'améliorer la qualité ainsi que la rapidité de vos développements. Le but : simplifier son HTML grâce au CSS !
Voici les 10 trucs et astuces CSS que je vous propose dans ce tutoriel en vidéo :
Faire disparaître la dernière bordure droite d'une nav
Souvent dans une navigation, on sépare les liens par des traits verticaux positionnés sur la droite de chaque lien. Voici une astuce pour que le dernier lien n'ait pas de trait vertical à sa droite.
Indenter un paragraphe
Grâce au CSS, indentez très facilement un ou plusieurs paragraphes.
Passer une image en couleur en noir et blanc
Avec le langage CSS, il est très facile de convertir une image couleur en noir et blanc.
Boîte toujours visible
Une boîte DIV de publicité, une navigation... Voici comment rendre toujours visible à l'écran une boîte div très facilement.
Sélectionner les premiers paragraphes
Vous avez plusieurs paragraphes à suivre sur votre page web et vous souhaitez donner un style CSS seulement aux premiers ? Voici comment le faire grâce au CSS.
Propriété CSS sauf sur le 1er élément
Vous souhaitez donner un style CSS à vos différents éléments HTML sauf au premier élément ? Voici comment le faire grâce au CSS.
Changer la couleur des puces d'une liste non ordonnée
Voila une petite astuce sympa ! Comment modifier la couleur des puces d'une liste non-ordonnée.
Manipuler le placeholder d'un champ de formulaire
Voici comment nous pouvons modifier la couleur ou bien la police d'un placeholder qui se trouve au sein d'un champ de formulaire.
Formulaire aligné ou empilé
Lorsque l'on développe un site web responsive, il peut parfois être nécessaire de modifier le comportement des différents éléments d'un formulaire HTML. Soit on les veut l'un à côté de l'autre, soit on les veut l'un en dessous de l'autre, mais sans jamais modifier le code HTML.
Retirer le liseré bleu d'un champ de formulaire
Certains navigateurs tel que Chrome ajoute un liseré bleu autour d'un champ de formulaire lorsque celui-ci prend le focus.
Voici comment faire disparaître ce liseré disgracieux.
Ces 10 astuces CSS vous permettront d'améliorer votre niveau en CSS et vos compétences.
Un QCM de fin vous permettra de valider vos nouvelles connaissances.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ces astuces !
Bon tuto.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Faire disparaître le dernier séparateur d'une nav
Faire disparaître le dernier séparateur d'une nav
Leçon 2
Indenter un paragraphe
Indenter un paragraphe
Leçon 3
Passer une image couleur en noir et blanc
Passer une image couleur en noir et blanc
Leçon 4
Boîte toujours visible
Boîte toujours visible
Leçon 5
Sélectionner les premiers paragraphes
Sélectionner les premiers paragraphes
Leçon 6
Propriété CSS sauf sur le 1er élément
Propriété CSS sauf sur le 1er élément
Leçon 7
Changer la couleur des puces d'une liste non ordonnée
Changer la couleur des puces d'une liste non ordonnée
Plan détaillé du cours
Leçon 1Faire disparaître le dernier séparateur d'une nav
06m23
Leçon 2Indenter un paragraphe
01m54
Leçon 3Passer une image couleur en noir et blanc
03m01
Leçon 4Boîte toujours visible
02m57
Leçon 5Sélectionner les premiers paragraphes
01m50
Leçon 6Propriété CSS sauf sur le 1er élément
01m34
Leçon 7Changer la couleur des puces d'une liste non ordonnée
03m31
Leçon 8Manipuler le placeholder d'un champ de formulaire
01m34
Leçon 9Formulaire aligné ou empilé
04m
Leçon 10Retirer le liseré bleu d'un champ de formulaire
Et oui, il y a certains tuyaux sympas en CSS auxquels on ne pense pas toujours ou qu'on ne connait pas. Parmi ces 10, j'en utilisais certains mais j'en ai aussi découvert des nouveaux. En effet, nous avons tendance à surcharger nos pages de codes html alors qu'on peut faire la même chose sinon même mieux avec le CSS. Merci Carl, c'est toujours aussi agréable d'apprendre avec vous :-)
Avis des apprenants