Bases du CSS et Sélecteurs

Introduction

Bienvenue dans le monde du CSS!

Dans ce laboratoire (lab), nous allons prendre les places d'Alex, un jeune développeur web chargé de créer un site web attrayant et élégant pour un nouveau service pour animaux de compagnie. L'objectif est de présenter les services proposés, de présenter l'équipe et de fournir un moyen simple pour les clients potentiels de prendre contact. L'histoire se déroule dans une ville animée où la propriété d'animaux de compagnie est en hausse et la demande de services de soins de qualité pour animaux de compagnie explose. La mission d'Alex est de concevoir un site web qui se démarque sur ce marché concurrentiel en utilisant les techniques et sélecteurs CSS de base pour créer une expérience visuellement attrayante et conviviale.

Ensuite, nous allons passer par 5 laboratoires (labs) pour terminer le CSS pour "Pet's House".

Sélecteurs CSS

Nous ouvrons une page web, appuyons sur F12 au clavier pour ouvrir les outils de développement. Nous pouvons voir deux parties : "Elements" et "Styles".

Si vous avez étudié le HTML, vous devriez savoir que les éléments sont les différentes balises HTML utilisées pour la mise en page de la page, tandis que les styles sont le CSS de la page.

Nous pouvons utiliser le CSS pour changer la couleur, la taille, la forme, etc. des éléments HTML, ainsi que pour les animer.

Maintenant que nous connaissons l'utilité du CSS, nous devons nous poser une question : sur une page avec tant d'éléments, comment ajouter un style spécifique à un emplacement précis d'un élément?

Nous pouvons utiliser les sélecteurs CSS pour sélectionner les éléments que nous souhaitons styliser, puis utiliser les propriétés CSS pour spécifier le style que nous voulons appliquer.

Commençons par le sélecteur CSS le plus basique.

Un sélecteur CSS est la première partie d'une règle CSS. C'est un modèle d'éléments et d'autres termes qui indique au navigateur quels éléments HTML doivent être sélectionnés pour que les valeurs de propriétés CSS à l'intérieur de la règle leur soient appliquées. L'élément ou les éléments sélectionnés par le sélecteur sont appelés le sujet du sélecteur.

Il existe de nombreux types de sélecteurs CSS, et les plus basiques sont :

• Sélecteurs de type
• Sélecteurs de classe
• Sélecteurs d'ID
• Sélecteur de descendants
• Sélecteur universel

Sélecteurs de type

Si vous avez besoin de définir un style uniforme pour un certain type de balise sur une page, vous devriez utiliser un sélecteur de balise, où le mot-clé du sélecteur de balise porte le nom de la balise.

Par exemple, si vous voulez définir la couleur de police de toutes les balises <p> sur une page en rouge, vous utiliseriez la règle CSS suivante :

Sélecteurs de classe

Lorsque vous définissez un sélecteur de classe, vous devez le définir avec un point et un nom de classe. Lorsque vous utilisez ce sélecteur de classe, vous devez ajouter l'attribut class="nom-de-classe" (sans le point) à la balise de l'élément qui utilise ce sélecteur de classe pour indiquer que la balise utilise le sélecteur de classe spécifié.

Par exemple, si vous voulez définir la taille de police d'un élément HTML avec class="text-paragraph" à 50 pixels, vous utiliseriez la règle CSS suivante :

Sélecteurs d'ID

Le sélecteur d'ID spécifie un style particulier pour les éléments HTML marqués avec un ID particulier.

Lorsque vous définissez un sélecteur d'ID, vous devez le définir avec un signe "#" et un nom d'ID. Lorsque vous utilisez le sélecteur d'ID, vous devez ajouter l'attribut id="nom-d-id" (sans le signe "#") à l'élément de balise HTML pour spécifier l'ID de cet élément HTML, qui est unique dans le document HTML.

Par exemple, si vous voulez définir la couleur de police d'un élément HTML avec id="list-option" en bleu, vous utiliseriez la règle CSS suivante :

Sélecteur de descendants

Le sélecteur de descendants sélectionne tous les éléments d'une balise à l'intérieur d'une autre balise, y compris les enfants et les autres descendants.

Lorsque vous utilisez des sélecteurs de descendants, le nom de la balise parente et le nom de la balise descendante doivent être séparés par un espace pour identifier les éléments descendants à l'intérieur d'une balise.

Par exemple, nous définissons la couleur de texte en aqua pour <span>, un enfant de l'élément <div>.

Sélecteur universel

Le sélecteur universel sélectionne tous les éléments dans un document HTML. Lorsque vous utilisez des sélecteurs universels, vous devez utiliser un signe "*".

Par exemple, définissons la taille de texte à 50 pixels pour tous les éléments.

Maintenant que nous savons comment utiliser les sélecteurs, apprenons à utiliser différentes propriétés de style.

Couleur de fond et couleur de texte

Comme vous pouvez le voir, différentes parties de la page ont des couleurs de fond différentes. En CSS, vous pouvez définir la couleur de fond d'un élément en utilisant background-color.

