Le CSS est un langage de programmation qui permet de mettre en forme les Pages de son site web. Mais par où commencer lorsqu’on débute ? Apprendre par coeur tout son fonctionnement n’est pas le plus intéressant, sachant qu’un Webmaster utilise bien souvent des templates (patrons) de Pages HTML existantes pour ses projets. Cela signifie qu’il ne refait pas la roue, mais repart généralement d’une base existante. Il est donc plus important de savoir modifier une Page avec du CSS que de le créer entièrement pour commencer. Néanmoins, il est indispensable d’apprendre les 20% de connaissances en CSS qui vous permettrons de gérer 80% des situations. Ce sont ces connaissances que vous maitriserez à la fin de cet article : c’est parti !

Note : cet article fait suite à : Comment créer une Page HTML pour mon Site ? Si le mot HTML ne vous dit rien, je vous suggère de le lire 😉 Pour les autres, on reprend !!

Qu’est-ce que le CSS et à quoi ça sert ?

L’acronyme CSS signifie Cascade Style Sheet (Feuille de style en cascade). Celui-ci permet de définir le style de votre page HTML.

Lors de mon article sur la création d’un page HTML, j’ai fait l’analogie entre la création d’un site web et la création d’une maison. Pour revenir à ce contexte, le CSS représente le papier peint que l’on met sur les murs. Sans lui, votre Page sera blanche et sans forme.

Comme d’hab’ ! La pratique !

Créer et installer un fichier CSS

Tout d’abord, il faut partir d’une page HTML existante. Une fois que vous avez votre fichier, vous disposez de 3 méthodes pour ajouter du code CSS dans votre page :

1. Ecrire directement dans une balise html avec l’attribut “style” : <mabalise style=”moncss”>

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Bienvenue sur devenir-webmaster-freelance.fr</h1>
<!--directement dans une balise html avec l'attribut "style" : -->
<p style="background-color:pink;">Je trouve le contenu <strong>super cool !</strong></p>
</body>
</html>

2. Ajouter une balise CSS dans vos HTML <style></style>

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<!-- Dans une balise CSS -->
<style>
p { background-color: pink; }
</style>
</head>
<body>
<h1>Bienvenue sur devenir-webmaster-freelance.fr</h1>
<p>Je trouve le contenu <strong>super cool !</strong></p>
</body>
</html>

3. Demander à votre page HTML de lire un fichier fichier CSS séparé du HTML.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<!-- Je demande  ma page HTML d'importer mon fichier CSS du nom de "style.css" -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Bienvenue sur devenir-webmaster-freelance.fr</h1>
<p>Je trouve le contenu <strong>super cool !</strong></p>
</body>
</html>

Voici le fichier CSS du nom de “style.css” :

/* style.css */
p { background-color: pink; }

Bonne pratique

La méthode 1 et 2 sont à titre indicatif pour vous dire que c’est possible, mais je vous invite à la 3ème méthode tout le temps, sauf cas de force majeur. Cela, car il est beaucoup plus simple de gérer le CSS à jour, mais cela permet aussi de beaucoup mieux organiser son site dans un futur proche.

Comment structurer un fichier CSS

Les commentaires : /* */

La première chose et la plus importante des choses à retenir :

</span>/* Ceci est un commentaire dans un fichier CSS et n'influe en aucun cas le code. Cela permet seulement de laisser des notes ! */

J’insiste sur l’importance de laisser des commentaires ! Cela permet de relire plus facilement le code et de travailler plus facilement en équipe. De plus, lorsque le CSS commence à devenir compliqué, il est parfois difficile de se relire.

Structure d’un style

Un fichier CSS (ou morceau de code) s’écrit de la manière suivante :

  • Le nom de la balise
    ici “p” pour dire : chaque paragraphe.
  • Une accolade {
    permettant de dire où commence la définition .
  • Une liste de propriétés et de valeur
    sous la forme “attribut : valeur”, comme “backgroud-color: pink” pour mettre un fond en rose.
  • Et pour finir une accolade }
    permettant de dire où terminer la définition.
p /* Pour chaque balise paragraphe */
{
background-color: pink; /* fond en rose */
color: green; /* police en verte */
}

