CSS

Instructions de base

Formulation

1. Formulation : balise { instruction: valeur; instruction: valeur;}
2. Exemple: body { background-color: #FF0000; color: gray; font-family: "Helvetica Neue", Helvetica, Geneva, sans-serif;}. On peut mettre autant d'instructions qu'on veut entre les accolades.
3. NB: La balise html <div> ...</div> nous permettra de créer des contenants larges et d'y installer nos balises de contenus (exemple: titre h3+image+paragraphes,listes de liens etc...) pour faire une mise en page plus élaborée. Les instructions CSS permettront de donner à ces div largeur, hauteur, positionnement dans la page et tout ce qui sera nécessaire.

Background-image, background-color

En commençant par le "mur du fond":

• html { background-color: #FF0000;} ou rgb(255,0,0) ou red
• Pour formuler la couleur la page web colours wikipedia
• html { background-image: url(chemin du dossier/image.jpg);}

Polices

• p {font-family: "Helvetica Neue", Helvetica, Geneva, Sans-serif;}
• ATTENTION: On fait appel à des polices présentes sur tous les ordinateurs. En cas d'absence de la première, la suivante est recherchée.Si aucune n'est trouvée sur la machine du visiteur, le navigateur prendra la police par défaut (genre Times...) Plus tard GoogleFonts vous permettra d'intégrer des polices téléchargées.

Couleur du texte

• p { color: White;} ou #FFFFFF ou rgb(255,255,255);

Largeur de l'élément

• p { width: 50%;} ou 300px; ou 30em; etc...
img { width: 320px;} Avec cette instruction, toutes les images (img src...) auront la même taille, indépendante de leur taille réelle (à réserver à de petites corrections).

Marges extérieures

• p { margin-top: 20px; margin-bottom: 10px; margin-left: 30px; margin-right: 30px;} Raccourci: margin: 20px s'applique aux 4 côtés; margin: 0 auto; s'applique à vertical et horizontal.

Marges intérieures

• Si l'élément a des limites visibles comme background-color: p { padding: 1em;}

.classes

Une fois cela fait, on s'aperçoit qu'on aimerait bien qu'un élément, de temps en temps, soit différent des autres (un paragraphe par exemple). On utilise alors une classe. Progressivement, on va enrichir notre style avec des instructions invariantes pour certaines balises, et d'autres qu'on utilisera seulement quand on en a besoin.
Une classe est un ensemble "dormant" d'instructions, qui attend qu'on l'appelle. On invente un nom pour cette classe. On l'écrit comme suit avec un point devant:

On l'appelle comme cela:
<p class="majolieclasse">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.“ </p>. le paragraphe appelle la classe "majolieclasse" et prend alors les caractéristiques définies. Résultat ci-dessous.

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.“

Voilà un début simple. Il faut maintenant pratiquer. Par la suite, les instructions CSS3 vous emmèneront jusqu'aux transitions dynamiques et aux animations de balises html. Bon travail.