CSS

Le premier principe de CSS est la séparation de la forme et du contenu. En d'autres termes, le CSS (Cascading Style Sheets) est utilisé pour définir la mise en forme et l'apparence des éléments HTML, tandis que le HTML est utilisé pour définir le contenu et la structure de la page Web. Cette séparation permet de séparer les différentes responsabilités et d'améliorer la flexibilité et la maintenabilité du code.

Voici un exemple simple qui illustre l'utilisation de CSS pour définir la mise en forme des éléments HTML:

h1 {
  font-size: 24px;
  color: red;
}
p {
  font-size: 16px;
  color: blue;
}
   

Ici le titre h1 est défini avec une taille de police de 24px et une couleur rouge, tandis que le paragraphe p est défini avec une taille de police de 16px et une couleur bleue.

Concepts Fondamentaux CSS

Sélecteurs: les sélecteurs permettent de sélectionner des éléments HTML pour leur appliquer des styles. Il existe différents types de sélecteurs, tels que les sélecteurs d'identifiant, de classe, d'élément, de descendant, d'attribut, et d'universalité.

Selecteur d’ID
Selecteur de classe
Selecteur d’element HTM

  #promotion {
font-size: 50px;
color: red;
border: 1 px solid blue;
  }

Sélecteur de classe

permet de sélectionner un ou plusieurs éléments HTML en fonction de leur classe. Le sélecteur de classe est représenté par le symbole . suivi du nom de la classe, comme dans l'exemple suivant:

  .category-container {
display: flex;
  }

Propriétés

les propriétés sont les caractéristiques des éléments HTML qui peuvent être modifiées par le CSS. Il existe de nombreuses propriétés CSS, telles que la couleur, la taille, la police, la bordure, l'arrière-plan, l'espacement, l'alignement, et la disposition.

color: permet de définir la couleur de la police d'un élément HTML. La valeur de la propriété color peut être une couleur en RGB, en hexadécimal, en nom, ou en valeur HSL, comme dans l'exemple suivant:

h1 {
  color: #ff0000;
}

font-size: permet de définir la taille de la police d'un élément HTML. La valeur de la propriété font-size peut être un nombre en pixels, en points, en ems, ou en pourcentage, comme dans l'exemple suivant:

h1 {
  font-size: 24px;
}

background-color: permet de définir la couleur de fond d'un élément HTML. La valeur de la propriété background-color peut être une couleur en RGB, en hexadécimal, en nom, ou en valeur HSL, comme dans l'exemple suivant:

body {
  background-color: #f0f0f0;
}

border: permet de définir la bordure d'un élément HTML. La valeur de la propriété border peut être composée de trois éléments: la largeur, le style, et la couleur de la bordure, comme dans l'exemple suivant:

img {
  border: 2px solid #cccccc;
}

Valeurs

Si vous souhaitez que la taille d'un élément soit fixe et ne change pas en fonction de la taille de la fenêtre du navigateur, vous pouvez utiliser des valeurs en pixels (px).
Si vous souhaitez que la taille d'un élément soit proportionnelle à celle de son parent ou de la fenêtre du navigateur, vous pouvez utiliser des valeurs en pourcentage (%) ou en vh/vw (vh ou vw).
Si vous souhaitez que la taille d'un élément soit liée à la taille de la police de l'élément ou de l'élément racine, vous pouvez utiliser des valeurs en em/rem (em ou rem).

Il est important de noter que les valeurs de taille en pixels (px) peuvent rendre votre site moins adaptatif aux différentes tailles d'écran. Dans la mesure du possible, il est conseillé d'utiliser des valeurs en pourcentage (%), en vh/vw (vh ou vw) ou en em/rem (em ou rem) pour que votre site soit adaptatif.

les valeurs sont les spécifications des propriétés CSS. Elles peuvent être des nombres, des unités de mesure, des couleurs, des polices, des marges, des padding, des bordures, des arrière-plans, des transitions, des transformations, et d'autres valeurs spécifiques à chaque propriété.

Valeur de couleur