Sur le site web pour animaux de compagnie, les couleurs de fond dans l'en-tête (header), la section "À propos" (about section), la section de contact (contact section) et le pied de page (footer) sont rgb(233, 174, 87) et rgb(239, 206, 157), et la couleur de police dans la section "À propos", la section de contact et le pied de page est #fff. Nous devons donc définir les couleurs de fond et de police ci-dessous.

• background-color est utilisé pour définir la couleur de fond.
• color est utilisé pour définir la couleur de police.

header {
  background-color: rgb(233, 174, 87);
}
.story-sect {
  background-color: rgb(233, 174, 87);
  color: #fff;
}
.contact-section {
  background-color: rgb(233, 174, 87);
  color: #fff;
}
footer {
  color: #fff;
  background-color: rgb(239, 206, 157);
}

Hauteur et largeur

Maintenant, vous pouvez constater que certains éléments sont trop grands, comme le logo. Nous utilisons height pour définir la hauteur d'un élément et width pour définir sa largeur.

.logo-section {
  width: 10%;
}
.logo {
  max-width: 60%;
}

.box-feature {
  width: 60%;
  max-height: auto;
}

.box-feature img {
  width: 100%;
}
.service {
  width: 100%;
  color: black;
}
.service img {
  max-width: 100%;
  max-height: auto;
}

La propriété CSS max-width définit la largeur maximale d'un élément. Elle empêche la valeur utilisée de la propriété width de devenir supérieure à la valeur spécifiée par max-width.

La propriété CSS max-height définit la hauteur maximale d'un élément. Elle empêche la valeur utilisée de la propriété height de devenir supérieure à la valeur spécifiée pour max-height.

Style de liste

Le style par défaut d'une liste non ordonnée est que chaque élément de liste est précédé d'un point. Nous utilisons la propriété list-style pour supprimer ce point avant chaque élément de liste.

ul {
  list-style: none;
}

Propriété de texte

Décoration de texte

L'élément a est souligné par défaut. Nous utilisons la propriété text-decoration pour supprimer le soulignement.

a {
  color: grey;
  text-decoration: none;
}

Transformation de texte

La barre de navigation (nav), le pied de page (footer) et le titre de chaque section sur une page pour animaux de compagnie sont tous en majuscules. Nous utilisons la propriété text-transform pour modifier la casse du texte.

La propriété CSS text-transform spécifie comment mettre en majuscules ou en minuscules le texte d'un élément. Elle peut être utilisée pour afficher le texte entièrement en majuscules, entièrement en minuscules ou avec chaque mot commençant par une majuscule.

h2 {
  text-transform: uppercase;
}
header {
  background-color: rgb(233, 174, 87);
  text-transform: uppercase;
}
footer {
  color: #fff;
  background-color: rgb(239, 206, 157);
  text-transform: uppercase;
}

Taille de texte

Nous utilisons font-size pour modifier la taille du texte. Comme vous pouvez le voir, la taille du texte est différente de celle de la page pour animaux de compagnie.

body {
  font-size: 1.2vw;
}
h1 {
  font-size: 4em;
}
h2 {
  font-size: 2.8vw;
  text-transform: uppercase;
}

Lorsque nous définissons la taille de police, nous utilisons différentes unités. Il existe généralement cinq types d'unités, comme suit :

Alignement de texte

Sur la page pour animaux de compagnie, pour centrer le texte du titre, nous pouvons utiliser la propriété text-align pour définir la position d'affichage du texte.

h1 {
  text-align: center;
  font-size: 4em;
}
section h2 {
  text-align: center;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
}
.section-text h2 {
  text-align: center;
}
.samples {
  text-align: center;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
}
footer span {
  text-align: center;
}

Poids de texte

La propriété font-weight est utilisée pour définir le poids du texte.

body {
  font-weight: 400;
  font-size: 1.2vw;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
}

Espacement entre les caractères

Sur la page pour animaux de compagnie, nous pouvons observer qu'il y a un certain espace entre les caractères. En utilisant la propriété letter-spacing, nous pouvons définir l'espacement entre les caractères du texte.

La propriété CSS letter-spacing définit le comportement d'espacement horizontal entre les caractères du texte. Cette valeur est ajoutée à l'espacement naturel entre les caractères lors du rendu du texte.

body {
  letter-spacing: 2px;
  font-weight: 400;
  font-size: 1.2vw;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
}

Résumé

Dans ce laboratoire (lab), vous avez entrepris le voyage de création d'un site web pour "Pet's House" avec Alex. Vous avez configuré l'espace de travail du projet, appliqué des styles CSS de base et expérimenté avec divers sélecteurs CSS pour améliorer la navigation du site web. Grâce à ces étapes, vous avez acquis une expérience pratique des bases du CSS et des sélecteurs, des compétences essentielles pour tout développeur web en herbe. Ce laboratoire a jeté les bases pour des concepts et des techniques de développement web plus avancés que vous explorerez dans de futurs projets.