Vous êtes nombreux à apprécier les thèmes graphiques d'OnlineCreation.me, mais j'ai régulièrement des questions concernant la personnalisation de ces thèmes. Comment changer la police de caractère, comment changer la couleur de fond ? En attendant l'arrivée prochaine d'un outil dédié à cela, une seule solution est, bien qu'un peu technique, très accessible : le CSS. Dans cet article, je vais vous expliquer ce qu'est le CSS et comment l'utiliser pour personnaliser votre site web.

Qu'est-ce que le CSS ?

Le CSS, ou Cascading Style Sheets pour "feuilles de style en cascade", est un langage informatique très simple qui permet de mettre en forme un site web. Concrètement, le CSS permet de définir la police, la taille et la couleur des textes, les couleurs de fond, les bordures, les marges et toute l'apparence de votre site. Le CSS est séparé du contenu du site, ce qui signifie que lorsque vous rédigez une page de votre site, l'éditeur d'OnlineCreation.me écrit un code qui ne décrit que le contenu de votre page, pas son apparence. C'est le CSS est ce qui va ajouter de la couleur, une typographie particulière, etc.

Même s'il est extrêmement puissant, le CSS est un langage très facile à apprendre. Il suffit de connaître quelques règles de base pour commencer à l'utiliser : un code pour indiquer ce que l'on souhaite personnaliser (appelons cela un sélecteur) et, entre accolades, des paramètres séparés par ; (que nous appellerons des déclarations), composés d'une propriété, du caractère : et d'une valeur.

Par exemple, pour définir la taille par défaut des paragraphes de textes de votre site à 16, vous pouvez écrire :

p {
  font-size: 16px;
}

Ce code signifie que tous les paragraphes de texte (le sélecteur pour un paragraphe est p) auront une taille de police de 16 pixels.

Si le sujet vous intéresse, vous trouverez des milliers de sites qui feront de vous un expert de la technologie, mais ce n'est pas mon but ici : une initiation rapide couvrira fort probablement tous vos besoins.

Je ne suis pas un expert, est-ce que ça me sera vraiment utile ?

Oui, le CSS est un outil très facile à utiliser, même pour les débutants. C'est utile pour personnaliser votre site en quelques minutes. J'aimerais vous donner quelques exemples concrets.

Vous voulez modifier la couleur du texte de votre site

Rendez-vous sur Contraste•OnlineCreation pour définir la couleur que vous souhaitez à l'aide des curseurs. Un code commençant par # vous est fourni. Notez-le. Imaginons que vous choisissiez #663399. Pour que tous les paragraphes de textes (p) de votre site soient de cette couleur, le CSS sera :

p {
  color: #663399;
}

Si vous souhaitez que les titres prennent cette couleur :

h1, h2, h3, h4, h5, h6 {
  color: #663399;
}

Les sélecteurs pour les titres sont h1 pour les gros titres, h2 pour les sous-titres, h3 pour les titres de troisième niveau, etc. jusqu'à h6.

Si vous souhaitez que les liens soient de cette couleur :

a {
  color: #663399;
}

Les liens sont désignés par le sélecteur a.

Vous voulez modifier la couleur de fond de votre site

body {
  background-color: #663399;
}

Le sélecteur body désigne l'ensemble de la page. Il sert aussi à définir des valeurs par défaut.

Vous voulez modifier la police de caractère par défaut

body {
  font-family: "Open Sans", sans-serif;
}

La propriété font-family permet de définir la police de caractère. Ici, nous choisissons Open Sans, une police très courante, qui est appréciée pour sa lisibilité. Le terme sans-serif est une police de secours si Open Sans ne peut pas être affichée.

OnlineCreation.me vous permet d'utiliser sur votre site les polices suivantes :

Si vous voulez combiner ces modifications…

Admettons que vous souhaitiez que tous les titres et les paragraphes de texte soient écrits en "Josefin Sans" et en violet :

p, h1, h2, h3, h4, h5, h6 {
  color: #663399;
  font-family: "Josefin Sans", sans-serif;
}

Vous pouvez combiner autant de modifications que vous le souhaitez :

• Les sélecteurs sont cumulables s'ils sont séparés par des virgules ,
• Les déclarations sont cumulables si elles sont séparées par des points-virgules ;

Vous voulez qu'un lien réagisse au passage de la souris :

a:hover {
  color: #663399;
}

Le sélecteur a:hover désigne les liens (a) lorsque l'utilisateur passe la souris dessus.

Quelques codes utiles

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

body {
  font-family: "Open Sans", sans-serif;
  color: #333333;
  background-color: #ffffff;
  font-size: 16px;
}

a {
  font-weight: bold;
}

p {
  line-height: 1.5;
}

Comment ajouter ces codes à mon site ?

Sur OnlineCreation.me, vous pouvez injecter très facilement du code CSS dans votre site. Pour ce faire :

1. Rendez-vous sur l'espace d'administration de votre site,
2. Cliquez sur Configuration ,
3. Cliquez sur Configurer votre site,
4. Saisissez le code CSS dans le champ Feuille de style CSS,
5. Cliquez sur Mettre à jour,
6. Rendez-vous sur votre site pour observer le résultat.

Si le résultat attendu n'est pas conforme à votre attente, supprimer simplement le code du champ "Feuille de style CSS" et enregistrez.

Si vous avez des questions ou des demandes particulières, n'hésitez pas à me contacter en commentaire. Je me ferai un plaisir de vous aider. Je suis conscient que cet article est un peu plus technique que d'habitude, dites-moi en commentaire si vous appréciez, si vous auriez préféré quelque chose de plus léger ou si vous attendez que je rentre un peu plus dans les détails : cela me permettra d'adapter les prochains sujets.