10 exemples de code CSS simples que vous pouvez apprendre en 10 minutes

10 exemples de code CSS simples que vous pouvez apprendre en 10 minutes

Une fois que vous aurez commencé à vous familiariser avec le HTML, vous serez probablement intéressé à ajouter plus de punch visuel à vos pages Web. CSS est le meilleur moyen de le faire. CSS vous permet d'appliquer des modifications sur l'ensemble de votre page sans vous fier au style en ligne.





Voici plusieurs exemples CSS simples pour vous montrer comment effectuer des modifications de style de base sur votre page Web.



1. Code CSS de base pour une mise en forme facile des paragraphes

Le style avec CSS signifie que vous n'avez pas besoin de spécifier un style à chaque fois que vous créez un élément. Vous pouvez simplement dire « tous les paragraphes doivent avoir ce style particulier » et vous êtes prêt à partir.





Disons que vous voulez chaque paragraphe (

, l'une des balises HTML que tout le monde devrait connaître) soit légèrement plus grande que d'habitude. Et avec du texte gris foncé, au lieu de noir.

En rapport: La feuille de triche HTML



Le code CSS pour cela est :

p { font-size: 120%; color: dimgray; }

Simple! Désormais, chaque fois que le navigateur affiche un paragraphe, le texte héritera de la taille (120 % de la normale) et de la couleur ('dimgray').



Si vous êtes curieux de savoir quelles couleurs de texte brut vous pouvez utiliser, consultez ceci Liste des couleurs CSS de Mozilla.

2. Exemple CSS pour changer la casse des caractères

Vous voulez créer une désignation pour les paragraphes qui doivent être en petites majuscules ? Un exemple CSS pour cela serait:



p.smallcaps { font-variant: small-caps; }

Pour créer un paragraphe entièrement en petites majuscules, utilisez une balise HTML légèrement différente. Voici à quoi cela ressemble :

Your paragraph here.

L'ajout d'un point et d'un nom de classe à un élément spécifie un sous-type de cet élément défini par une classe. Vous pouvez le faire avec du texte, des images, des liens et à peu près n'importe quoi d'autre.

Si vous souhaitez modifier un ensemble de texte en une casse spécifique, utilisez ces exemples de code CSS :

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Le dernier met en majuscule la première lettre de chaque phrase.

Les changements de style ne se limitent pas aux paragraphes. Il existe quatre couleurs différentes auxquelles un lien peut être attribué : sa couleur standard, sa couleur visitée, sa couleur de survol et sa couleur active (qu'il affiche lorsque vous cliquez dessus). Utilisez cet exemple de code CSS :

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Avec les liens, chaque « a » est suivi de deux points, pas d'un point.

Chacune de ces déclarations change la couleur d'un lien dans un contexte spécifique. Il n'est pas nécessaire de changer la classe d'un lien pour qu'il change de couleur.

Alors que le texte souligné indique clairement un lien, il est parfois plus agréable de supprimer ce soulignement. Ceci est accompli avec l'attribut 'text-decoration'. Cet exemple CSS montre comment supprimer les soulignements sur les liens :

a { text-decoration: none; }

Tout ce qui contient la balise lien ('a') restera non souligné. Vous voulez le souligner lorsque l'utilisateur le survole ? Ajoutez simplement :

a:hover { text-decoration: underline; }

Vous pouvez également ajouter cette décoration textuelle aux liens actifs pour vous assurer que le soulignement ne disparaît pas lorsque vous cliquez sur le lien.

Vous voulez attirer plus d'attention sur votre lien ? Un bouton de lien est un excellent moyen de s'y prendre. Celui-ci nécessite quelques lignes supplémentaires :

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Expliquons cet exemple de code CSS.

L'inclusion des quatre états de lien garantit que le bouton ne disparaît pas lorsqu'un utilisateur survole ou clique dessus. Vous pouvez également définir différents paramètres pour le survol et les liens actifs, par exemple, changer la couleur du bouton ou du texte.

La couleur d'arrière-plan est définie avec background-color et la couleur du texte avec color. Le remplissage définit la taille de la boîte --- le texte est rempli de 10 px verticalement et de 25 px horizontalement.

Text-align garantit que le texte est affiché au centre du bouton, au lieu d'être sur un côté. La décoration de texte, comme dans le dernier exemple, supprime le soulignement.

comment compresser un fichier video sur windows

Le code CSS « ​​display: inline-block » est un peu plus compliqué. En bref, il vous permet de définir la hauteur et la largeur de l'objet. Il garantit également qu'il commence une nouvelle ligne lorsqu'il est inséré.

6. Exemple de code CSS pour créer une zone de texte

Un paragraphe simple n'est pas très excitant. Si vous souhaitez mettre en évidence un élément sur votre page, vous pouvez ajouter une bordure. Voici comment procéder avec une chaîne de code CSS simple :

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Celui-ci est simple. Il crée une bordure violette solide, de cinq pixels de large, autour de tout paragraphe de classe importante. Pour qu'un paragraphe hérite de ces propriétés, il suffit de le déclarer comme ceci :

Your important paragraph here.

Cela fonctionnera quelle que soit la taille du paragraphe.

Il existe de nombreux styles de bordure différents que vous pouvez appliquer ; au lieu de 'solide', essayez 'pointillé' ou 'double'. Pendant ce temps, la largeur peut être « fine », « moyenne » ou « épaisse ». Le code CSS peut même définir l'épaisseur de chaque bordure individuellement, comme ceci :

border-width: 5px 8px 3px 9px;

Cela se traduit par une bordure supérieure de cinq pixels, une bordure droite de huit, une bordure inférieure de trois et une taille de bordure gauche de neuf pixels.

7. Centrer les éléments avec le code CSS de base

Pour une tâche courante, centrer des éléments avec du code CSS est étonnamment peu intuitif. Une fois que vous l'avez fait plusieurs fois, cela devient beaucoup plus facile. Vous avez plusieurs façons de centrer les choses.

Pour un élément de bloc (généralement une image), utilisez l'attribut margin :

.center { display: block; margin: auto; }

Cela garantit que l'élément est affiché sous forme de bloc et que la marge de chaque côté est définie automatiquement. Si vous souhaitez centrer toutes les images sur une page donnée, vous pouvez même ajouter « marge : auto » à la balise img :

img { margin: auto; }

Pour savoir pourquoi cela fonctionne de cette façon, consultez le Explication du modèle de boîte CSS au W3C .

Mais que faire si vous voulez centrer le texte avec CSS ? Utilisez cet exemple CSS :

.centertext { text-align: center; }

Vous voulez utiliser la classe 'centertext' pour centrer le texte dans un paragraphe ? Ajoutez simplement cette classe au

étiqueter:

This text will be centered.

8. Exemples CSS pour ajuster le remplissage

Le remplissage d'un élément spécifie combien d'espace doit être de chaque côté. Par exemple, si vous ajoutez 25 pixels de remplissage au bas d'une image, le texte suivant sera poussé de 25 pixels vers le bas. De nombreux éléments peuvent avoir un rembourrage, pas seulement des images.

Disons que vous voulez que chaque image ait 20 pixels de remplissage sur les côtés gauche et droit, et 40 pixels en haut et en bas. L'exécution de code CSS la plus basique pour cela est :

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Il existe cependant une instruction CSS plus courte, qui présente toutes ces informations sur une seule ligne :

img { padding: 40px 25px 40px 25px; }

Cela définit les rembourrages en haut, à droite, en bas et à gauche sur le bon numéro. Grâce à l'utilisation de seulement deux valeurs (40 et 25), vous pouvez le raccourcir encore :

img { padding: 40px 25px }

Lorsque vous n'utilisez que deux valeurs, la première valeur est définie pour le haut et le bas, tandis que la seconde sera à gauche et à droite.

9. Mettez en surbrillance les lignes du tableau avec le codage CSS

Le code CSS rend les tableaux beaucoup plus beaux que les grilles par défaut. L'ajout de couleurs, l'ajustement des bordures et la réactivité de votre table aux écrans mobiles sont tous faciles. Cet exemple CSS simple vous montre comment mettre en évidence les lignes d'un tableau lorsque vous passez la souris dessus.

tr:hover { background-color: #ddd; }

Désormais, chaque fois que vous passez la souris sur une cellule du tableau, cette ligne change de couleur. Pour voir d'autres choses intéressantes que vous pouvez faire, consultez le Page du W3C sur les tableaux CSS sophistiqués .

10. Exemple CSS pour déplacer des images entre transparent et opaque

Le code CSS peut également vous aider à faire des choses intéressantes avec des images. Voici un exemple CSS pour afficher des images avec une opacité inférieure à la pleine, de sorte qu'elles apparaissent légèrement « blanchies ». Lorsque vous passez la souris sur les images, elles sont portées à une opacité complète :

img { opacity: 0.5; filter: alpha(opacity=50); }

L'attribut 'filter' fait la même chose que 'opacité', mais Internet Explorer 8 et les versions antérieures ne reconnaissent pas la mesure d'opacité. Pour les navigateurs plus anciens, c'est une bonne idée de l'inclure.

Maintenant que les images sont légèrement transparentes, vous pouvez les rendre complètement opaques au survol de la souris :

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 exemples CSS avec code source

Avec ces exemples de code CSS, vous devriez avoir une bien meilleure idée du fonctionnement de CSS. modèles CSS peut aider, mais comprendre les éléments bruts est vital.

Ces 10 exemples de code CSS simples récapitulés :

  1. Formatage de paragraphe facile
  2. Changer la casse des lettres
  3. Changer les couleurs des liens
  4. Supprimer les soulignements des liens
  5. Faire un bouton de lien
  6. Créer une zone de texte
  7. Aligner les éléments au centre
  8. Ajuster le rembourrage
  9. Mettre en surbrillance les lignes du tableau
  10. Rendre les images opaques

En les révisant à nouveau, vous remarquerez plusieurs modèles que vous pouvez appliquer au futur code. Et c'est à ce moment-là que vous savez que vous avez vraiment commencé à devenir un maître CSS. Mais s'en souvenir peut être difficile. Vous voudrez peut-être ajouter cette page à vos favoris pour référence future.

Partager Partager Tweeter E-mail La feuille de triche des propriétés essentielles CSS3

Maîtrisez la syntaxe CSS essentielle avec notre aide-mémoire des propriétés CSS3.

Lire la suite Rubriques connexes
  • La programmation
  • Création de sites web
  • CSS
  • Script
A propos de l'auteur Christian Cawley(1510 articles publiés)

Éditeur adjoint pour la sécurité, Linux, le bricolage, la programmation et la technologie expliquée, et producteur de podcasts vraiment utiles, avec une vaste expérience dans le support de bureau et de logiciels. Contributeur au magazine Linux Format, Christian est un bricoleur de Raspberry Pi, un amateur de Lego et un fan de jeux rétro.

Plus de Christian Cawley

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner