WordPress : Mise en forme de blocs WP06

Choisissez une méthode permettant d’insérer du code CSS dans votre installation de WordPress

• Via l’outil de personnalisation du thème ;
• Via une extension comme Simple Custom CSS ;
• Via un thème enfant, cf. Créer un thème enfant sur WordPress

Créez un nouvel article (ou une nouvelle page) avec le nom Mise en forme CSS.

Dans un second onglet ou une seconde fenêtre de votre navigateur, ouvrez l’outil que vous avez choisit afin de modifier le CSS de votre site.

Créez un nouveau paragraphe contenant du texte dans l’article Mise en forme CSS, appliquez à ce paragraphe un nom de classe CSS de votre choix.

Publiez votre page et affichez-la.

En utilisant le nom de la class que vous avez choisit à la question 4, ajoutez le code CSS permettant d’afficher le paragraphe afin qu’il ressemble à l’exemple ci-dessous.

Créez un nouveau paragraphe dans l’article Mise en forme CSS, puis en utilisant les CSS, faites en sorte qu’il ressemble à l’exemple ci-dessous.

Créez un nouveau paragraphe dans l’article Mise en forme CSS, puis en utilisant les CSS, faites en sorte qu’il ressemble à l’exemple ci-dessous.

Créez un nouveau paragraphe dans l’article Mise en forme CSS, puis en utilisant les CSS, faites en sorte qu’il ressemble à l’exemple ci-dessous.

Créez un nouveau paragraphe dans l’article Mise en forme CSS, puis en utilisant les CSS, faites en sorte qu’il ressemble à l’exemple ci-dessous.

Créez un nouveau paragraphe dans l’article Mise en forme CSS, puis en utilisant les CSS, faites en sorte qu’il ressemble à l’exemple ci-dessous. Utilisez un générateur d’ombres en CSS , que vous trouverez en ligne, pour l’effet d’ombrage.

Créez un nouveau paragraphe dans l’article Mise en forme CSS, puis en utilisant les CSS, faites en sorte qu’il ressemble à l’exemple ci-dessous.

Créez un nouveau paragraphe dans l’article Mise en forme CSS, puis en observant et en personnalisant le code fourni, faites en sorte qu’il ressemble à l’exemple ci-dessous.

.exemple {
    position: relative;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 6px;
}
.exemple::after {
    position: absolute;
    top: 100%;
    left: 30px;
    content: '';
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top: 15px solid #f0f0f0;
}