les fichiers css sont écrits en texte brut et ont une extension .css.
Ils sont placés classiquement au même endroit que les pages html mais parfois, on crée un répertoire spécial pour eux : /css.

Créons notre feuille de style style.css dans le même dossier que les pages html.

Nous allons rédiger nos premiers styles avec notepad++.

Mettre du style dans les pages

Les styles permettent avant tout de modifier le style par défaut du navigateur.
Il s'agit de changer l'aspect du texte et des objets afin d'ajouter de la couleur, modifier la forme de la police, la position du texte.
Bref : mettre un peu de design dans notre page.
Prenons un exemple. Voici une page sans style (ouvir le lien) (vous y trouverez des liens vers la même avec style et un lien vers la feuille de style associée).
Nous allons y mettre du style et quelques objets de décoration afin de la rendre plus "plaisante".

Normalement, le style est "linké" à la page web. Mais, pour commencer, nous utiliserons du style embarqué ou intégré aux balises.

Syntaxe d'une propriété

background : navy ;

Mais voyons plutôt un exemple de code, ce sera plus clair :

<!-- code html -->
Texte sans style
<p style="background:yellow; color:black; font-family:script MT, book antiqua, verdana; font-size:14px; " >
	Texte stylé
</p>

Résultat :

Exemple plus complexe, voici une table de 4 lignes et 4 colonnes.

Dans cette table, la première ligne est en bleu foncé, avec une écriture blanche, sauf la troisième colonne qui est en rouge sur fond jaune.

<!-- code html -->
<table style="border:2px solid #c1c; background:#faf;" >
   <tr style="background:navy; color:white;" >
      <th>Nom</th>
      <th>Famille</th>
      <th>Climat</th> 
      <th style="background:#4ab; color:#00a," >Couleur</th>
      <th>Conditionnement</th>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Agrume</td>
      <td>Chaud</td> 
      <td style="background:#cef; color:#00a;" >Chaud</td>
      <td>Kilo</td>
   </tr>
   <tr style="background:#ff9; color:#d00;" >
      <td>Pomme</td>
      <td>Fruit</td>
      <td>Tempéré</td> 
      <td style="background:#050; color:#8e8;" >Vert</td>
      <td>Kilo</td>
   </tr>
   <tr>
      <td>Cannelle</td>
      <td>Epice</td>
      <td>Chaud</td> 
      <td style="background:#cef; color:#00a;" >Brun</td>
      <td>Gramme</td>
   </tr>
</table>

Résultat :

Finalement, après le style, seule notre imagination entre en jeu dans le design de notre table ...

C'est juste une histoire de styles .... (afficher la source, pour voir ...)

Dans l'exemple précédent, vous avez bien compris que c'est laborieux à écrire et compliquer à lire.
Si on veut changer un style, il faut rechercher toutes ses utilisations et le changer localement.

« AARGH !!! Avec la multiplication des styles et des pages d'un site, cela devient vite impossible !!!! Gasp !
- No problemo amigo ! On va créer des styles qui seront réutilisables (un informaticien essaye tjrs d'être flemmard ... mais rusé!) »

Ci-dessous, un code, notablement plus simple, pour la table en exemple ci-dessus, en mettant le style dans la balise ... <style> ...</style> :

La structure de la table,

<table id="tabExemple">
	<tr>
		<th>Nom</th>
		<th>Famille</th>
		<th>Climat</th>
		<th class="col">Couleur</th>
		<th>Conditionnement</th>
	</tr>
	<tr>
		<td>orange</td>
		<td>agrume</td>
		<td>chaud</td>
		<td class="col">orange</td>
		<td>kilo</td>
	</tr>
	<tr class="lig">
		<td>pomme</td>
		<td>fruit</td>
		<td>tempéré</td>
		<td class="col lig">vert</td>
		<td>kilo</td>
	</tr>
	<tr>
		<td>cannelle</td>
		<td>épice</td>
		<td>chaud</td>
		<td class="col">brun</td>
		<td>gramme</td>
	</tr>
	<tr>
		<td>salade</td>
		<td>légume</td>
		<td>tempéré</td>
		<td class="col">vert</td>
		<td>unité</td>
	</tr>
</table>

et les styles à associer :

<!-- on est en html -->
<style>

/* début du css */
/* design global */
	#tabExemple {border:0; box-shadow:5px 5px 12px; background:#faf url(segami/imgTable.jpg); border-spacing:2px; font-weight:bold; font-size:14px;}
	#tabExemple tr {color:#000;}
	#tabExemple tr:nth-child(odd) {background:rgba(255, 255, 255, 0.7);}
	#tabExemple tr:nth-child(even) {background:rgba(255, 255, 255, 0.6); }
 
	#tabExemple th {padding:8px; background:navy; color:white;}
	#tabExemple td {padding:8px; text-align:center; }
 
/* ligne et colonne sélectionnées */
	#tabExemple .col {background:#cceeff; color:#0000aa;}            /* style général */
	#tabExemple .lig .col {background:rgba(0,64,0,0.8); color:#8e8;} /* col à l'intérieur de lig */
	#tabExemple th.col {background:#44aabb; color: #00a;}	         /* style col particulier pour th */
	#tabExemple tr.lig {background:rgba(255,255,144,0.9); color:#d00;} 
/* fin du css */

</style>
<!-- on revient en html -->

Avec (rappels):

• Un style avec pour sélecteur un nom de balise est valable pour toutes les balises de ce nom,
• Un style avec pour sélecteur un nom #xxx est valable pour LA balise qui a l'identifiant xxx : <balise id="xxx">,
• Un style avec pour sélecteur un nom .ccc est valable pour toutes les balises qui ont ccc dans la classe : <balise class="ccc">,

On écrit le code css ci-dessus plutôt dans la partie head, mais sinon, quand ça nous arrange ...

Ben! c'est pareille ?! Eh oui, c'est bien ce qu'on voulait, non ?

Comme les styles embarqués, c'est vite le b....l, on préfère le mettre dans un fichier externe qui est importé dans chaque page !

Et comme ça, si on change le style, il change pour tout le site, pas besoin de modifier chaque page individuellement.

La balise pour importer le style est (à copier/coller dans la balise head):

<link href="style.css" rel="stylesheet" type="text/css">

Ensuite, dans la feuille de style, on écrit le style comme dans la balise Style. C'est tout! c'est cool!

Dernière précision :

Si deux styles modifient différemment une même directive c'est le dernier qui a parlé qui a raison.

Bon, on peut y aller, passer aux exo, à vous de jouer