Tutoriel CSS

1. CSS ? C'est quoi encore ?
Le CSS, Cascading Style Sheets ou feuille de style, sert à monter votre design, colorer vos ttre, cadrer vos images, etc. Moi, c'est la partie qui me prend le plus de temps, mais qui m'intéresse le plus dans la conception de mon site.

2. Attribuer une feuille de style
Bon déja, ouvrez un nouveau document dans le bloc-notes, et sauver le en Tous formats sous le nom design.css dans le même dossier que votre page XHTML. N'oubliez pas l'extenson sinon ça ne marchera pas ^^
Ensuite, copiez ce code entre les balises et :

Code:

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />

Voila, la feuille de style corresponds à votre page XHTML ^^

3. Effet de texte
Bon maintenant qu'on a attribué la feuille de style, autant la remplir non ? ^^

3.1 Sur tout le texte
D'abord, il faut que je précise quelque chose : Ce que nous allons faire en premier s'appliquera sur tout votre texte. On verra ensuite comment attribuer tel style sur telle partie du texte.

Mais il faut aussi savoir comment attribuer une propriété à une balise ^^ On va commencer par votre joli paragraphe écrit récemment. Bah en gros, ça marche comme ça :

Code:

balise1
{
  propriete: valeur;
  propriete: valeur;
  propriete: valeur;
}
balise2
{
  propriete: valeur;
  propriete: valeur;
  propriete: valeur;
  propriete: valeur;
}

Le point-virgule après chaque valeur n'est pas obligatoire si il n'y a qu'une propriété entre les accolades, mais prenez l'habitude de toujours le mettre.

Maintenant, on veux un texte en bleu, police Arial et de 16 pixels. Bah c'est pas compliqué, voici le code :

Code:

p
{
  color: blue;
  font-size: 16px;
  font-family: Arial, "Times New Roman", serif;
}

Explication : P signifie que ces propriétés concerne tous ce qui est entre les balises

et

. Color, c'est la couleur du texte, avec comme valeur Bleu (les couleurs seront TOUJOURS en anglais, ben oui, le XHTML et le CSS, ça a été fait par des Amériquains [comment ça s'écrit ?] ^^.Font-size, c'est la taille du texte, ici de 16 pixels. Et enfin font-family, ce sont les polices. Il y en a plusieurs, au cas où le visiteur de la page Web n'aurait pas la police demandée sur son ordinateur. Pourquoi y a t-il des guillemets autour de Times New Roman ? Parce que c'est un nom composé. Enfin, finissez toujours par la police serif, c'est celle utilisée par Windows par défaut (et comme Windows est le plus répandu des systèmes...).

3.2 Sur certaines parties seulement
Il y a 2 façons de le faire. D'abord, se servir des balises qui sont déja dans votre texte, par exemple des balises et , qui servent à mettre votre texte en valeur. Je veux que le texte entre les balises et soit rouge, et voici le code, ça fonctionne de la même manière que le 3.1.

Code:

strong
{
  color: red;
}

Pour la deuxième façon, qui est bien plus pratique et précise, il vous faut placer ces balises dites universelles dans votre page :

Code:

<span class="le_nom_que_vous_voulez_sans_espace">blablablabla</span>

*Bah ! Ca fait rien !*

Oui, ça n'affiche rien sur votre page web, mais ça sera quand même utilie pour le CSS ^^ On va dire que le texte entre ces balises doit être vert, voila ce que ça donnera :

Code:

.le_nom_que_vous_voulez_sans_espace
{
  color: green;
}

La balise utilisée, c'est le nom de class précédé d'un point, et ensuite ça marche comme tout autre balise ;)

4. Les liens

*J'ai fais plusieurs liens, mais ils sont moches, ils sont violets et soulignés, je peux pas enlever ça ?*

Bien sûr que si ! Il suffit d'appliquer la propriété text-decoration: none; et de mettre la couleur noir (ou la même que le reste de votre texte). Ce qui donne :

Code:

a
{
  text-decoration: none;
  color: black;
}

Voici une liste de propriétés CSS utiles

woauhhhh merciiii =)

je sens que pendant les vacs d'été je vais m'éclater XD

Merci ! Je suis surpris par tes connaissances Kana !

kana est balèse

Euyh... Merci Jack xD