Accueil › Modules Web › Les langages du web › CSS

CSS

Cascading Style Sheet

  • Ensemble de règles définissant l’aspect esthétique du document (la structuration et la définition du contenu : HTML)
  • Démonstration : csszengarden
  • CSS2 → CSS3

Anatomie d’une règle CSS

sélecteur {propriété1: valeur; propriété2: valeur;}

Il y a plusieurs façons d’appeler une règle CSS :

  • fichier externalisé
<link rel="stylesheet" url="styles.css" media="web | print | all" />
  • dans la section <head>
<style type="text/css">
 	h1 {color: red; }
 </style>
  • inline, dans la balise
<span style="color: red;">bla bla</span>

Les règles seront appliquées dans l’ordre inverse : si vous utilisez les 3, l’inline prendra la priorité.

Le positionnement en CSS

  • Les balises de bloc se positionnent les unes aux dessus des autres. Sans changer la sémantique, comment aligner côte à côte deux blocs ?
  • Dans un parent commun (un <div> par exemple), il faut faire flotter les enfants (deux <ul> par exemple) avec la propriété css
div ul {float: left; width: 50%;}
  • Comme un bloc occupe toute la largeur de son parent, il faut réduire cette largeur pour laisser de la place au frère suivant.
  • Attention: le margin fait parti de la largeur, et selon le modèle de boîte du navigateur, le padding et la bordure aussi.

Toute une littérature sur la question :

Le CSS Reset

Les navigateurs possèdent leur propre rendu CSS : les marges du <body> ne sont pas les mêmes entre IE et Firefox, par exemple. C’est une convention établie depuis longtemps que le <strong> équivaut à une mise en gras, ou <em> en italique. Encore une fois : mélange des genres entre sémanttique et esthétique. D’où l’idée du CSS reset qui remet les choses à plat. Plusieurs écoles :

Il y a les pour et les contre de chaque modèle : adoptez et adaptez le vôtre. Installez-le sur un serveur et utilisez-le pour chaque projet :

@import url(http://monserveur.com/styles/reset.css)

A lire ailleurs

Lire la suite