CSS explication

Ce tutoriel à pour but de vous initier au CSS.

Introduction :

Le CSS (Feuilles de style en cascade) est le langage informatique qui sert à personnaliser le rendu graphique des pages web.

Les balises rudimentaires :

Le CSS se présente toujours de cette façon :
Une classe, par exemple : .forum
La classe peut être utilisée plusieurs fois dans un code.
Ou un id, par exemple : #forum
L’id peut être utilisé qu’une seul fois dans un code.

Le CSS dans le code HTML se présente de cette façon :

Code:

<div class="forum">Texte</div>

Code:

<div id="forum">Texte</div>

Toutes les balises HTML sont prises en compte et non pas seulement la balise "div" !

Le code CSS lui se place dans une feuille de style, en .css comme cela :

Code:

.forum {
… ;
}
 
#forum {
… ;
}

Feuille de style qui peut être intégrée avec cette balise dans une page HTML (elle doit se placer entre les balises HTML ) :

Code:

<link rel="stylesheet" type="text/css" href="mafeuilledestyle.css" />

Ou plus directement en mettant le CSS dans le code HTML en lui-même avec cette balise (elle doit se placer entre les balises HTML ) :

Code:

<style type="text/css">
.forum {
… ;
}
 
#forum {
… ;
}
</style>

Comme vous le remarquez, les codes CSS sont toujours entre une accolade ouvrante { et une accolade fermante } et les balises CSS sont toutes fermées par un point virgule ;.

Vous pouvez mettre des commentaires dans votre CSS, pour cela il vous suffit de rajouter cette partie :

Code:

/*mon commentaire*/

Nous allons voir les balises de texte :

La couleur :

Code:

.forum
{
color: X ;
}

Remplacer X par une couleur en anglais ou par un Code couleur (héxadécimal) par exemple pour le rouge : red ou #FF0000.

L’alignement :

Code: Sélectionner le contenu

Code:

.forum
{
text-align: center ;
}

Vous avez : "left" pour mettre le texte à gauche, "center" pour centrer le texte, "right" pour mettre le texte à droite et "justify" pour justifier un texte.

La police :

Code: Sélectionner le contenu

Code:

.forum
{
font-family: Times New Roman, Times, serif ;
}

Si une police n’est pas installée sur l’ordinateur de la personne qui ouvre la page, c’est la seconde police séparée par une virgule , qui est utilisée et ainsi de suite.

La taille :

Code: Sélectionner le contenu

Code:

.forum
{
font-size: X px ;
}

Remplacer X par un nombre qui sera en px (pixels) pour changer la taille du texte.

Autre :

Code: Sélectionner le contenu

Code:

.forum
{
text-decoration: underline ;
}

Vous avez : "underline" pour souligner le texte, "line-through" pour barrer le texte, "none" pour ne rien mettre (pour les liens par exemple) et "blink" pour faire clignoter le texte (ne marche pas sous Internet Explorer).

Code: Sélectionner le contenu

Code:

.forum
{
font-style: italic ;
}

Vous avez : "italic" pour mettre le texte en italique.

Code: Sélectionner le contenu

Code:

.forum
{
font-weight: bold ;
}

Vous avez : "bold" pour mettre le texte en gras.

La balise !important :

Cette balise permet de spécifier la partie la plus importante de votre feuille de style :

Exemple :
Code: Sélectionner le contenu

Code:

.forum
{
font-weight: bold !important;
font-style: italic ;
}

Les zones d’utilisation du CSS sur votre forum :

Avec votre forum, intégrer du CSS, c’est facile !
Car il existe déjà une feuille de style que vous pouvez modifier !

Panneau d'administration Affichage Couleurs Onglet "Feuille de Style CSS".


Pour les pages HTML par contre :

Panneau d'administration Modules Gestion des pages HTML.


Il vous faudra vous même insérer votre feuille de style si vous choisissez l’option "Voulez-vous utiliser le haut et le bas de page de votre forum ? Non" (voir plus haut pour intégrer une feuille de style).

Quelques codes CSS pour vos forums :

- PhpBB2 : Supprimer la partie "Dernière Edition par XXX le XXX - XXX, édité XXX fois."

Code: Sélectionner le contenu
tr.post span.gensmall { display: none; }


- PhpBB2, PhpBB3, PunBB : Au passage de la souris le texte des liens se met en majuscules.

Code: Sélectionner le contenu
A:hover{text-transform:uppercase;}


- PhpBB2, PhpBB3, PunBB Changer le curseur de la souris :

Code: Sélectionner le contenu
body{
cursor: url('http://moncurseur.CUR'), auto;
}
a {
cursor: url('http://moncurseur.CUR'), auto;
}


Plus :

Apprendre le CSS :

Le CSS - En anglais.
Alsacréation - Le CSS.
Le site du zéro - Le CSS.

Tutoriel sur le HTML.