Ajout du CSS - Créer un site en HTML (4/5)

3 minutes pour coder - Créer un site en HTML

Chargement de la playlist en cours...

Comment mettre en forme mon site HTML avec le code CSS ? 

On a le code HTML, mais on voudrait modifier l'apparence de la page en la mettant en forme ! 

Si tu as raté les précédentes vidéos, tu peux les rattrapper ici : « Démarrage (1/5) », « Ajout de texte (2/5) » et « Ajout d'images (3/5) ».

Commence par créer un nouveau document sur Sublime Text en cliquant rapidement deux fois dans la barre noire en haut. Un nouvel onglet entièrement vide s’ouvre. La première chose que l’on va faire c’est de l’enregistrer. On clique sur File, puis sur Save as ce qui veut dire Enregistrer sous. Il faut bien que le fichier soit enregistré dans le même dossier que notre fichier HTML. Ensuite, et c’est très important, il faut nommer le fichier Style.css puis cliquer sur Ok.

Coder en CSS

Une fois que c’est fait, on va pouvoir maintenant coder en CSS ! C’est un code différent du HTML mais ils fonctionnent ensemble.

La première chose que l’on va faire c’est d’essayer de changer la couleur du titre de notre page en écrivant ce code :

h1

{

  color: red;

}

En CSS on utilise des accolades.

Pour t’expliquer ce que tu vois, H1 correspond au titre comme en HTML, le mot color veut dire couleur en francais et red, c’est la couleur rouge.

Une fois que l’on a fait cela on enregistre ce document, on revient sur notre navigateur et on clique sur rafraîchir pour voir s’il y a eu un changement. On pourrait s’attendre à voir la couleur du premier titre changer puisqu’on a demandé à la balise H1 d’être écrite en rouge, mais il ne se passe rien. Tu te souviens peut être de l’épisode où avec l’outil inspecteur on a supprimé la balise <head> et que toutes les couleurs ont disparu de la page ? C’est parce qu’il y a une ligne dans la balise <head> qui permet de faire le lien entre le HTML et le CSS : <link rel="stylesheet" href="style.css">

Copie là dans le fichier HTML. Il ne faut pas oublier d’enregistrer tous nos fichiers en appuyant sur File puis Save all, ca veut dire Enregistrer tout. Quand on retourne sur notre navigateur et que l’on rafraîchit on voit tout de suite une différence. Le titre est bien rouge ! Notre fichier CSS est bien relié à notre HTML !

Modifier la couleur du fond de l'écran

Avec le CSS on peut changer tout ce que l’on veut, je te propose de commencer par la couleur du fond de l’écran. Pour l’instant tout est blanc, je vais essayer de mettre le fond en bleu.

Tout d’abord on retourne sur notre code CSS pour ajouter body. Dans notre code HTML, la balise <body> correspond à tout ce qui s’affiche sur la page. Ensuite on ajoute le code background-color qui veut dire "couleur de fond" et pour dire que je veux du bleu je vais simplement écrire blue. J'enregistre le document et quand je regarde, j’ai bien un fond bleu.

Regarde ce que ça donne. On a réussi, mais c’est pas forcément très joli comme ça.

Pour que la page soit vraiment plus belle, on va créer un bloc de contenu pour avoir un fond bleu et une zone blanche où va se trouver le texte de notre page.

Créer des blocs de contenu

Pour ce faire, je vais retourner sur notre code HTML et ajouter une balise super utile, la balise <div>. Elle sert à créer des blocs de contenu, donc on va pouvoir entourer plein de balises différentes à l’intérieur de celle-ci. Et c’est ce que l’on va faire tout de suite.

Dans le code HTML, on peut ouvrir une balise <div> juste après l’ouverture du <body> et juste avant sa fermeture.

Je vais aussi donner un nom à cette balise pour que l’on puisse la modifier en utilisant le CSS. Pour nommer une balise il suffit d’entrer dedans puis d’écrire id= et entre guillemets le nom que l’on veut. Je vais la nommer "carte", parce que ce que je veux avoir c’est comme une carte blanche au-dessus du fond bleu.

Maintenant je vais revenir vers mon code CSS et utiliser le nom de la <div> pour modifier tout ce qui est à l’intérieur. Copier-coller ce code ci-dessous :  

#carte

{

 width: 800px;

margin:0 auto;

background-color: white;

text-align: center;

align-content: center;

}

La <div> qui s'appelle "carte va s'afficher en fonction de ces 5 lignes :

  • width: 800px; indique que la largeur du bloc est de 800 pixels. Les pixels sont des petits carrés qui permettent de mesurer les choses en informatique. Pour voir un pixel, tu peux tout simplement regarder ton écran de très près. Tu devrais voir qu’il affiche des millieurs de petit carrés, ce sont des pixels.  
  • margin:0 auto; va placer cette zone de 800 pixels au milieu de la page.
  • background-color: white; veut dire que la couleur de fond de ce bloc soit blanche.
  • text-align: center; et align-content: center; servent à centrer le texte et les images.

Maintenant on peut faire File puis Save all et aller voir le résultat sur le navigateur.

Bravo tu sais maintenant coder en CSS. N’hésite pas à tester différentes couleurs ou à faire des recherches sur Internet pour apprendre à modifier encore plus de choses. Par exemple, tu peux regarder ce qu'est une police de texte et comment en changer en CSS.

Prêt à terminer ton site ? Retrouve la dernière vidéo de ce tutoriel : « Ajout de liens (5/5) » !

Réalisateur : Valentin Levelli

Producteur : Coyote Conseil

Auteur : Arnaud Gantier et MICODE

Diffusion : 2017

Publié le - Mis à jour le 09-07-2018

Recommandations

Je t’accompagne dans
tes révisions du bac