Cours-TP CSS.
Réponse AJAX
ATTENTION !!! Accédez aux versions plus récentes de ce TP : CSS 1, CSS 2, CSS 3, CSS 4.

Premier pas en CSS

Voici un tout premier exemple combinant HTML et CSS. Cet exemple permet de mettre le texte en rouge :
<p style="color:red">Paragraphe en rouge.</p>

A vous d'essayer d'autres choses : dans une balise <p>, utilisez l'attribut font-weight pour mettre le text en gras (cherchez les valeurs possibles sur internet) et font-style pour mettre le texte en italique.
Remarque : lorsque vous mettez plusieurs attributs dans style="", séparez-les par des points-virgule.

Votre réponse n°1

Trois méthodes pour intégrer le CSS à vos pages Web

On utilisera l'une de ces trois méthodes selon le besoin :

L'attribut style

Comme on l'a vu au chapitre précédent, vous pouvez appliquez une mise en forme CSS à une balise unique, grâce à l'attribut style. Par exemple :
Texte en <span style="font-weight:bold ; color:red">gras, rouge</font>

Feuille de style interne

Si la mise en forme ne concerne que cette page, utilisez la feuille de style interne. Le CSS est alors inclus dans la page HTML, entre les balises <style type="text/css"> et </style>. Par exemple :

<html>
  <head>
    <style type="text/css">
      ici le code CSS...
    </style>
  </head>
  <body> 
    ...
  </body>
</html> 

Toutefois, en procédant ainsi, on perd une grande partie de l'intérêt du CSS. On souhaite souvent appliquer la même mise en forme à toutes les pages de notre site Web (pour la cohérence et l'unité graphique dans l'ensemble du site), donc on préfère en général utiliser la méthode suivante (feuille de style externe).

Pour voir à quoi ressemble le code CSS à mettre entre les balises <style> et </style>, jetez un œil sur la feuille CSS de cette page.

Répéter l'exemple du paragraphe précédent, mais en faisant en sorte que le style gras, italique s'applique à toutes les balises p de la page.

Votre réponse n°2

Feuille de style externe

La feuille de style externe permet de centraliser, dans un seul fichier, la mise en forme de l'ensemble du site. Les avantages sont :

Dans la page HTML, la référence au fichier CSS se fait ainsi :
<head>
   <link type="text/css" rel="stylesheet" href="mon style.css">
</head>

Répéter l'exemple du paragraphe précédent, mais en faisant en sorte que le style gras, italique s'applique à toutes les balises p de tout le site. Copiez ici la partie HTML

Votre réponse n°3

Copiez ici la partie CSS :

Votre réponse n°4

Les attributs CLASS et ID en HTML

L'attribut ID

Les balises peuvent se voir attribuer l'attribut ID. Par exemple :
<p id="paragraphe1">

La valeur donnée dans l'attribut ID est comme une clé primaire, un identifiant : il doit être unique. S'il ne l'est pas, la page ne passera pas le validateur, et les codes Javascript vont mal fonctionner.

On peut donner une mise en forme CSS à une balise unique. Par exemple, la mise en forme suivante s'appliquera uniquement à la balise <p id="paragraphe1"> et non pas à toutes les balises <p> :
p#paragraphe1 { color:red; }

L'attribut CLASS

Contrairement à l'ID, la même valeur de CLASS peut être attribuée à plusieurs balises. Par exemple, les balises :
<li class="discret">...</li>
<p class="discret">...</p>

seront toutes les deux affectées par la mise en forme suivante :
.discret { color:gray; }

Inversement, une même balise peut se voir affecter plusieurs classes. Par exemple, la balise :
<p class="discret rouge bordure-noire">...</p>
sera affectée par les mises en forme CSS suivantes :
p.discret { font-size:90%; }
p.rouge { color : red; }
p.bordure-noire { border : solid 1px black; }

Comme dans ces cours, mettez l'attribut "fond orange" à toutes les balises div qui ont la classe exercice (notez juste le contenu de la feuille de style).

Votre réponse n°5

Mise en forme du texte avec CSS

Ecrivez le code HTML (sans aucune mise en forme HTML) et la feuille de style interne (pour faciliter la correction) qui repoduisent le texte suivant, testez et collez ici. Vous n'avez droit qu'aux balises div, span, pre (texte préformaté, adaptée pour les codes de programmation), a (et bien sûr style). Utilisez toutes les propriétés vues ci-dessus (sauf text-transform).

Votre réponse n°6

Validez vos pages
avec le validateur CSS du W3C

Explications sur... la validation

De la même façon qu'il existe le validateur HTML, il existe également de validateur CSS, son adresse est celle-ci :
http://jigsaw.w3.org/css-validator/

Utilisez le validateur pour valider votre réponse de l'étape 4 (réponse n°6). le cas échéant, corrigez jusqu'à ce qu'il n'y ai plus d'erreur. Copiez le code CSS validé (uniquement la partie CSS, pas de HTML) ici.

Votre réponse n°7

Evénements en CSS

On peut changer la mise en forme des liens selon s'ils sont survolés, cliqués, visités. Les nuances sur ces différents événements peuvent s'exprimer ainsi :
a { style du lien s'il n'est pas remplacé par un style spécifique ci-dessous }
a:link { style du lien non visité }
a:visited { style du lien visité déjà visité précédemment }
a:hover { style du lien survolé }
a:active { style du lien au moment ou on clique dessus }

En appliquant un style à a et à a:hover, refaites le style de ce lien en CSS : accueil

Votre réponse n°8

D'autres propriétés

Un site qui référence un grand nombre de balises, mais avec peu d'explications :
http://www.commentcamarche.net/contents/css/cssproperty.php3

D'autres subtilités

table h1 { color:red; }
Les titres h1 ne seront rouges que s'ils sont à l'intérieur de la balise table.

.classe1, .classe2 { color:green; }
Le style (couleur verte) s'applique aux classes classe1 et classe2.

Les styles sont hérités. Par exemple, si vous donnez un style à la balise "body", alors ce style va s'appliquer à toutes les balises contenues dans "body".

Les commentaires CSS commencent avec /* et finissent avec */ (comme les commentaires multi-lignes dans la plupart des langages de programmation).

Les feuilles de style ne sont pas sensibles à la casse, vous pouvez donc écrire indifféremment en minuscule ou en majuscule.