Tuto publié par 
Ce tuto vidéo "Apprenez les bases du CSS pour intégrer votre site web avec CSS" fait partie d'une formation complète qui vous permettra de découvrir plus en profondeur CSS. Découvrez sans plus attendre la formation "Pack formation HTML et CSS débutant : Créer votre premier site web" dans laquelle vous retrouverez cette vidéo et tous les fichiers source utilisés par le formateur.
Les fichiers source ne sont pas fournis dans les vidéos vendues à l'unité.
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!
Jetez un oeil à ces autres tuto CSS
Changer l'apparence d'une…
Dans ce tuto CSS, vous apprendrez à créer une effet de changement…
Initiez vous à toutes les…
Dans ce tuto CSS, vous découvrirez comment utiliser les positions…
Découper et intégrer une…
Ce tutoriel est la suite du tuto créer une page d'accueil de…
Générer du texte en 3D avec…
Dans ce tuto CSS, vous découvrirez comment générer du texte…
Découper et intégrer une…
Ce tutoriel est la suite du tuto créer une page d'accueil de…
Un menu complet à partir…
Dans ce tuto vous allez apprendre à créer un menu complet…
Créez et intégrez un menu…
De la création du visuel sous Photoshop à l'intégration HTML/CSS,…
Utilisez n'importe quelle…
Dans ce tuto CSS, vous découvrirez comment utiliser facilement…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto CSS de 2 heures 27 minutes est proposée dans une résolution plus grande que l’extrait suivant :
spykrew07
, formateur certifié
Salut à tous !
Je m'apelle Adrien j’ai 28 ans et je suis Webdesigner spécialiste WordPress depuis plus de 6 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant plus de 3 ans et depuis 1 an et demi je me suis lancé en freelance. Formateur certifié sur tuto.com, je partage mes connaissances et mes découvertes dans différents domaines : web design, logo, html, wordpress, php, css jquery ...
Ma devise : Webdesign is not a job, it’s a passion !
Toutes les formations de Spykrew07
Témoignage des clients de spykrew07
Excellent. Pédagogie, professionnalisme, efficacité, sens du détail, tout y est.
Excellent tuto, explications sont très claires et toujours justifiées, on sait ce qu'on fait et pourquoi. 1 grand Merci!!! Juste 1 pb : dans mon site onepage, ma bande de menu active saute sur la rubrique dans le menu juste au dessus, après le clic.
Rien à dire, tuto expliqué de manière claire. Formateur Pro, allez-y.
extrêmement complet ! très pédagogique ! Top !
Je trouve très intéressante votre vidéo sur la création d'un site OnePage. Je l'ai vu plusieurs fois et vais me lancer bientôt dans la création d'un site en m'inspirant de vos idées. Pour le reste "Jquery, css, ...) cela ne me fait plus peur . Merci.
Lire les autres témoignages
D'autres tuto de spykrew07
Installation & Tour d'horizon de l'admin de Wordpress
Dans cette 1ère partie consacré à la création d'un thème WordPress complet pour…
Créer un site web avec un slider d'images en full page
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas, créer un gabarit de site…
Créer un slider et l'intégrer à votre blog Wordpress
A l'aide d'un plugin jQuery, nous allons créer un slider pour vos articles de blog.…
Revisiter le logo de Twitter façon Origami
Dans ce tuto Illustrator en vidéo, nous allons revisiter le logo de Twitter, le célèbre…
Notes attribuées par les utilisateurs (19 votes)
Les avis / Questions des utilisateurs (27)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto CSS d’une durée de 2 heures 27 minutes a été acheté 292 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 22 janvier 2012 par spykrew07, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,8/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto CSS Base.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.
Choisissez parmi 32356 tuto classés dans nos 237 logiciels ou langages informatiques.
(a acheté ce tuto - 31 mars 2013)
" très bon tuto ! maintenent je comprend mieux les proprièté display
merci . "
(a acheté ce tuto - 20 décembre 2012)
" 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 ! "
(auteur de ce tuto - 25 octobre 2012)
" @dom38 Les fichiers sources sont livrés avec la formation, il suffit de les télécharger ;) "
(a acheté ce tuto - 23 octobre 2012)
" excellent tuto, suggestion: avoir possibilité de télécharger les fichiers html et ccs pour revoir les syntaxes et faire des essais / merci "
(a acheté ce tuto - 18 octobre 2012)
" Bonne formation. excellentes bases pour commencer.
A coupler avec les bases du html, parties 1 et 2.
Conseillées avant de s'attaquer au site One page moderne ! "
(a acheté ce tuto - 08 octobre 2012)
" Merci pour cette excellente vidéo, à la fois riche et concis. A laquelle, je recommanderai avec un grand plaisir toute personne désirant monter son premier site web.
Antony "
(a acheté ce tuto - 24 septembre 2012)
" Excellent!!! Bravo!!! Merci!!! je dois créer une newsletter de toute pièce et avec ce que j'ai appris à travaers les deux formations HTML celle-ci, elle va cartonner!!! "
(a acheté ce tuto - 23 septembre 2012)
" Excellent!!! Bravo!!! Merci!!! je dois créer une newsletter de toute pièce et avec ce que j'ai appris à travaers les deux formations HTML celle-ci, elle va cartonner!!! "
(a acheté ce tuto - 02 septembre 2012)
" excellent! la video est bien expliquée, super formateur! "
(a acheté ce tuto - 26 août 2012)
" Super! Merci beaucoup! "
(a acheté ce tuto - 18 mars 2012)
" Parfait, excellent tuto, le meilleur et le plus clair que j'ai pu trouver jusqu'a présent.
Merci beaucoup !!! "
(a acheté ce tuto - 06 mars 2012)
" Merci pour la promo, je me le garde au chaud pour les longues soirées d'hivers!
A suivre...
(Pixel2Sete)
"
(a acheté ce tuto - 03 mars 2012)
" Très bien dans l'ensemble... mais je ne suis pas arrivé à faire fonctionner le flavicon !
J'ai encore du mal à saisir l'utilisation d'une classe plutôt qu'un id, dans le cas ici de la "div class module".
Je passe tout de suite au tuto pour Wordpress "
(a acheté ce tuto - 03 mars 2012)
" Superbe tuto, on apprend énormément de chose et le résultat est très bon. Je le recommande à tout ceux qui veulent en apprendre plus sur le css. "
(a acheté ce tuto - 21 février 2012)
" Surpris par la qualité de ce formateur .!
Précis ,clair,perfectionniste , tutoriel a suivre . "
(auteur de ce tuto - 05 février 2012)
" @lesingea3tetes Merci beaucoup ;) "
(a acheté ce tuto - 05 février 2012)
" Très très bon tuto, très clair, on comprend tout, bonne tenue de la parole tout du long. Bref à avoir absolument; "
(a acheté ce tuto - 03 février 2012)
" tres bien explique facil a comprendre...merciiiiii bcp "
(a acheté ce tuto - 01 février 2012)
" 5/5 "
(auteur de ce tuto - 31 janvier 2012)
" @tricepad Merci ça fait plaisir ;) "
(a acheté ce tuto - 30 janvier 2012)
" Bravo,toujours aussi bon ! "
(auteur de ce tuto - 27 janvier 2012)
" @lesingea3tetes Oui en effet il est très attendu !! Eh bien je suis entrain de le préparer donc la première partie devrait arriver la semaine prochaine, c'est à dire création de la maquette sous photoshop. Merci de ton achat et bon tuto ;) "
(a acheté ce tuto - 27 janvier 2012)
" Bonjour,
je l'ai acheté mais pas encore regardé (pas le temps mais j'ai hate). Juste une question, pour quand sera prêt le tuto pour créer son thème wordpress ? (beaucoup d'impatience pour celui là) "
(auteur de ce tuto - 24 janvier 2012)
" @apli & @ArC3Nik Merci de vos retours positifs, ça fait du bien de savoir que mes tutos vous plaisent et vous apprennent des choses ;) "
(a acheté ce tuto - 23 janvier 2012)
" Tres bien fait explication claire "
(a acheté ce tuto - 23 janvier 2012)
" Très bon tuto sur les bases du css :) "
(Tuto.com Team member - 22 janvier 2012)
" Gros coup de coeur pour cette formation sur les bases du CSS qui vous permet d'apprendre tout en restant dans le concret. "