Le CSS (Cascade Style Sheet) est du code qui vous permet de mettre 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ée 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 toutes ) mais nous verrons les plus utilisées.
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 éléments 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é: utiliser border-bottom (voir plus bas )

¤ 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 1iere lettre du texte en Majuscule: text-transform: Capitalize
¤ Mise en Minuscules : text-transform: lowercase
¤ Mise en Majuscules: text-transform: uppercase

_________________

SoP Story :: 2ème votes éliminatoires

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).

_________________

SoP Story :: 2ème votes éliminatoires