Ce morceau de code signifie : met moi un “fond de couleur” (en anglais : background-color) rose (en anglais : pink) derrière tous les Paragraphes. Et aussi : met moi tous les textes des Paragraphes en “couleur” (color) vert (green).

Comment appliquer un design à toutes les balises HTML d’un certain type ? (h1, p, strong ,etc.)

Les balises dans un fichier CSS sont les mêmes que celle d’un fichier HTML. Il est par exemple possible de définir un certain design à tous les Paragrahes (<p>mon paragraphe</p>) avec le code :

p {
/* ... ici les proprietes et valeurs ... */
}

Tout comme on peut par exemple agir sur tous les textes en gras (<strong>mon texte en gras</strong> en HTML)avec le code  :

strong {
/* ... ici les proprietes et valeurs ... */
}

Maintenant que vous comprenez la base d’un fichier, rien de mieux qu’un exemple pour aller plus loin ! Prêt ?

/*
** Pour chaque balise paragraphe
*/
p {
background-color: pink; /* fond en rose */
color: green; /* police en verte */
font-style: italic; /* mettre le texte en italic */
}
/*
** Tous les titres de niveau 1 de couleur rouge
*/
h1 {
color: red;
}
/*
** Tous les titres de niveau 2 de couleur orange
*/
h3 {
color: orange;
}
/*
** Tous les titres de niveau 3 de coucomleur orange
*/
h3 {
color: yellow;
}
/*
** Tous les liens en bleu
*/
a {
color: blue;
}

Comment appliquer un design sur un seul élément de ma page ? L’attribut de balise HTML “id”

Parfois, nous souhaitons ajouter une mise en forme sur un seul élément de la page. Par exemple : Je souhaite que le nom de mon menu soit rouge. Dans une page comme celle-ci, impossible de mettre uniquement le logo en rouge.

...
<body>
<div>
<div>Mon Menu</div>
<div>
<ul>
<li>Accueil</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
</body>
...

Dans ce cas, nous pouvons ajouter à certaine balise de notre menu un identifiant (id). (Attention, il ne doit pas y avoir 2 balise qui porte le même identifiant, si vous avez 2 éléments qui nécessitent le même design, c’est le chapitre juste ne dessous : l’attribut “class”)

<div id="nom-menu">Mon Menu</div>

J’ai donné à ma balise l’identifiant : mon-menu. Cela me permet désormais de lui appliquer un style depuis mon CSS avec le symbole ‘#’ (un diese). Cela prend la forme :

/* # + id */
#nom-menu /* J'applique a la balise avec l'identifiant "mon-menu" les proprits : */
{
color: red; /* Le texte en rouge */
}

Et voilà, le tour est joué.

Comment appliquer un design à plusieurs élément de ma page ? L’attribut de balise HTML “class”

Reprenons notre menu et essayons de mettre tous les éléments de ce menu en bleu.

...
<body>
<div>
<div id="nom-menu">Mon Menu</div>
<div>
<ul>
<li>Accueil</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
</body>
...

Dans ce cas, nous pouvons ajouter à certaine balise une class.

<li class="elem-menu">Accueil</li>
<li class="elem-menu">Contact</li>
<li class="elem-menu">Blog</li>

J’ai donné à ma balise l’identifiant : mon-menu. Cela me permet désormais de lui appliquer un style depuis mon CSS avec le symbole “.’ (un point). Cela prend la forme :

/* . + class */
.elem-menu /* J'applique aux balises avec la classe "elem-menu" les proprits : */
{
color: blue; /* Le texte en bleu */
}

Et voilà, le tour est joué.

Les 15 lignes de CSS les plus importantes

Le CSS est très large, mais un webmaster n’a généralement pas besoin de connaitre toutes les propriétés CSS. Voici la liste 15 propriétés que je vous recommande de connaitre :

  • color
  • background-color
  • text-align
  • float
  • font-familly
  • display
  • opacity
  • border
  • border-radius
  • font-style
  • font-size
  • text-decoration
  • content
  • margin
  • padding

 

Voilà, j’espère que cet entrée en matière du CSS vous a était utile ! Laissez un commentaire pour me donner votre avis !

  •  
  •  
  •  
  •  
  • 1
  •  
  •  
  •