L'acronyme CSS signifie "feuilles de style en cascade". CSS est utilisé pour styliser les sites Web et les applications utilisées sur tous les appareils. La feuille de style est couramment utilisée avec HTML et un langage de programmation frontal tel que JavaScript.

CSS peut être implémenté de l'une des trois manières suivantes: en ligne, en interne ou en externe. Bien que le CSS externe soit l'approche recommandée, il existe des cas où les deux méthodes de mise en œuvre restantes pourraient être plus pratiques.

Dans cet article de tutoriel, vous apprendrez toutes les bases du CSS pour commencer à créer des applications dès aujourd'hui.

Quand utiliser les différentes méthodes d'implémentation CSS

Inline CSS est la méthode de mise en œuvre idéale lorsque l'intention est de n'inclure qu'une ou deux préférences de style sur une page Web, ainsi que quelques autres cas de niche. La méthode CSS en ligne utilise le style mot-clé avec une propriété CSS pour obtenir un résultat spécifique.

Si vous avez l'intention de changer la couleur d'un seul en-tête en rouge, le CSS en ligne peut être une bonne option. Un cas de niche, comme mentionné ci-dessus, serait lors de la création de mises en page HTML composées principalement de tableaux (une pratique obsolète).

Utilisation de l'exemple CSS en ligne

Titre principal

La ligne de code ci-dessus affichera le texte « En-tête principal » enduit de couleur rouge. C'est probablement l'une des seules raisons pratiques d'utiliser du CSS en ligne car il n'y en a généralement qu'un h1 élément sur une page Web donnée.

Si vous avez l'intention de tout enduire h2 éléments sur une page Web avec la couleur jaune. Vous devrez utiliser le CSS style mot-clé, avec le Couleur propriété et sa valeur (jaune) sur chaque élément. Cependant, un moyen plus efficace d'accomplir cette tâche consiste à utiliser le CSS interne.

Utilisation de l'exemple CSS interne

Placer le code ci-dessus dans le balise de votre fichier HTML garantira que tous les h2 les éléments de ce fichier sont revêtus de jaune. Le CSS interne est séparé du code HTML, ce qui rend la méthode plus efficace car elle facilite le ciblage des différents groupes d'éléments.

Alors pourquoi la méthode d'implémentation CSS externe reste-t-elle l'approche la plus recommandée? Séparation des préoccupations. Avec le CSS externe, votre code CSS est complètement séparé de votre code HTML, ce qui garantit l'évolutivité des grands projets et rend le processus de test plus efficace.

Utilisation d'un exemple CSS externe

