Vous avez créé précédemment votre première page HTML et avez affiché un texte un peu brut de décoffrage. Vous allez apprendre désormais comment faire un minimum de mise en page pour garder votre visiteur. Pour rappel, nous sommes en train de créer une page de vente, donc il va falloir être sexy et lisible… Et c’est à cela que sert le CSS.

Commençons par des généralités, le CSS permet de vraiment dissocier le fond et la forme. Le fond c’est votre texte, le contenu et la hiérarchisation qui est faite en HTML. La forme, ce sont les polices utilisés, les marges ou encore les couleurs. Ces deux langages mélangés vous permettent de créer un site internet statique comme la page de vente que nous mettons en place progressivement.

Créer votre fichier CSS et l’intégrer à votre page HTML

De la même façon que vous avez créer votre fichier html, vous allez créer un fichier nommé style.css dans le même répertoire que votre fichier html.

Ouvrez votre fichier HTML et dans l’entête ajoutez la ligne
<link rel="stylesheet" type="text/css" href="style.css">
qui vous permet d’inclure votre feuille de style en précisant que c’est une feuille de style (rel=”stylesheet”). si par hasard vous aviez choisi de mettre votre feuille de style CSS dans un sous répertoir, il faudra mettre le chemin vers ce fichier dans l’attribut href (par exemple href=”mon-repertoir/style.css”).

Créer votre propre style

maintenant que notre fichier est inclu dans notre page, il va falloir le remplir. Changeons dans un premier temps la couleur de notre texte, juste pour l’éclaircir un petit peu… Ca permet généralement de faciliter la lecture. Le contraste noir sur blanc par défaut fait un petit peu agressif. Pour cela le langage CSS est très simple, il faut définir la balise sur laquelle nous souhaitons donner un style et tous les éléments inclus dans cette balise recevront ce style.

Concrètement cela donne :
body {
color: #333333;
}

Tout ce qui se trouve dans notre fichier HTML entre la balise ouvrante <body> et la balise fermante </body> portera la couleur #333333 (une couleur grise assez foncé pour être lue sans problème).

Vous avez matière à tester votre intégration pour être sur que tout est bien intégré. Pour cela enregistrez toutes vos modifications et double cliquez sur votre fichier HTML. Vous avez un doute car le gris est proche du noir ? Essayez avec du rouge (#FF0000) juste pour voir, la vous verrez la différence.

Si tout est OK, on va maintenant mettre en place quelques styles supplémentaires :
Il vous faut tout d’abord changer cette police par défaut avec empatement qui nuit à la fluidité, si l’on veut rester simple, l’Arial sera très bien et surtout installé sur quasiment tous les ordinateurs. Reprenez donc votre élement body et ajoutez y votre style de police (vous en profiterez pour y préciser une taille de police) :
body {
color: #333333;
font-family: Arial, Sans-Serif;
font-size: 14px;
}

Et voila, vous avez franchit une nouvelle étape. L’association HTML + CSS vous permet d’intégrer le texte que vous voulez et de le mettre en page comme vous le souhaitez. Durant tout le reste de la formation, la seule chose que nous ferons est mettre à jour ces deux fichier pour y insérer notre texte ou nos images (HTML) et les mettre en avant par des jeux de couleurs, polices, espacement (CSS).

Cet article vous a plu ? N'hésitez pas à le partager avec vos amis...
Categories: Programmation Web

Ne partez pas sans laisser un commentaire


This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.