/* les commentaires sont entourés de /* et de */
/* ils peuvent être sur plusieurs lignes:

Bla

Bla
(j'ai oublié de le dire mais c'était idem pour les commentaires html) 
*/


/* tout d'abord : les pointeurs */

/* pointeurs vers type d'élément : on met simplement le nom de l'élément : exemple avec élément body :  */
body {

}

/* pointeurs vers classe : un point + le nom de la classe, exemple avec classe qui s'appellerait bonjour */

.bonjour {

}

/* pointeur vers id: # + le nom de l'id exemple avec l'id carotte :*/
#carotte {

}

/* la différence entre classe et id c'est que par éthique on utilise plus id pour un élément seul, et classe pour plusieurs éléments, je dirai même qu'on utilise parfois id uniquement pour les script mais bon c'est l'éthique des développeurs et ce ne sont donc que des lois facultative... XD*/

/* les pointeurs peuvent être Additionnés: exemple avec un élément div qui aurait la classe hello : */

div.hello {

}

/* le pointeur universel (qui vise tout les éléments) : */

* {

}

/* couleur d'un élément: color: exemple sur les éléments p */

p {
color: red;
/* le ";" à la fin de chaque ligne est important, les couleurs peuvent être sous formes de nom de couleur (red, blue, white, yellow, black, etc. la liste des noms de couleurs [ici](https://www.w3schools.com/tags/ref_colornames.asp),
mais les couleurs peuvent aussi être présente sous forme de code de couleur html: */
color: #0f0;
/* ou sous forme de rgb */
color: rgb(0,255,0);
/* il existe encore d'autres formes de couleurs mais ça prendrait trop de temps et de place de tous les cités ici*/
}

/* couleur de fond d'un élément : background-color*/

p {
background-color:blue;
/* les type de couleurs possibles pour "color" sont les meme pour tous les types de couleurs sur css que ce soit l'attribut color, l'attribut background-color, ou n'importe quel autre attribut utilisant de la couleur */
}

/* fond d'un élément: background : (le background-color est un attribut enfant de background, si vous définissez une couleur sur l'attribut background, cela fera la meme chose que si vous définissiez une couleur sur l'attribut background-color )*/

p {
background: url("/chemin/vers/image.png");
/* vous pouvez définir une image comme fond avec l'attribut background et la fonction url*/
}

/* les longueur (width) et hauteurs (height) d'élements */
p {
width: 20px; /* les tailles peuvent être exprimées en px (pixels), %, cm, em, etc. */
height: 30%;
}

/* le calcul (fonction calc)*/
p {
width: calc(20% + 20px);
height: calc(30% + calc(20px + 2px));
}

/* les variables: */

div {
--supercouleur: red; /* la variable se déclare toujours de la manière suivante : --nom_de_variable (toujours les 2 tirets au début)*/
background: var(--supercouleur); /* pour utiliser la variable on utilise la fonction var*/
}

/* padding et margin */

div {
padding: 10px; /* l'espace qu'il y a entre le contenu de l'élement et le bord de l'élement*/
margin: 30px; /* l'espace qu'il y a autour de l'élement */
}

/* border */

div {
border: 2px solid black; /* lors de la déclaration de l'attribut border on donne la largeur de la border, le mode de la border (solid = continue, une seule ligne), et la couleure de la border, border=ligne de contour de l'objet, bordure*/
}