0$ C'est gratuit

Tuto Gratuit : Créer des variables en CSS avec CSS

0$ C'est gratuit

  • Une formation vidéo de 15m56s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Dans ce tutoriel vidéo gratuit, je vous propose de découvrir les propriétés personnalisées CSS (aussi appelées variables CSS).
Nous verrons que les variables CSS sont en réalité plus que de simples variables. Contrairement aux variables créées avec un préprocesseur CSS (Sass, Less, ou Stylus...), les variables CSS sont déclarées dans un fichier CSS classique, elles sont donc accessibles en JavaScript, dans le HTML, et dans le navigateur. Il est donc possible de faire des Media Queries sur les variables CSS.

Il est cependant possible de créer des variables CSS tout en utilisant un préprocesseur CSS (dans le cas de Sass, il est possible de créer une variable CSS dans un fichier .scss).

Au cours de ce tuto gratuit variables CSS, nous verrons :

  • le sélecteur :root
  • comment et où assigner une valeur à une variable CSS
  • comment lire la valeur d'une variable CSS avec la fonction var()
  • comment créer une variable dans une variable
  • comment lire la valeur d'une variable CSS dans le HTML
  • comment interagir avec une variable CSS en JavaScript
  • comment faire des Media Queries sur une variable CSS

Le fichier source contient les fichiers HTML, CSS et JavaScript utilisés au cours du tuto.
Un QCM est également à votre disposition pour que vous puissiez valider vos connaissances sur les variables CSS.
Je reste disponible dans la section entraide pour répondre à vos questions.

Bon tuto !

Table des matières de cette formation CSS (durée : 15m56s)

    • Créer des variables CSS 00:09:08
    • Les possibilités que nous offrent les variables CSS 00:06:48



Formateur : Sébastien Imbert

Sébastien Imbert a publié 23 tutoriels et obtenu une note moyenne de 4,9/5 sur 4 780 tutoriels vendus. Voir les autres formations de Sébastien Imbert

5,0
note moyenne

19
avis laissés
5 étoiles
19
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de littlelolo87 laissé le 08/07/2018
    Très instructif et donne beaucoup d'idees

  • 5
    avis de valerie-a77 laissé le 18/06/2018
    Débutante pour ce qui est du sujet des variables en css. Sujet très intéressant, qui peut faire gagner du temps lorsqu'on a plusieurs fois la même donnée, il n'y a qu'à la saisir une fois dans une variable et en cas de modif, le tout est modifié en une fois, c'est ingénieux et sans risque d'erreur. Sans compter les autres possibilités d'utiliser les variables... Encore une nouveauté dans mon apprentissage en css :-) Reste à savoir l'appliquer. Merci pour ce cours très bien expliqué.

  • 5
    avis de membre-8322-7150 laissé le 27/03/2018
    Très bonne qualité de tutoriel, parfait !

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    CSS 3
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
  • Que contient le fichier source ?
    Le fichier source contient les fichiers HTML, CSS et JavaScript utilisées au cours du tutoriel.
accédez à plus de 1126 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données