CSS : des expliquations !

Ceci est de la vulguarisation, les termes etc ne sont aps exacts, mais destinés a permettre a des débutants d'appréhender en gros l'idée du css. Ne me blamez pas de mon inexactitude.

En gros, le css consiste a appliquer un style a une partie de sa page. Le style consistera en un certain nombres de propriétés qu'on définira a notre guise. En language "humain" C'est simplissime.
En language humain on va dire à l'ordinateur:

"par ici je veux
{
un fond: comme ci;
une police: comme ca;
une largeur: comme ci;
} "


I A quoi appliquer ce style?

On peut appliquer ce style à une balise Html:
A { style } pour les liens
table { style } pour un tableau
p { style } pour un paragraphe
etc

On peut appliquer ce style à une classe de balise html:
Il est alors défini dans le code html qu'une balise a une certaine classe:
A .liendeclasse1 { style }
.liendeclasse2 { style }


On peut appliquer ce style à un ID d boite:
il est alors défini dans le code html que la boite ( div ou span dans le html mais ca vous intéresse peu ) correspond a un ID ou un autre.
#iddelaboite { style }
On peut même imbriquer des boites dans d'autres comme pourle main du code d'over blog:
#main1 { style }
#main1 # leftnav { style}
On dit ici à l'ordinateur: " la boite main a ce style là. La boite leftnav qui est dans la boite main a ce style ci. " on pourra plus tard différencier ce leftnav d'un leftnav qui se trouverait dans une autre boite. ( par exemple un main2 .... )
Vous pouvez imbriquer des Classes ou des balises dans les boites de la même facon, mais ca deviens délicat !

DONC: des espaces délimités par une balise ( A, Table, P... ), des espaces délimités par une classe ( .quelquechose ) et des espaces délimités par des ID ( #quelquechose ) qui peuvent s'imbriquer.


II Comment définir le style

Prenons un morceau du code (simplifié ) de mon blog personnel et décortiquons le:

#main1 {
background: transparent url(http://img117.exs.cx/img117/8087/fond3.jpg) repeat-y;
margin-top: 0px; }


Cela vous semble bien barbare ?

• #main1 c'est donc la boite, son style est défini entre { et }
• Background est la première propriété. Elle concerne le fond ( comme l'indique son nom en anglais ). Elle est suivie de ":" ( deux points) au dela desquels on définit la propriété.
  
• Transparent signifie qu'il n'y a pas de couleur de fond ici. Un espace sépare transparent du prochain paramètre de background.
• Url signifie qu'on s'occupe maintenant de l'adresse de mon image de fond. Celle ci ( l'adresse) est comprise entre parenthèses: url(http://img117.exs.cx/img117/8087/fond3.jpg)
• Encore un espace avant le prochain paramètre: repeat-y. Cela signifie que mon image de fond doit se répéter sur l'axe des y (vertical ). Encore un espace
• Le point virgule ";" marque la fin du background !
  
• Margin-top est la deuxième popriété, définissant le nombre de pixel en haut entre le bord du main et le bord de ce qui le contient. ces pixel sont exprimés après deux points, et la propriété est fermée par un point virgule.
  

Voilà donc, en très gros, la structure du css. Cela ne vous donne pas assez d'information pour faire beaucoup par vous même ( pour cela allez voir sur google et tapez css beaucoup de sites expliquent très bien) mais cela vous permet du moins de comprendre les expliquations de fabrice !