Aller au contenu

CSS Propriétés

La couleur#

Les propriétés sont color pour le texte et background-color pour l’arrière-plan d’un élément.

Tous les paragraphes du site seront écrit en bleu

p {
  color: blue;
}

Le fond de tous les paragraphes est en gris

p {
  color: blue;
  background-color: gray;
}

Plusieurs choix de valeurs sont possibles :

  • utilisation de mot-clé: red, black, blue, orange, pink, deepskyblue, etc.
  • utilisation du code héxadécimal: #FFFFFF, #325F9A, #09C. Ce code est composé d’un # et de 6 caractères représentant les valeurs RVB.
  • utilisation de fonctions de couleur: rgb(R, V, B)
  • utilisation de fonctions de couleur avec transparence: rgba(R, V, B, a)

Pour choisir vos couleurs avec Chromafiltre ou Adobe Color. Liste complète des couleurs CSS

Les textes#

La police#

C’est la propriété font-family.

Choix de police

body {
  font-family: Trebuchet MS, Arial, sans-serif;
}

Dans cet exemple, on spécifie que le texte doit être affiché avec la police Trebuchet MS. Si cette police n’est pas présente, le navigateur doit alors utiliser la police Arial. En dernier recours, le navigateur devra utiliser une police sans-serif (Les serifs sont les petits empattements des lettres). Séparez les polices par des virgules.

Il est également possible de demander au navigateur de charger un fichier de police personnalisé. Plusieurs services disponibles:

Chargement d’une police depuis HTML (c’est un fichier CSS)

<link href="https://fonts.bunny.net/css?family=abeezee:400" rel="stylesheet" />

Utilisation depuis CSS

h1 {
  font-family: ABeeZee, sans-serif;
}

Stack générique

Pour normaliser les polices entre navigateurs et OS, il est également possible d’utiliser cette stack de polices génériques.

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

La taille#

C’est la propriété font-size.

Il existe 2 types d’unités, les unités relatives et les unités absolues. Il est préférable d’utiliser des unités relatives (qui s’adapatent aux différents tailles d’écran et de choix des utilisateurs), mais sont plus contraignantes à utiliser. L’unité de base est 1em, qui correspond à 1 fois la taille de la police courante.

Choix de taille de police

html {
  font-size: 0.9em;
}
p {
  font-size: 1.1em;
}

Dans cet exemple, nous spécifions une taille de 0.9em pour l’ensemble de la page, puis une valeur de 1.1em aux éléments <p>. Cet élément aura donc une taille de 0.9*1.1 soit 0.99em, car les éléments ont hérités de la valeur 0.9.

La graisse#

C’est la propriété font-weight. Les valeurs possibles sont normal, bold ou une valeur numérique multiple de 100 (400 = normal, 700 = gras).

Pour mettre un texte en italique, la propriété est font-style: italic.

Le soulignement#

C’est la propriété text-decoration. Les valeurs possibles sont underline, overline, line-through ou none pour enlever le soulignement (cas des liens hypertextes).

Les dimensions#

Pour bien comprendre, imaginez que chaque balise HTML est une boite. Cette boite peut avoir 2 largeurs par défaut, en fonction de son type d’élément HTML :

  • élément de type block : la boite mesure toute la largeur de son parent
  • élément de type inline : la boite mesure la taille de son contenu

Par défaut, la hauteur d’une boite est fonction de son contenu.

Il est possible de spécifier une nouvelle largeur et hauteur de boite, mais seulement avec les éléments de type block. La propriété width modifie la largeur, height modifie la hauteur

Nouvelles dimensions

#menu {
  width: 180px;
  height: 400px;
}

Dans cet exemple, l’élément avec id="menu" aura une taille de 180px en largeur et de 400px en hauteur. Cela implique que l’élément soit de type block.

Il existe également les propriétés min-width, min-height, max-width, max-height.

Les dimensions, en mieux#

