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

Publié le - Mis à jour le 08-11-2017

Bon on a déjà pas mal de code HTML. Le problème maintenant c’est vraiment de faire en sorte que notre page actuelle ressemble un peu plus à ça !

On va commencer par créer un nouveau document sur Sublime Text en cliquant rapidement deux fois dans cette barre.

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 (le fichier avec notre code) HTML. Ensuite et c’est très important il faut nommer le fichier “Style.css” S-T-Y-L-E-.-C-S-S. puis cliquer sur ok.

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. Tu vas voir.

La première chose que l’on va faire c’est d’essayer de changer la couleur du titre de notre page. Pour ce faire je vais écrire ce code

h1

{

  color: red;

}

En css on utilise des accolades, Si tu ne sais pas comment écrire ce symbole tu peux le trouver dans la description sous la vidéo et le copier-coller.

  • 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.

Le problème c’est que rien ne se passe. Tu te souviens peut être de l’épisode ou 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.. C’est cette ligne là.

<link rel="stylesheet" href="style.css">

Elle est, elle aussi dans la description, donc tu peux la copier-coller facilement dans le fichier HTML.

Maintenant 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 !

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 , donc ça veut dire que l’on va changer la couleur de fond de toute 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.

Tu peux regarder ce que ça donne, on a réussi mais c’est pas forcément très joli comme ça.

J’ai une petite idée 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.

Pour ce faire, je vais retourner sur notre code HTML et ajouter une balise super utile, la balise  <div>  

C’est une balise qui 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.

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. Pour le faire, on va venir copier-coller ce code depuis la description. Comme il est un peu compliqué je vais te dire ce qu’il fait.  

#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;
La première ligne indique que la largeur du bloc est de 800 pixel. Les pixels ce 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;
La deuxième ligne de ce code va placer cette zone de 800 pixel au milieu de la page.

 

background-color: white;
On connaît déjà cette troisième ligne, On veut dire que la couleur de fond de ce bloc soit blanche.

 

Les deux dernières lignes servent à centrer le texte et les images.

 

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

 

Ton résultat devrait ressembler à ça.

 

Bravo tu peux 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 qu’est-ce qu’une police de texte et comment en changer avec du CSS.

 

Affiché à l’écran. “Qu’est-ce qu’une police HTML ?”

“Comment changer la police en HTML ?”

 

Si tu es prêt pour la prochaine vidéo alors c’est parti pour la dernière vidéo de ce tutoriel !

 

Description --

 

Code à copier-coller - 1

 

h1
{
   color: red;
}

 

Code à copier-coller 2

 

<link rel="stylesheet" href="style.css">

 

Code à copier-coller 3

 

body
{
   background-color: blue;
}

 

Code à copier-coller 4

 

#carte
{
 
     width: 800px;
     margin:0 auto;
     background-color: white;
     text-align: center;
     align-content: center;
}

 

Code complet :

 

body
{
   background-color: blue;
}

h1
{
   color: red;
}

#carte
{
 
     width: 800px;
     margin:0 auto;
     background-color: white;
     text-align: center;
     align-content: center;
}
 

Réalisateur : Valentin Levelli

Producteur : Coyote Conseil

Auteur : Arnaud Gantier et MICODE

Diffusion : 2017

Recommandations