Insérer la ligne de code ci-dessus dans le balise de votre fichier HTML facilitera le style de votre page Web en utilisant la méthode CSS externe. Le seul aspect du code ci-dessus qui changera est la valeur attribuée au href propriété, qui doit toujours être le nom du fichier CSS (y compris l'extension .css).

En rapport: Que sont les feuilles de style en cascade et à quoi sert CSS ? Avec votre fichier CSS lié à votre document HTML, vous pouvez maintenant commencer à écrire du code CSS dans votre fichier CSS. À ce stade, la seule différence entre l'exemple CSS interne ci-dessus et le CSS externe est le style étiqueter. Par conséquent, l'insertion du code suivant dans un fichier CSS produira le même résultat que l'exemple CSS interne ci-dessus.

h2{
Couleur jaune;
}

Explorer la structure de base CSS

La déclaration CSS de base contient sept éléments essentiels, comme vous pouvez le voir dans l'exemple ci-dessous. Ils travaillent tous ensemble pour atteindre un ensemble spécifique de préférences de style.

Le sélecteur

Dans une déclaration CSS, un sélecteur peut être soit un identifiant, une classer, un élément ou, dans certains cas particuliers, un pseudo-sélecteur. Dans la structure CSS au-dessus du une L'élément est utilisé comme sélecteur, ce qui signifie que tous les liens d'une page Web seront recouverts de rouge. Essentiellement, le but du sélecteur est d'identifier le ou les éléments qui doivent être stylisés.

Début et fin de la déclaration

Le début et la fin de la déclaration sont importants car ils contiennent toutes les préférences de style qui s'appliquent à un sélecteur spécifique. Les deux éléments sont représentés par une paire d'accolades ouvertes et fermées. Un bon moyen de se rappeler d'utiliser un début ou une fin de déclaration est de se rappeler que si vous avez une accolade ouverte, il doit y avoir une accolade fermée correspondante, et vice versa.

La propriété

La propriété CSS dans une structure de déclaration peut être n'importe laquelle parmi plus d'une centaine de types de propriété différents. Le type de propriété utilisé dans la structure CSS ci-dessus est Couleur et cette propriété cible le texte sur une page Web. Si vous souhaitez en savoir plus, consultez notre liste complète des propriétés CSS et leur utilisation.

Le séparateur propriété/valeur

Bien qu'il puisse sembler petit et insignifiant, le séparateur propriété/valeur est tout aussi important que tous les autres éléments de la structure CSS. S'il y a un cas où cet élément est oublié, la déclaration CSS entière ne s'exécutera pas.

La valeur

La valeur de la propriété CSS représente le style exact que vous souhaitez appliquer à une propriété donnée. Les valeurs pouvant être utilisées dépendent du type de propriété. Par exemple, la propriété utilisée dans la structure ci-dessus est Couleur, ce qui signifie qu'il n'y a qu'un seul type de valeur qui peut être appliqué à cette propriété, un nom de couleur. UNE Couleur La valeur peut être présentée sous l'une des quatre formes suivantes: une valeur de mot (comme dans l'exemple ci-dessus), une valeur hexadécimale, une valeur HSL (Teinte, Saturation, Luminosité) ou une valeur RVB (Rouge, Vert, Bleu).

Le séparateur de déclaration

Le séparateur de déclaration indique que vous êtes à la fin d'une déclaration de style spécifique. Dans la structure ci-dessus, il n'y a qu'un seul séparateur de déclaration, mais il peut y en avoir plus. Tout dépend du nombre de propriétés CSS que vous avez l'intention d'utiliser sur un classer, identifiant, ou élément.

Que sont les identifiants et les classes ?

identifiants et Des classes jouent un rôle fondamental dans le processus de style CSS. Comme les éléments HTML, CSS identifiants et Des classes sont utilisés comme sélecteurs dans une déclaration CSS. Cependant, Des classes et identifiants ont préséance sur un élément HTML.

La règle générale en CSS est que la dernière déclaration de style que vous ajoutez à un fichier écrasera celles qui s'y trouvaient auparavant. Par conséquent, s'il y a deux déclarations avec un h2 selector dans un fichier CSS, la déclaration qui est ajoutée en dernier remplace celles qui étaient là avant.

Cependant, si ce h2 l'élément a un identifiant qui est utilisé comme sélecteur dans une déclaration CSS, quelle que soit sa position (avant ou après) dans une déclaration CSS qui a le h2 élément comme sélecteur, la préférence de style dans le identifiant déclaration aura toujours la priorité sur l'élément. Bref, un identifiant remplacera les autres sélecteurs de style.

Il est important de se rappeler que dans une déclaration CSS, identifiants commencez par un signe dièse et les cours commencent par un point. La différence la plus significative entre un identifiant et un classer est-ce un identifiant est unique, tandis qu'un classer peut être dupliqué. Par exemple, une collection de les balises peuvent recevoir la même classer Nom; Cependant, le identifiant de chaque la balise doit être unique.

Explorer les différents types de sélecteurs

Il existe trois types de sélecteurs de base: simple, multiple et imbriqué. Jusqu'à présent, cet article a largement couvert les sélecteurs uniques.

Lorsque vous utilisez CSS, il y aura des cas où vous voudriez différents éléments à différentes positions sur un page Web pour avoir un style similaire qui est différent du style général appliqué à l'ensemble de la page Web. Dans ces cas, savoir utiliser plusieurs sélecteurs sera utile.

Exemple de modèle HTML de base

Bienvenue

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Empêcher odit voluptés
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecte
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos !







Sur

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Empêcher odit voluptés
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecte
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos !







Titre

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
empêcher fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni à iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
empêcher hic maxime? Eius modi optio ad, nisi tempora sapiente ?







Titre

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
empêcher fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni à iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
empêcher hic maxime? Eius modi optio ad, nisi tempora sapiente ?

Si vous regardez attentivement le fichier HTML ci-dessus, vous verrez la dynamique qui existe entre identifiants et Des classes. En référence au fichier ci-dessus, si vous souhaitez appliquer le même style au À propos section et les articles sur la page Web uniquement, le code CSS suivant accomplira cela.

Exemple d'utilisation de plusieurs sélecteurs

#À propos de, .contenu{
Couleur blanche;
couleur d'arrière-plan: cyan foncé ;
}

Lorsque vous utilisez plusieurs sélecteurs, vous devez toujours séparer chaque sélecteur par une virgule. L'exemple ci-dessus a deux sélecteurs, un identifiant et un classer. Si la virgule qui suit le À proposidentifiant est manquant, la déclaration CSS ne s'exécutera pas.

Pour en revenir à l'exemple de modèle HTML de base ci-dessus, il y a deux tags présents—un dans la section de bienvenue et l'autre dans la section à propos. Si votre objectif est de cibler un seul de ces tags, un sélecteur imbriqué devrait être votre méthode de prédilection.

Exemples d'utilisation de sélecteurs imbriqués

#Bienvenue p span{
La couleur rouge;
}

Le sélecteur imbriqué ci-dessus contient un identifiant et deux éléments HTML. Comme vous pouvez le voir dans l'exemple ci-dessus, un sélecteur imbriqué vous permet de cibler un élément spécifique au sein d'un groupe.

Par conséquent, seul le envergure rubrique dans le étiquette de la div avec le identifiant de bienvenue sera enduit de couleur rouge.

Que vous utilisiez un langage de style comme CSS ou un langage de programmation, vous devez absolument savoir rédiger un commentaire. Les commentaires sont essentiels dans les projets au niveau de l'entreprise où plusieurs développeurs travaillent ensemble, et ils sont également utiles lors du développement à petite échelle.

Un commentaire CSS contient deux barres obliques, deux astérisques et une section de commentaire.

/* Voici comment écrire un commentaire d'une seule ligne en CSS */

/*
C'est comme ça que tu écris
un commentaire sur plusieurs lignes
en CSS
*/

Et après?

Cet article vous fournit les composants fondamentaux de CSS. Vous pouvez maintenant utiliser un identifiant:

• L'une des trois méthodes d'implémentation CSS
• Tous les éléments d'une déclaration CSS
• Les trois types de sélecteurs de base
• Un commentaire CSS

Pourtant, ce n'est que le début. CSS a plusieurs frameworks qui vous aideront à développer une meilleure compréhension du langage. Le seul défi est de décider lequel vous convient le mieux.

Tailwind CSS vs. Bootstrap: quel est le meilleur framework ?

Lors du choix d'un framework CSS, il est important de trouver celui qui répond à vos besoins.

Lire la suite

A propos de l'auteur