Les classes dans une feuille de style sont toujours précédées d'un point.

Voici un exemple d'utilisation :

.bordures {
  border : 1px solid #FF0000;
}

<div class="bordures">Mon bloc encadré</div>

Note : La classe bordures peut s'appliquer aux balises div mais également aux autres, telles que p, span, a, input, etc.

En CSS, un identifiant est toujours représenté par un #.

Voici un exemple d'utilisation :

#copyright {
  font-size : 70%;
  color : #f00;
  text-align : center;
  border-top : 1px solid #f00;
}

<p id="copyright">Fait par moi, et personne d'autre</p>

Notes :

• Un identifiant doit être utilisé une seule fois dans une page, mais peut être réutilisé dans d'autres.
• On peut également imposer que les identifiants ne s'appliquent qu'à des éléments particuliers (par exemple, p#copyright).
  Pour une utilisation multiple des styles sur une même page, il faut passer par des classes.

Il suffit de déclarer les styles avec des classes, puis appliquer les styles dans l'attribut class, en séparant l'utilisation des différents styles avec un espace.

.rouge { 
  color : red; 
}
.gras { 
  font-weight : bold; 
}

<p class="rouge gras">Début de mon paragraphe en rouge et en gras.</p>

Le doctype indique quelle grammaire vous utilisez pour coder votre page.

Le (X)HTML a évolué depuis sa création, c'est pourquoi il existe différents doctype.

Pour plus d'information se reporter à la F.A.Q (X)HTML:

• À quoi cela sert-il de déclarer un doctype (DTD) ?
• Quel doctype déclarer en début de page ?

Si l'ajout du doctype casse le design, c'est parce que les différentes normes ne sont pas interprétées de la même manière. En l'absence de précision, le navigateur se débrouille comme il peut en utilisant son propre mode de rendu, appelé aussi mode Quirks.

Ce n'est pas à 100% vrai car les éditeurs de navigateurs suivent les spécifications du W3C avec une rigueur qui leur est propre, mais indiquer un doctype permet, entre autres, d'uniformiser le rendu des pages sur les différents navigateurs existant.

Il est préférable de choisir le bon doctype avant de commencer la mise en page.

Pour appeler une feuille de style, on peut utiliser :

• L'élément link :
  • L'élément link indique qu'un fichier externe est lié au document,
  • L'attribut rel ayant comme valeur stylesheet indique qu'il s'agit d'une feuille de style,
  • La valeur text/css de l'attribut type indique le type MIME de la feuille de style,
  • L'attribut media indique le(s) type(s) de(s) média(s) visée(s),

<link rel="stylesheet" type="text/css" href="url_feuille_css.css" media="screen" />

• La règle @import :

<style type="text/css">
  @import url("url_feuille_css.css")
</style>

@import url("url_feuille_css.css")

• @import est une règle CSS2,
• L'utilisation de la notation fonctionnelle url() n'est pas obligatoire,
• Il est possible d'indiquer les medias, malheureusement, Internet Explorer 7 et inférieures ignorent la règle @import suivie des types des médias.

<style type="text/css">
  @import url("url_feuille_css.css") screen
</style>

Les spécifications CSS ont défini 10 types de média dont le média print qui vise les appareils d'impression.
On peut inclure la feuille de style d'impression via la balise link suivie de l'attribut media ayant comme valeur print :

<link rel="stylesheet" type="text/css" href="styles_impression.css" media="print" />