A retenir !

• Les CSS utilisent un modèle de boîte pour contrôler l'affichage des éléments. Les boîtes sont constituées d'une aire de contenu, d'espacements, de bordures et de marges, tous optionnels.
• L'aire de contenu comprend le contenu de l'élément. L'espacement sert à créer de l'espace autour de l'aire de contenu, la bordure délimite l'espacement et le contenu en séparant visuellement le contenu, la marge entoure la bordure, l'espacement et le contenu tout en permettant de mettre de l'espace entre les éléments.
• L'arrière-plan d'un élément sera visible sous le contenu et l'espacement mais pas sous la marge.
• La largeur de l'espacement et de la marge peut s'exprimer en pixels ou en pourcentage. La largeur de la bordure quant à elle peut s'exprimer en pixels mais également avec les mots-clefs thin, medium et thick.
• Les bordures peuvent avoir huit styles différents parmi lesquels: solid, dashed, dotted et ridge.
• Les CSS permettent de déterminer de façon indépendante les valeurs de chacun des côtés de l'espacement, de la marge et de la bordure (top, right, bottom, left).
• La propriété line-height joue sur la taille de l'interligne.
• La propriété background-image permet de placer une image à l'arrière-plan d'un élément. Les propriétés background-position et background-repeat déterminent la position et la répétition de l'image en arrière-plan.
• L'attribut class sert à styler un groupe d'éléments alors que l'attribut id permet de donner un nom unique à un élément et à lui attribuer un style spécifique.
• Les éléments <div> servent à regrouper les éléments qui ont un rapport entre eux dans des sections logiques. Ces sections aident à identifier les principales zones de contenu d'une page comme l'en-tête et le pied de page.
• Il est également possible d'utiliser les éléments <div> pour regrouper des éléments dont le style est commun.
• Lorsque des sections sont regroupées avec des éléments <div>, gérez les <div> comme n'importe quel élément de type bloc.
• La propriété width donne sa largeur à l'aire de contenu d'un élément. La largeur totale de l'élément doit néanmoins être calculée en additionnant celle de l'aire de contenu, celle des espacements, des bordures et marges éventuelles.
• Lorsqu'un élément a une largeur fixe, sa taille ne s'adapte pas à celle de la fenêtre du navigateur pour la remplir en entier.
• La propriété text-align est associée à des éléments de type bloc et permet de centrer tout le contenu en-ligne de ceux-ci. Tous les éléments en bloc qui y sont imbriqués en héritent.
• Il est possible d'utiliser des sélecteurs descendants pour sélectionner des éléments imbriqués dans d'autres éléments. Par exemple, le sélecteur descendant div h2 sélectionne tous les éléments <h2> imbriqués dans les éléments <div> (enfants et petits-enfants inclus).
• Les raccourcis servent aux propriétés apparentées. Par exemple, padding-bottom et padding-left sont toutes reliées à l'espacement et peuvent être spécifiées en abrégé avec une seule règle, à savoir padding.
• L'élément en ligne <span> est similaire à l'élément <div>: il regroupe les éléments en-ligne apparentés et le texte.
• L'élément <a> peut avoir plusieurs états: visité, non visité et survolé. Chaque état peut être stylé de son côté grâce aux pseudo-classes :link, :visited et :hover.
• Les cellules d'un tableau peuvent avoir des espacements, des bordures et de l'espacement entre les bordures qui les séparent contrôlables par les CSS.
• La propriété border-collapse permet de fusionner les bordures de deux cellules pour améliorer la lisibilité d'un tableau.
• Les propriétés text-align et vertical-align permettent de jouer avec l'alignement des textes dans un tableau.