Par défaut, width et height définissent la largeur et la hauteur interne d’un élément. Les bordures et les marges internes augmentent alors la taille totale. Pour simplifier les choses, CSS introduit une nouvelle propriété box-sizing.

Modification du modèle de boite pour tous les éléments (*)

* {
  /* modèle de boite par défaut */
  box-sizing: content-box;

  /* nouveau modèle de boite */
  box-sizing: border-box;
}

Les bordures#

C’est la propriété border

Les 3 valeurs obligatoires pour créer une bordure (type, taille et couleur)

#menu {
  border: solid 2px black;
}

Les 3 propriétés indépendantes : border-style, border-color et border-width.

En mode normal(box-sizing: content-box), la taille de la bordure est comprise dans la taille de la boite. Une boite avec width: 200px et border-width: 5px mesure en réalité 210px !

Les marges#

Il existe deux types de marges :

  • les marges externes : marges par rapport aux autres boites. C’est la propriété margin.
  • les marges internes : marges à l’intérieur de la boite (entre la limite de boite et le contenu). C’est la propriété padding.

Ajout de marges internes de 10px et externes de 20px

#menu {
  margin: 20px;
  padding: 10px;
}

Il est également possible d’appliquer une marge sur un seul coté de boite. Pour cela, on ajoute aux propriétés de marges: -top, -bottom, -right ou -left.

Marge externe haute de 20px, margin interne gauche et droite de 10px

#menu {
  margin-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

Les marges ne s’appliquent que sur les boites de type block, sauf les padding-left et padding-right qui peuvent être utilisés pour les boites inline.

En mode normal(box-sizing: content-box), les marges internes s’ajoutent à la taille de l’élément. Une boite avec width: 200px et padding: 5px mesure en réalité 210px !

Il existe également auto qui permet un centrage horizontal des éléments de type block au sein de leur parent.

Alignement horizontal d’un block

#menu {
  margin: 0 auto;
}

Les listes#

C’est la propriété list-style. Plusieurs valeurs possibles, comme disc, circle, square, decimal ou encore none pour enlever les puces.

Les alignements#

Pour centrer horizontalement :

  • un élément block, c’est la règle margin: auto
  • un élément inline, c’est la propriété text-align. Les valeurs sont left, center, right ou justify.

Pour centrer verticalement, cela dépend du mode de positionnement.

Exercice - Préparez l’architecture de votre site#

  • spécifiez une largeur au <body> et alignez-le dans son parent (<html>)

  • appliquez une couleur de fond différente sur <html> et <body>

  • entête :

    • ajoutez une marge en bas de 30px
    • gérez les marges internes
    • appliquez une couleur de fond

  • menu :

    • fixez la largeur
    • gérez les liens (couleur, alignement...)
    • gérez les liens au survol/focus
    • gérez les marges internes

  • contenu :

    • modifiez l’espacement de chaque titre, de chaque paragraphe
    • stylez les éléments en ligne (<strong>, <em>...)

  • pied de page :

    • ajoutez une marge en haut de 30px
    • alignez au centre le contenu
    • ajoutez des marges internes de 40px
    • gérez les éléments à votre convenance

  • pour les textes :

    • appliquez les polices de votre choix
      • utilisez un service comme Bunny Fonts ou autre
    • spécifiez les différentes tailles (titre, paragraphe...)

Les effets graphiques#

Les coins arrondis#

C’est la propriété border-radius.

Ajout de coins arrondis sur une boite

div {
  border-radius: 20px;
}
div {
  border-radius: 10px 20px 0 50px;
}

Les ombres#

Pour les textes, c’est la propriété text-shadow.

Ajout d’une ombre sur un texte

p {
  text-shadow: 1px 1px 2px black;
}

Pour les boites, c’est la propriété box-shadow.

Ajout d’une ombre sur une boite

p {
  box-shadow: 1px 1px 2px black;
}

