HTML

Introduction à CSS pour la mise en forme

Introduction à CSS pour la mise en forme


CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour définir la présentation visuelle des documents HTML. Il permet de contrôler l'apparence et la mise en page des éléments HTML sur une page web. Voici comment l'utiliser :


1. Syntaxe de base :


  • Les règles CSS sont constituées de deux parties : un sélecteur et une déclaration.
  • Le sélecteur cible les éléments HTML auxquels appliquer les styles.
  • La déclaration définit les propriétés de style à appliquer aux éléments ciblés.
  • Exemple :


/* Sélecteur */ 
h1 { 
  /* Déclaration */ 
  color: blue; 
  font-size: 24px; 
}


2. Sélecteurs :


  • Les sélecteurs permettent de cibler différents types d'éléments HTML.
  • Ils peuvent être basés sur le nom de l'élément, la classe, l'identifiant, etc.
  • Exemples :


/* Sélection par nom d'élément */ 
h1 { 
  color: blue; 
} 

/* Sélection par classe */ 
.paragraphe-important { 
  font-weight: bold; 
} 

/* Sélection par identifiant */ 
#en-tete { 
  background-color: gray; 
}


3. Propriétés et valeurs :


  • Les propriétés définissent les aspects visuels des éléments, comme la couleur, la taille du texte, la marge, etc.
  • Les valeurs déterminent les réglages spécifiques pour chaque propriété.
  • Exemple :


/* Définir la couleur du texte */ 
h2 { 
  color: red; 
} 

/* Définir la taille de la police */ 
p { 
  font-size: 16px; 
}


4. Inclusion de CSS :


  • Les styles CSS peuvent être inclus dans une page HTML de différentes manières : inline, interne ou externe.
  • L'inclusion externe est généralement préférée car elle permet de séparer la structure HTML du style CSS, ce qui rend le code plus facile à maintenir.
  • Exemple :


<!-- Inclusion externe --> 
<link rel="stylesheet" type="text/css" href="styles.css">


Conseils d'utilisation :


  • Utilisez les sélecteurs CSS de manière appropriée pour cibler précisément les éléments que vous souhaitez styler.
  • Organisez votre CSS de manière logique et commentez-le pour faciliter la maintenance.
  • Testez vos styles sur différents navigateurs pour vous assurer qu'ils s'affichent correctement.


Conclusion :


CSS est un outil puissant pour contrôler l'apparence des éléments HTML sur une page web. En utilisant les sélecteurs, les propriétés et les valeurs CSS de manière appropriée, vous pouvez créer des designs visuellement attrayants et des mises en page élégantes pour vos sites web. Avec une compréhension de base de CSS, vous pouvez personnaliser facilement l'apparence de vos pages HTML.

113 vues
Posté le 01 mars 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
3 181 vues
Définir l'encodage de caractères avec <meta charset="utf-8">
Définir l'encodage de caractères avec <meta charset="utf-8">L'encodage de caractères définit la correspondance entre les caractères et les valeurs binaires utilisées par l'ordinateur....
HTML
1 790 vues
Charger automatiquement les messages
Après avoir amélioré l'envoi de nos messages nous allons également améliorer le système de recharge automatique pour l’affichage de nouveau message.
Créer son site de rencontres
1 222 vues
Personnaliser ses conversations
Dans cette dernière vidéo nous allons personnaliser notre messagerie ! 😎Pour cela nous allons donner l’aspect des conversations comme une messagerie de smartphone type Apple ou Samsung.Nous...
Créer son site de rencontres
3 585 vues
Afficher un topic
Afficher un topic de notre forumDans notre dossier f_forum, nous allons créer une nouvelle page topic.php. Cette page affichera le topique créé par un de vos utilisateur.Nous allons...
Créer son site
1 563 vues
Envoyer un message sans recharger la page (2/2)
Comme nous avons mis en place notre système en JavaScript / Ajax pour envoyer un message sans recharger notre page en cours nous allons maintenant enregistrer le message + afficher ce dernier dans...
Créer son site de rencontres
3 535 vues
Notre base de données
Avant de commencer notre cours pour créer notre système d'amis, nous allons commencer par créer notre table de relation.Pour cela nous avons besoin d'un demandeur et d'un receveur.Le demandeur est...
Créer son site
3 365 vues
Créer un topic
Créer un topicDans notre dossier **f_forum**, nous allons créer une nouvelle page creer_topic.php. Cette page permettra à vos utilisateurs de pouvoir créer un topic afin de demande de l'aide,...
Créer son site
2 827 vues
Twitter Cards
Les Twitter Cards sont des protocoles qui vous permettent d’attacher des photos, des vidéos et autres médias interactifs à vos tweets afin d’amener...
Créer son site
Publicité
Cette pub permet au site de vivre ...