Introduction à CSS

CSS (Cascading Style Sheets) est un standard du W3C qui complète HTML.

CSS sert à :

  • Mieux séparer méthodologiquement la structure (en HTML) de la mise en forme (CSS)

  • Simplifier l'écriture HTML (et la génération HTML dans le cas de sites dynamiques réalisés avec PHP par exemple)

  • Factoriser et réutiliser la mise en forme, notamment pour assurer l'homogénéisation d'un site Web (externalisation des feuilles CSS)

  • Augmenter les possibilités de mise en forme du HTML (couches CSS)

SyntaxeAssociation HTML et CSS

On peut associer à tout fichier HTML, dans le head, une ou plusieurs feuilles CSS (qui se complètent "en cascade").

1
<html xmlns="http://www.w3.org/1999/xhtml">
2
<head>
3
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4
  <title>...</title>
5
  <link href='css/style1.css' type='text/css' rel='stylesheet'/>
6
  <link href='css/style2.css' type='text/css' rel='stylesheet'/>
7
...

SyntaxeSyntaxe CSS

Un fichier CSS permet d'associer une mise en forme aux éléments utilisés dans le fichier HTML.

1
p { font-family:sans-serif;}

MéthodeDIV et SPAN

On peut différencier les styles en fonction des attributs class et id des éléments HTML.

On recours alors massivement aux éléments div et span pour le stylage, avec des attributs id (pour référencer un élément particulier) et/ou class (pour référencer un ensemble d'éléments de même type).

1
div.class { ... }
2
span.class { ... }
3
#id { ... }

Complément

Tutoriel CSS didactique et complet : http://fr.html.net/tutorials/css/.

Pour une introduction à CSS : Brillant07, pp112-122[1].

Zen Garden : http://www.csszengarden.com ; Le Zen des CSS[2]