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

Découverte de Bootstrap 3Découverte de Bootstrap 3
Tuto Bootstrap 3 : le design facile avec le framework d'habillage…

Changer l'apparence d'une image au passage de la sourisChanger l'apparence d'une…
Dans ce tuto CSS, vous apprendrez à créer une effet de changement…

Initiez vous à toutes les positions CSSInitiez vous à toutes les…
Dans ce tuto CSS, vous découvrirez comment utiliser les positions…

Découper et intégrer une page d'accueil de site internetDécouper et intégrer une…
Ce tutoriel est la suite du tuto créer une page d'accueil de…

Découper et intégrer une page d'accueil de site internetDécouper et intégrer une…
Ce tutoriel est la suite du tuto créer une page d'accueil de…

Un menu complet à partir d'une seule imageUn menu complet à partir…
Dans ce tuto vous allez apprendre à créer un menu complet…

Créez et intégrez un menu en HTML/CSS avec une seule imageCréez et intégrez un menu…
De la création du visuel sous Photoshop à l'intégration HTML/CSS,…

Utilisez n'importe quelle font/police dans vos pages htmlUtilisez 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 :

Partagez cet extrait

Lien vers cet extrait : Embed code :

spykrew07 , formateur certifié

Salut à tous ! Je m'apelle Adrien j’ai 29 ans et je suis Webdesigner spécialiste WordPress depuis 7 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 4 ans et depuis 3 ans 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

Je trouve que Spykrew07 est un très bon formateur !

Très bon formateur !!!

tutos clair et précis!

Très bien, de bonnes explications très précises. Un bon rythme pendant les tutos

Tuto utile et super précis ! Merci

Lire les autres témoignages

 

D'autres tuto de spykrew07

Installation & Tour d'horizon de l'admin de WordpressInstallation & 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 pageCré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 WordpressCré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 OrigamiRevisiter 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…

voir tous les tuto de spykrew07

Notes attribuées par les utilisateurs (20 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (28)

par vaughana voté :
(a acheté ce tuto - 07 octobre 2013)

" 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é ! "

par camox13a voté :
(a acheté ce tuto - 31 mars 2013)

" très bon tuto ! maintenent je comprend mieux les proprièté display

merci . "

par pierarta voté :
(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 ! "

par spykrew07
(auteur de ce tuto - 25 octobre 2012)

" @dom38 Les fichiers sources sont livrés avec la formation, il suffit de les télécharger ;) "

par dom38a voté :
(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 "

par FrenchSchoolofCGa voté :
(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 ! "

par Tonytutoa voté :
(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 "

par FanfanAndMea voté :
(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!!! "

par FanfanAndMea voté :
(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!!! "

par LucasSokhaa voté :
(a acheté ce tuto - 02 septembre 2012)

" excellent! la video est bien expliquée, super formateur! "

par sakurasana voté :
(a acheté ce tuto - 26 août 2012)

" Super! Merci beaucoup! "

par BLONDINa voté :
(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 !!! "

par lottaviani
(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)
"

par Mitsoua voté :
(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 "

par farnotsa voté :
(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. "

par Jean LouisCouvelarda voté :
(a acheté ce tuto - 21 février 2012)

" Surpris par la qualité de ce formateur .!
Précis ,clair,perfectionniste , tutoriel a suivre . "

par spykrew07
(auteur de ce tuto - 05 février 2012)

" @lesingea3tetes Merci beaucoup ;) "

par lesingea3tetesa voté :
(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; "

par nabilovica voté :
(a acheté ce tuto - 03 février 2012)

" tres bien explique facil a comprendre...merciiiiii bcp "

par isolat05a voté :
(a acheté ce tuto - 01 février 2012)

" 5/5 "

par spykrew07
(auteur de ce tuto - 31 janvier 2012)

" @tricepad Merci ça fait plaisir ;) "

par tricepada voté :
(a acheté ce tuto - 30 janvier 2012)

" Bravo,toujours aussi bon ! "

par spykrew07
(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 ;) "

par lesingea3tetesa voté :
(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à) "

par spykrew07
(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 ;) "

par aplia voté :
(a acheté ce tuto - 23 janvier 2012)

" Tres bien fait explication claire "

par ArC3Nika voté :
(a acheté ce tuto - 23 janvier 2012)

" Très bon tuto sur les bases du css :) "

par nicolas
(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. "

 

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é 331 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.

N'hésitez pas à nous contacter si vous avez la moindre question !