LG

Ceci est une ancienne révision du document !

Insertion dans une page

Via un fichier css

Cela s'insère dans la partie head.

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

Directement dans <head>

Non recommandé.

<head>
  <style>
    h1 {
      color: blue;
      background-color: yellow;
      border: 1px solid black;
    }
 
    p {
      color: red;
    }
  </style>
</head>

Directement dans le code HTML

Non recommandé.

<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
  Hello World!
</h1>
<p style="color:red;">Ceci est mon premier exemple CSS</p>

Syntaxe

On définit une liste de balises html avec ses propriétés CSS.

h1 {
  color: red;
}

h1 et color.

Fonctions principales :

Il est possible de mettre une liste de balises en les séparant par des ,.

class : pour désigner une classe, il faut préfixer le nom de la classe par un point.

Pour désigner une balise qui a un nom de classe précis, il faut mettre balise.nom_de_classe.

Hiérarchie : séparer les désignations par un espace.

Succession : si on veut désigner une balise qui est précédée par une autre balise, c'est +.

État : ou événement (changement d'état) c'est :.

Id : comme class sauf que les id sont uniques. C'est #.

li {
  list-style-type: square ;
}
p, .special {
  color: orange;
  font-weight: bold;
}
li.special {
  font-size: 1.2em;
}
ul li, em + em {
  color: red;
}
a:link {
  color: pink;
}
#titleh2 {
  font-size: 2em;
}

<h2 id="titleh2">Titre</h2>
<p>This is the second second <a href="http://example.com">link</a>. It contains an <em>emphasized</em> <em>element</em>.</p>
<ul>
  <li>Item one</li>
  <li class="special">Item deux</li>
</ul>

Titre

This is the second link. It contains an emphasized element.

Item one
Item deux