Le CSS (Cascade Style Sheet) est du code qui vous permet de mette en page du contenu de l’ensemble de vos pages Internet et de le changer rapidement. Il peut être dans une page en entrée directe (dans ce cas, le code css est placé ente les balises « style » au niveau du « head ») ou il peut être écrit dans une page extérieure et être importé grâce au code suivant :

Code:

<link href="http://monsite.fr/style.css" media="all" rel="stylesheet" type="text/css" />

(personnellement, je conseille cette méthode qui est la plus propre et la plus rapide à modifier si vous avez 50 pages de site à changer ^^ )

Dans ce tuto, nous ne verrons pas toutes les balises et codes CSS (il y en a bien trop et je ne les connais pas tout ) mais nous verrons les plus utilisés.
Tout d’abord, parlons html (n’oublions pas que tout commence par là ). Il est possible dans votre code html d’affecter des « class » (si le style revient plusieurs fois dans la page) ou « id » (si le style ne revient qu'une seule fois dans la page) à vos élements afin de leur donner un style particulier. Dans le css, il suffira donc d’indiquer :

Code:

.nom_de_la_class{ Code css ; } #nom_de_l’id{ Code css ; }

Vous êtes prêt ? Allons y !

---

La mise en page du texte

¤ Soulignement : Text-decoration: underline
¤ Ligne au dessus: Text-decorartion: overline
¤ Ligne au dessus et en dessous: Text-decoration: underline overline

¤ Mise en italique : Font-style: italic
¤ Mise en Gras: Font-weight: Bold
¤ Donner de la finesse au texte: font-weight:lighter;

¤ Modification de la taille : font-size: Xpt (X est le chiffre correspondant à la taille désirée)

¤ Modification de la couleur : color: #xxxxxx (les xxxxxx correspondent à un code de couleur de votre choix).[pour les codes, allez ici ]

¤ Soulignement Coloré: Text-decoration: #xxxxxx underline

¤ Modification de la police: font-family: Verdana (remplacez Verdana par le nom de la police désirée)

¤ Suppression d' un soulignement: text-decoration: none
¤ Texte en petites Majuscules : font-variant: small-caps
¤ Mise en Majuscules: text-transform: Capitalize
¤ Mise en Minuscules : text-transform: lowercase

_________________

Nous recrutons : 4 Surveillants, 2 Inspecteurs, 2 Artistes, 3 Pitres, 2 Professeurs spécialisés en RPG,
des Formateurs, des Recruteurs // [Postuler]

Voir ma sign':
	Merci Sir Bubble pour le kit ^^

Les bordures

Voyons maintenant ce qui concerne les bordures :

Il existe 4 bordures : la bordure supérieure (border-top), la bordure inférieure (border-bottom), la droite et la gauche (respectivement border-right et border-left)
Les 4 bordures sont regroupées sous le terme border.

Il y a 4 propriétés à indiquer dans une bordure :

• L'épaisseur : comme pour la taille de la police, il suffit de l'indiquer en pixel
  
• La couleur : même principe que pour la police
  
• Le type de bordure

Il existe plusieurs types de bordure :

¤ bordure normale : border: solid
¤ en pointillés: border: dotted
¤ en petits tirets: border: dashed
¤ en relief double: border: groove
¤ en relief creusé: border: inset
¤ en reliel exterieur : border: outset
¤ double: border: double

Alignement du texte

¤ à gauche: text-align: left
¤ au centre: text-align: center
¤ à droite: text-align: right
¤ pour le justifier: text-align: justify

Les fonds de cellules

¤ en couleur : background: #XXXXXX
¤ une image: background-image: url('adresseurldel'image')
¤ transparent : background: transparent

et voilà, vous savez à peu près tout

n'oubliez pas de séparer chacun de vos codes par un ";"

Si vous avez des questions, n'hésitez pas

Il est temps de compléter cette liste non ?

La position du texte

Nous allons parler ici de padding (=remplissage) et de margin (=marge). Pour vous simplifier tout ça, voici un petit schéma



Ça a l’air compliqué comme ça, mais ça ne l’est pas ^^ Voici une explication rapide.

• margin = marge. C'est-à-dire que c’est la distance des bords d’un bloc par rapport aux bords du bloc dans lequel il se trouve.
  
• padding = remplissage. Cela correspond à la distance entre le texte et le bord du bloc qui le contient.

Tout comme pour les bordures, vous pouvez en appliquer en général (margin, padding) ou individuellement (haut, bas, gauche, droite). Il vous suffit ensuite d’indiquer la distance en pixel.
Voici un exemple :

Code:

margin-left : 12px ; margin-right : 8px ; margin-top : 4px ; margin-bottom : 20px ; padding : 6px ;

Si vous souhaitez centrer un bloc, il faut lui mettre des marges automatiques

Code:

margin :auto ;

Les autres éléments

* Les liens

Ils ont eux aussi plusieurs propriétés :

• a = lien simple
  
• a :hover = lien survolé
  
• a :visited = lien que le visiteur a déjà visité

Toutes les possibilités applicables pour le texte le sont pour les liens.

* Les images, les tableaux

Ici, n’oubliez pas d’indiquer une largeur (width), ainsi qu’une hauteur (height). Il est possible de faire en sorte que ces 2 éléments s’adaptent automatiquement. Pour cela, il suffit d’indiquer « auto » à la place de la taille (néanmoins, je vous conseille d’indiquer une hauteur ou largeur minimum, pour cela il faut écrire min-height ou min-width , cela fonctionne aussi pour le maximum avec max-height et max-width).

_________________

Nous recrutons : 4 Surveillants, 2 Inspecteurs, 2 Artistes, 3 Pitres, 2 Professeurs spécialisés en RPG,
des Formateurs, des Recruteurs // [Postuler]

Voir ma sign':
	Merci Sir Bubble pour le kit ^^

Salut,

Très bon tuto, Bête comme je suis je ne vois pas comment faire le codes pour les bordures, pourrait tu donner un exemple s'il te plait ?

Par exemple, tu veux faire ça

Mon texte

Et bien tu auras ce code là :

Code:

<p style="text-align:center; border-left: #e26e26 2px solid; border-right: #e26e26 2px solid; border-top: #e26e26 1px dotted; border-bottom: #e26e26 2px dashed;background-color:white;">Mon texte</p>

>> On centre le texte : text-align:center;
>> On met les bordures droite et gauche en orange, d'épaisseur 2 pixels et en traits pleins : border-left: #e26e26 2px solid; border-right: #e26e26 2px solid;
>> On met la bordure du haut en orange, d'un 1px et en pointillé : border-top: #e26e26 1px dotted;
>> On met la bordure du bas en orange d'épaisseur 1 px et en tiret : border-bottom: #e26e26 2px dashed;
>> On ajoute un fond blanc à notre paragraphe : background-color:white;

_________________

Nous recrutons : 4 Surveillants, 2 Inspecteurs, 2 Artistes, 3 Pitres, 2 Professeurs spécialisés en RPG,
des Formateurs, des Recruteurs // [Postuler]

Voir ma sign':
	Merci Sir Bubble pour le kit ^^

Merci =) j'avais oublier que j'ai posté la pour les bordure xD

Oula je suis perdue
Si j'ose essayer de faire ça sur mon forum je ne vais plus savoir comment effacer les fautes que j'aurais fait.
Je suis nulle de chez nulle. La preuve il faut recopier ces codes que vous avez mis? et si oui où dois je le faire?
Je suis un vrai

Non, ici Miettes donne juste des exemple et montre ce qui correspond à quoi

As tu déja une idée de ce que tu souhaites faire maguy?

Bonjour
J'aimerais que ce soit un peu comme ici.
* message d'accueil
* navigation rapide
* les articles rajoutés ou news
* les partenaires
* les votes
* qui gére le forum et son nombre de membre avec possibilité d'afficher qui est le dernier inscrit

Très bonne instruction pour le CSS et ses fonctions.

Mais tu as oubliée des propriétés importantes dans les liens :
<< * Les liens

Ils ont eux aussi plusieurs propriétés :

* a = lien simple
* a :hover = lien survolé
* a :visited = lien que le visiteur a déjà visité >>

Il faudrait rajouter le a:focus

J'ai pas tout lu le tuto, car je connais déjà ces fonctions, mais c'est bon petit rappel, car il m'arrivce souvent de ne pas savoir toutes les utiliser. Merci