Dans ce tuto vidéo sur les bases du CSS, nous verrons ensemble les propriétés essentielles de ce langage qui va nous permettre de styliser un contenu HTML.
Pour cela, j'ai pris le parti de créer un mini site internet, et pas à pas vous expliquer ce que j'utilise pour styliser mes balises, plutôt que de faire 15 ou 20 exemples qui au final ne vous mèneront à rien car vous ne saurez pas intégrer un site web.
Nous allons créer ensemble la structure HTML, puis nous la styliserons pour arriver au résultat montré dans l'extrait de cette formation.
Ce que vous saurez faire grâce à cette formation sur le CSS :
- Différentes façons de cibler un élément
- 2 types d'écritures pour le CSS
- La couleur en CSS
- Marges et padding
- Background
- Positionnement en float
- Mise en forme de texte : taille de police, espacement des lettres, hauteur de ligne, graisse, style...
- Bordures
- Balises inline & block avec une nouvelle apparition qui utilise le meilleur des 2 mondes
- Créer un bouton en CSS3
- Créer un menu à l'aide d'une liste non ordonnée, puis un sous-menu
- Cacher une image derrière un lien
- Styliser un champ de recherche
- Positionnement en absolu
- Positionnement en fixe
- Et d'autres choses encore...
A la fin de ce tuto, vous aurez les bases nécessaires pour intégrer un site internet de A à Z et vous n'aurez pas de problème si vous souhaitez suivre ma prochaine sur la création d'un thème complet sur WordPress.
Pour ceux qui n'ont aucune notion de HTML, je vous invite à regarder mes 2 formations sur les bases du HTML avant celle-ci :
Tout le mini site est inclu dans les sources pour une meilleure compréhension de la formation. Bon tuto!
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
-
5/5 ! Merci Beaucoup cette formation m'a été très précieuse, c'est nettement moins floue maintenant. J'ai vraiment apprécié votre clareté !
-
Très bon tuto ! maintenent je comprend mieux les proprièté display merci .
-
Formation au top ! Permet de faire le tour de toutes les notions indispensables pour monter vos pages. Je ne savais pas gerer mes float, maintenant je vais finir de tourner en rond (solution : clear, inline-block...) et laisser mes position en static et arreter de bidouiller en relative, absolut. Si vous avez d'autres tutos du même niveau je suis interessé. Merci !
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS 3, CSS 2
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés