Une règle qui permet de colorer le contenu des articles est la suivante:

article {
   color: red;
}

Cette règle définit un style qui sera attaché à tous les éléments <article> de la page.

On utilise ici l'héritage des styles. Le style qui s'applique à un élément est celui défini au niveau de l'élément si il existe, ou en l'absence de définition celui de l'élément ancêtre le plus proche pour lequel un style est défini.

Le sélecteur * applique un style à tous les éléments de la page (figure gauche) alors qu'un sélecteur de balise (par exemple ici body ou article) associe le style qu'aux éléments portant cette balise (figure de droite). Les autres éléments héritent du style de leur parent.

La règle

article * {
   color: red;
}

Les styles CSS à définir sont :

#wrapper {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}
img {   /* style s'appliquant à toute les images */
    padding: 5px;  /* marge intérieure de 5 pixels */
}
.floatLeft {  /* classe pour faire flotter un élément à gauche */
    float: left;
}
.floatRight { /* classe pour faire flotter un élément à droite */
    float: right;
}
.clearRight { /* classe pour empêcher l'élément auquel 
    elle s'applique de se se situer à droite d'un élément flottant*/
    clear:right;
}

ils sont appliqués aux différentes images de la manière suivante :

...
<p>
    <img src="images/loremIpsum.png" class="floatLeft" alt="lorem ipsum"/>
    ...
<p>
<p>
    <img class="floatRight" src="images/li1.png" alt="lorem ipsum"/>
    <img class="floatRight clearRight" src="images/li2.png" alt="lorem ipsum"/>
    ...
<p>
...

            body {
                background-color: pink;
            }

            .container {  
                min-height: 100vh;  /** pour en savoir plus lire
                    https://www.alsacreations.com/astuce/lire/51-hauteur-100-element.html 
                */
                display: flex;   /* le div avec la classe container est un container flex */
                flex-direction: column; /* le flex-items qu'il contient sont affichés en colonne */
            }
            .box {
                text-align: center;
                color: white;
                font-family: sans-serif;
                font-size: 36px;
                padding: 20px;
            }
            #box-1 {
                background-color: #00FF00;  /* green */
                height: 60px; /*hauteur fixe */
            }

            #box-2 {
                background-color: #0000FF; /* blue */
                flex: 1;  /* l'élément est flexible il prendra toute 
                              la place libre dans son conteneur */
            }
            #box-3 {
                background-color: #FF0000;  /* red */
                height: 60px; /*hauteur fixe */
            }

            body {
                background-color: pink;
            }

            .container {
                min-height: 100vh;  
                display: flex;
                flex-direction: row; /* on change la direction de l'axe principal */ 
            }
            .box {
                text-align: center;
                color: white;
                font-family: sans-serif;
                font-size: 36px;
                padding: 20px;
            }

            #box-1 {
                background-color: green;
                width: 60px;  /* on fixe une largeur plutôt qu'une hauteur */ 
            }

            #box-2 {
                background-color: blue;
                flex: 1;
            }

            #box-3 {
                background-color: red;
                width: 60px;  /* on fixe une largeur plutôt qu'une hauteur */ 
            }

            body {
                background-color: pink;
            }

            .container {  
                min-height: 100vh; 
                display: flex;
                flex-direction: row;
            }
            .box {
                text-align: center;
                color: white;
                font-family: sans-serif;
                font-size: 36px;
                padding: 20px;
            }

            #box-1 {
                background-color: green;
            }

            /* si la fenêtre a une largeur inférieure à 640px on affiche en les boites en
               colonnes, c'est à dire les unes en dessus des autres */
            @media screen and (max-width: 640px) {
                #box-1, #box-3 { height: 60px; }
                .container { flex-direction: column}
            }

            /* si la fenêtre a une largeur supérieure à 640px on affiche les boites
               en lignes, c'est à dire les unes à côté des autres, il faut donc
               fixer une largeur pour box-1 et box-2 */
            @media screen and (min-width: 640px) {
                #box-1, #box-3 {
                    width: 60px;
                }
            }
            
            #box-2 {
                background-color: blue;
                flex: 1;
            }

            #box-3 {
                background-color: red;
            }