FAQ CSSConsultez toutes les FAQ

Nombre d'auteurs : 17, nombre de questions : 59, dernière mise à jour : 30 mars 2017 

 
OuvrirSommaireGénéralitésLiaison avec (X)HTML

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

Voici un exemple d'utilisation :

Code CSS
Sélectionnez

.bordures {
  border : 1px solid #FF0000;
}
        
Code (X)HTML associé au CSS
Sélectionnez

<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.

Mis à jour le 23 janvier 2007  par Linaa

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

Voici un exemple d'utilisation :

Code CSS
Sélectionnez

#copyright {
  font-size : 70%;
  color : #f00;
  text-align : center;
  border-top : 1px solid #f00;
}
        
Code (X)HTML
Sélectionnez

<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.
Mis à jour le 23 janvier 2007  par Linaa

Lien : À quoi sert l'attribut id en (X)HTML/CSS ?
Lien : Comment utiliser les classes en CSS

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.

Style CSS associé au corps (X)HTML
Sélectionnez

.rouge { 
  color : red; 
}
.gras { 
  font-weight : bold; 
}        
Code (X)HTML de la page
Sélectionnez

<p class="rouge gras">Début de mon paragraphe en rouge et en gras.</p>
        
Mis à jour le 23 janvier 2007  par debug

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:

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.

Mis à jour le 27 mai 2010  par MasterOfChakhaL, Macmillenium

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),
Code XHTML de l'élément link dans le head
Sélectionnez

<link rel="stylesheet" type="text/css" href="url_feuille_css.css" media="screen" />
  • La règle @import :
Dans l'élément style
Sélectionnez

<style type="text/css">
  @import url("url_feuille_css.css")
</style>
À l'intérieur d'une feuille de style
Sélectionnez

@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.
 
Sélectionnez

<style type="text/css">
  @import url("url_feuille_css.css") screen
</style>
Créé le 18 septembre 2009  par Macmillenium

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 :

 
Sélectionnez

<link rel="stylesheet" type="text/css" href="styles_impression.css" media="print" />
Créé le 18 septembre 2009  par Macmillenium
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez.com Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.