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

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

Ouvrez un nouvel onglet ou une nouvelle fenêtre dans votre navigateur avec votre site WordPress et créez une nouvelle feuille de style CSS en utilisant une extension telle que Simple Custom CSS.

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, 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-left) 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 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.