Les valeurs sont: décalage en X, décalage en Y, valeur du flou, couleur.

Les dégradés#

Les dégradés permettent de créer des images à la volée. Pour un dégradé linéaire, c’est la fonction linear-gradient(). La première valeur est la direction du dégradé (du haut vers le bas par défaut), les autres valeurs sont une liste de couleurs.

Un dégradé du haut vers le bas, rouge vers bleu

div {
  background: linear-gradient(red, blue);
}

Un dégradé de gauche vers la droite, rouge puis vert puis bleu

div {
  background: linear-gradient(to right, red, green, blue);
}

Les images décoratives#

La propriété background-image permet d’ajouter une image décorative à un élément. La syntaxe est la suivante :

background-image: url("image.jpg");

Il est ensuite possible de choisir un style de répétition avec background-repeat, les valeurs possibles sont: repeat, repeat-x, repeat-y ou no-repeat.

background-repeat: repeat-x;

On peut aussi modifier la position de cette image en arrière-plan avec background-position. Plusieurs valeurs sont possibles, valeurs en unités ou top, center, bottom et left, center, right.

/* à 50px du haut et 5px de la gauche */
background-position: 50px 5px;
/* en haut à gauche */
background-position: top left;

La taille de l’arrière-plan peut aussi être modifiée, avec la propriété background-size

/* l’image d’arrière-plan mesure 100px sur 100px */
background-size: 100px 100px;

/* l’image d’arrière-plan couvre entièrement l’élément */
background-size: cover;

/* l’image d’arrière-plan est contenue entièrement dans l’élément */
background-size: contain;

Les formats d’images du web

CSS avancé#

Les animations#

Les transitions CSS permettent d’animer une propriété CSS d’un état A à un état B. Très pratique pour des effets d’animations simples.

Animation simple de changement de couleur de fond

.element {
  background: red;
  transition: background 1s;
}
.element:hover {
  background: green;
}

La transition s’effectue lors d’un changement d’état, qui peut être :

Pour des animations complexes (changement d’état plusieurs fois dans le temps), la propriété animation associée à des étapes-clés (@keyframes) est nécessaire :

Animation complexe de changement de couleur de fond, en boucle

.element {
  background: red;
}
.element:hover {
  animation: changementCouleur 1s infinite;
}
@keyframes changementCouleur {
  from { background: red; }
  40%  { background: green; }
  to   { background: blue; }
}

Les transformations#

Des transformations dans l’espace sont désormais possible en CSS, que ce soit en 2D ou même en 3D.

Rotation d’un élément

.element {
  transform: rotate(45deg);
}

Les transformations ont pour origine le centre de l’élément transformé par défaut. Il est possible de modifier l’origine avec transform-origin

Changement d’origine de la transformation

.element {
  /* transformation à partir du coin en bas à gauche de l’élément */
  transform-origin: 0 100%;
  transform: rotate(90deg) ;
}

Transformations combinées d’un élément

.element {
  transform: rotate(45deg) translateX(100px) skewX(20deg);
}

Pour la 3D, il est nécessaire de définir une valeur de perspective sur un élément parent à l’élément transformé, sinon la transformation s’effectue "à plat".

Rotation autour de l’axe X d’un élément

.parent {
  perspective: 500px;
}
.element {
  transform: rotateX(45deg);
}

Translations complexes

.parent {
  perspective: 500px;
}
.element {
  transform: translate3d(100px, 100px, -50px);
}

Les transformations prennent tout leur sens associées aux animations.

Animation d’une transformation

.parent {
  perspective: 500px;
}
.element {
  transform: rotateX(0);
  transition: transform 0.5s;
}
.element:hover {
  transform: rotateX(45deg);
}

Les filtres#

CSS permet également d’appliquer des filtres d’images sur n’importe quel élément d’une page :

Filtre flou

.element {
  filter: blur(2px);
}

Filtre avancé

.element {
  filter: brightness(1.2) contrast(2);
}