Le CSS, un outil indispensable pour personnaliser votre site web

Astuces
Le CSS, un outil indispensable pour personnaliser votre site web

Raphaël |

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.

Attention
Il est très important de mettre des guillemets " autours du nom de la police et de l'écrire très exactement comme dans le tableau ci-dessous.

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

Police Déclaration CSS
Abril Fatface font-family: "Abril Fatface", sans-serif;
Asar font-family: "Asar", sans-serif;
Concert One font-family: "Concert One", sans-serif;
Cinzel font-family: "Cinzel", sans-serif;
Gloria Hallelujah font-family: "Gloria Hallelujah", sans-serif;
Indie Flower font-family: "Indie Flower", sans-serif;
Josefin Sans font-family: "Josefin Sans", sans-serif;
Lato font-family: "Lato", sans-serif;
Lobster font-family: "Lobster", sans-serif;
Macondo font-family: "Macondo", sans-serif;
Cormorant Garamond font-family: "Cormorant Garamond", sans-serif;
Montserrat font-family: "Montserrat", sans-serif;
Open Sans Condensed font-family: "Open Sans Condensed", sans-serif;
Open Sans font-family: "Open Sans", sans-serif;
Oswald font-family: "Oswald", sans-serif;
Pacifico font-family: "Pacifico", sans-serif;
Playfair Display font-family: "Playfair Display", sans-serif;
Quicksand font-family: "Quicksand", sans-serif;
Raleway font-family: "Raleway", sans-serif;
Roboto Condensed font-family: "Roboto Condensed", sans-serif;
Roboto font-family: "Roboto", sans-serif;
Rubik Mono One font-family: "Rubik Mono One", sans-serif;
Sacramento font-family: "Sacramento", sans-serif;
Source Sans Pro font-family: "Source Sans Pro", sans-serif;
Spirax font-family: "Spirax", sans-serif;
UnifrakturCook font-family: "UnifrakturCook", sans-serif;

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

Code Effet
a {
  text-decoration: none;
}
Supprime le soulignement des liens.
a:hover {
  text-decoration: underline;
}
Souligne les liens au passage de la souris.
body {
  font-family: "Open Sans", sans-serif;
  color: #333333;
  background-color: #ffffff;
  font-size: 16px;
}
Définit la police de caractère, la couleur du texte, la couleur de fond et la taille de police par défaut.
a {
  font-weight: bold;
}
Met les liens en gras.
p {
  line-height: 1.5;
}
Définit l'interligne des paragraphes à 1,5 fois la taille de la police.

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.



Votre commentaire

26/05/2024 11:44:21
Merci pour cet article clair et instructif sur le CSS. Les exemples concrets sont très utiles pour les débutants. Peut-être pourriez-vous aborder des concepts plus avancés dans un futur article, comme les media queries pour un design responsive. Continuez ce bon travail
06/04/2024 19:55:12
Merci à vous !
06/04/2024 11:36:00
Simple, clair et utile. Comme d'habitude ! C'est toujours plaisant de pouvoir compter sur un hébergeur français, disposé à aider. Merci Raphaël.
×

Newsletter OnlineCreation.me

Recevez par e-mail des astuces pour booster votre site internet.
Votre navigateur internet n’est pas à jour

Veuillez mettre votre navigateur internet à jour pour consulter de site dans de meilleures conditions. Update my browser now

×