/* Style du header, il s'agit de la balise tout en haut de la page */
header 
{
    background: firebrick; /*  couleur du fond */
    color: white;  /* Couleur du texte */
    padding: 10px;
    text-align: center;
    
    


}

/* Style de la balise nav, il s'agit de la balise qui vient juste après (en dessous visuellement) le header, elle permet généralement de naviguer entre les différentes catégorie du site */
nav 
{
    background: maroon; /*  couleur du fond */
    padding: 10px;
    text-align: center;
    border: solid;
    

}


/* Style de la balise nav, il s'agit de la balise qui vient juste après (en dessous visuellement) le header, elle permet généralement de naviguer entre les différentes catégorie du site */
nav ul li
{
    display: inline;
    color: white;  /* Couleur du texte */
    border-right: solid;
    
    

}


nav ul li a
{
    color: white; 
    font-weight: bold;
    padding: 10px;
    
}

/* Style de la balise footer, il s'agit de la balise qui est tout en bas de la page généralement elle contient des informations style copyright etc.. elle peut contenir aussi de la navigation */
footer
{
    
    background: darkslategrey; /*  couleur du fond */
    /* clear: both permet d'annuler le flottements des éléments et de s'assurer que le footer se retrouve en bas */
    clear: both;
    border: solid;
}

article  /*Style balise article, elle est utilisé afin de contenir le contenu principale de la page, elle se trouve au centre */
{
    /*The CSS float property, when applied to an element, will place the element to either the left or right of its containing element. */
    float: right; /* Je place le contenu principale de la page à droite car je préfère visuellement; */
    width: 80%;  /* Le contenu principale de la page englobera 80% de l'espace */
    background:  lightgrey; /*  couleur du fond */
}
/*Style de la balise aside : elle se trouve à droite ou à gauche du contenu principale de la page afin d'y ajouter des anottation ou de permettre une meilleur navigation dans le document*/
aside
{
    background: indianred; /*  couleur du fond */
    float: left; /* Je place le contenu secondaire (annotation, navigation dans le contenu principale) de la page à gauche car je préfère visuellement; */
    width: 20%; /* Le contenu secondaire de la page englobera 20% de l'espace */
}