WordPress : Mise en forme de blocs WP06

Cet exercice consiste à mettre en forme des blocs de contenu dans un article WordPress en utilisant des styles CSS personnalisés.

Consignes de l’exercice

Choisissez une méthode permettant d’insérer du code CSS dans votre installation de 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.

Propriétés CSS utilisées :
border, margin, padding, background-color.

Aperçu exemple 1

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.

Propriétés CSS utilisées :
border-radius, margin, padding, background-color.

Aperçu exemple 2

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.

Propriétés CSS utilisées :
border et border-width (ou border-top et border-bottom) margin, padding.

Aperçu exemple 3

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.

Propriétés CSS utilisées :
border et border-width (ou border-top et border-left), margin, padding.

Aperçu exemple 4

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.

Aperçu exemple 5

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.

Aperçu exemple 6

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.

Aperçu exemple 7

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;
}
Aperçu exemple 8

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.