Nom : red,green,blue, ...
Valeur hexadécimal : #ff0000, #00ff00, #0000ff, ...
Valeur RGB : rgb(255,0, 0), rgb(0,255,0), rgb(0,0,255), ...
Valeur RGBA(accès a l'opacité) : rgba(255, 0, 0, 1), ...
Valeur de taille :
px
% ( 50% = moitié que l’element parent)
em
rem
1rem
vh
(vw)
Valeur d’alignement
left: aligne l'élément à gauche
right: aligne l'élément à droite
center: aligne l'élément au centre
justify: aligne l'élément sur la largeur totale du parent
inherit: hérite de l'alignement de l'élément parent

Cascade

la cascade détermine comment les styles sont appliqués aux éléments HTML en cas de conflit ou de redondance.

Les règles de cascade définissent l'ordre de priorité des styles en fonction de leur origine, de leur spécificité, et de leur importance.

Importance de la règle : une règle déclarée avec l'attribut !important a une priorité plus élevée qu'une règle normale.

Spécificité de la règle : une règle qui cible un élément de manière plus spécifique (par exemple en utilisant un identifiant unique) a une priorité plus élevée qu'une règle qui cible un élément de manière plus générale (par exemple en utilisant une classe commune à plusieurs éléments). Ordre d'application des règles : si plusieurs règles ont la même importance et la même spécificité, c'est la dernière règle déclarée qui sera appliquée.

Héritage

En CSS, l'héritage désigne le fait qu'un élément peut hériter des propriétés de ses éléments parent ou enfants. Cela signifie que si un élément parent a une propriété CSS définie, cette propriété sera automatiquement appliquée à tous les éléments enfants de cet élément parent.

Par exemple, si vous définissez la couleur du texte d'un élément <body> en utilisant la propriété CSS color, tous les éléments enfants de l'élément <body> auront automatiquement la même couleur de texte. Cela permet d'éviter de devoir redéfinir la même propriété pour chaque élément enfant individuellement.

Il est possible de désactiver l'héritage pour une propriété CSS en utilisant la valeur inherit pour cette propriété.

body {
  color: red;
}

p {
  color: inherit;
}

Ttous les éléments <p> hériteront de la couleur rouge du parent <body>, sauf ceux dont la couleur a explicitement été redéfinie avec la valeur inherit.

Catégories de propriétés CSS

Propriétés de mise en forme du texte

elles permettent de contrôler la taille, la police, l'alignement, etc. du texte d'un élément.

font-size : définit la taille de la police utilisée pour le texte d'un élément.
font-family : définit la famille de polices à utiliser pour le texte d'un élément.
text-align : définit l'alignement du texte d'un élément (gauche, droite, centré, justifié).

Propriétés de mise en forme des couleurs

elles permettent de contrôler la couleur du texte, de la police et du fond d'un élément.

color : définit la couleur du texte d'un élément.
background-color : définit la couleur de fond d'un élément.

Propriétés de mise en forme des dimensions

elles permettent de contrôler la largeur, la hauteur, le margin et le padding d'un élément.

width et height : définissent la largeur et la hauteur d'un élément
margin et padding : définissent l'espacement autour d'un élément. Le margin définit l'espacement autour de l'élément lui-même, tandis que le padding définit l'espacement autour du contenu de l'élément.

Propriétés de mise en forme de la disposition

elles permettent de contrôler la position, la disposition et l'empilement des éléments sur la page.

line-height : définit l'espacement entre les lignes de texte d'un élément.
letter-spacing : définit l'espacement entre les lettres d'un élément.

Propriétés de mise en forme des bordures et ombres

elles permettent de contrôler l'apparence des bordures et des ombres autour des éléments.

border : définit un bord autour d'un élément. Vous pouvez définir sa couleur, sa largeur et son style (par exemple, plein, en pointillés, en traits).

box-shadow : ajoute une ombre autour d'un élément.
border-radius : permet de redondre les coins d'un élément en lui donnant un aspect arrondi.
opacity : définit la transparence d'un élément.
float : permet de faire flotter un élément (généralement une image) à gauche ou à droite du texte qui l'entoure.
position : permet de contrôler la position d'un élément par rapport à son conteneur parent ou à d'autres éléments sur la page.
display : permet de contrôler comment un élément est affiché, par exemple en tant que bloc ou en ligne.
overflow : permet de gérer comment le contenu d'un élément est affiché lorsqu'il dépasse les limites de l'élément.
visibility : permet de contrôler si un élément est visible ou non.
z-index : permet de contrôler l'ordre d'empilement des éléments, c'est-à-dire l'élément qui est affiché au-dessus ou au-dessous des autres.

CSS