Geekflare est soutenu par son public. Nous pouvons percevoir des commissions d'affiliation sur les liens d'achat présents sur ce site.
En Développement Dernière mise à jour : 25 septembre 2023
Partager sur :
Invicti Web Application Security Scanner - la seule solution qui offre une vérification automatique des vulnérabilités avec Proof-Based Scanning™.

Les sites web seraient ennuyeux sans CSS, car ce langage de style est responsable du style, de la taille, de la couleur et du positionnement du texte sur une page web.

Qu'est-ce que le CSS ?

Les feuilles de style en cascade, abrégées en CSS, sont un langage qui décrit la manière dont les éléments HTML doivent être affichés sur un écran ou sur du papier. Le CSS a été créé par le Consortium World Wide Web (W3C) en 1996.

YouTube vidéo

Les éléments HTML n'étaient pas conçus pour avoir des balises qui pouvaient aider à formater une page web, et les développeurs devaient seulement écrire un balisage pour la page. L'introduction de balises telles que lors du lancement de HTML 3.2 a posé de nouveaux problèmes aux développeurs.

Comme les pages web ont des arrière-plans colorés, des polices différentes et des styles multiples, la réécriture du code est devenue coûteuse et pénible. Les écoles du W3C ont introduit le CSS pour résoudre ces problèmes, et il a continué à évoluer au fil des ans.

Pourquoi CSS ?

#1. CSS est efficace

CSS nous évite d'avoir à ajouter des balises telles que la police, l'alignement des éléments, la bordure, la couleur, le style d'arrière-plan et la taille sur chaque page web.

#2. Gagner du temps

Vous pouvez facilement modifier l'apparence de l'ensemble du site web en modifiant le fichier CSS externe.

#3. Compatibilité avec plusieurs appareils

Les internautes modernes accèdent aux sites sur des gadgets dont la taille d'écran varie, tels que les PC, les tablettes et les smartphones. Les feuilles de style CSS facilitent la création de pages web adaptées à la taille des écrans.

#4. Applications faciles à maintenir

Les applications web modernes sont en constante évolution. Les feuilles de style CSS permettent de modifier facilement des composants individuels ou même l'ensemble du site web sans modifier la base de code.

Comment les feuilles de style CSS sont-elles utilisées avec le langage HTML pour créer des sites web ?

HTML est un langage de balisage standard utilisé pour la création de pages web. En revanche, CSS décrit la manière dont les pages web (créées à l'aide de HTML) sont affichées. Une page web créée à l'aide de HTML et de CSS comportera idéalement un fichier HTML contenant du texte, des liens vers des images et des balises HTML.

Ce fichier HTML peut être lié à un fichier CSS distinct à l'aide d'une balise de lien ou utiliser des styles CSS internes ou en ligne. Un fichier HTML peut comporter un titre tel que <h1> et un paragraphe désigné par <p>. Vous pouvez utiliser les feuilles de style CSS pour demander au navigateur d'afficher tout le contenu du paragraphe en gras ou même de faire en sorte que le contenu de l'en-tête soit de 50 pixels et de couleur verte.

Nous verrons comment HTML et CSS fonctionnent dans la section suivante.

Types de CSS

#1. CSS externe

Pour qu'une feuille de style CSS soit considérée comme externe, il doit y avoir un fichier HTML et un fichier CSS distinct portant l'extension .css. Par exemple, style.css. Le fichier CSS est lié au fichier/document HTML à l'aide d'une balise de lien.

Exemple de fichier CSS externe :

.main {

 text-align:center ; 

}

.GF {

 color:red ;

 font-size:50px ;

 font-weight:bold ;

}

#TP {

 color:blueviolet

 font-style:bold ;

 font-size:20px ;

}

Le fichier CSS peut être lié au document HTML suivant :

<!DOCTYPE html>

<html>

 <head>

 <link rel="stylesheet" href="style.css"/>

 </head>

 <body>

 <div class = "main">

 <div class ="GF">Geekflare ! !! ! ! </div>

 <div id = "TP">

 Votre portail technologique préféré

 </div>

 </div>

 </corps>

</html&gt>

La balise lien relie la feuille de style externe au document HTML, tandis que l'attribut href spécifie l'emplacement de la feuille de style externe.

La page web finale se présentera comme suit :

sortie-Geekflare

La feuille de style externe est l'approche la plus recommandée, car elle permet de créer facilement des composants réutilisables et d'apporter des modifications universelles à la base de code.

#2. CSS interne

Le CSS interne est idéal lorsque vous avez un seul document HTML que vous souhaitez styliser de manière unique. Le jeu de règles de style est écrit sur le document HTML dans la section head.

Voici un exemple de CSS interne :

<!DOCTYPE html>

<html>

 <head>

 <title>Exemple de CSS interne</title>

 <style>

.main {

 text-align:center ; 

 }

           .GF {

 color:Red ;

 font-size:70px ;

 }

           .custom {

 font-style:bold ;

 font-size :20px ;

 }

 </style>

 </head>

 <body>

 <div class = "main">

 <div class = "GF">Démonstration CSS interne</div>

 <div class = "custom">

 Les résultats

 </div>

 </div>

 </body>

</html&gt>

La page web rendue apparaîtra comme suit :

sortie

Le CSS interne n'est pas idéal dans la plupart des cas, car il alourdit le code d'un document HTML, ce qui affecte la vitesse de chargement.

#3. CSS en ligne

La feuille de style CSS en ligne contient le style CSS dans le corps de la page. Par exemple, vous pouvez modifier le style d'un paragraphe, d'un titre ou même d'une division à l'aide d'une feuille de style CSS en ligne.



<html>

 <head>

 <title>CSS en ligne</title>

 </head>

 <body>

 <p style = "color:red ; font-size:50px ; font-style:bold ; text-align:center ;">

 Démonstration CSS en ligne

 </p>

 </body>

</html&gt>

Le document rendu se présentera comme suit :

en ligne-1-1

Le CSS en ligne n'est pas idéal si vous souhaitez faire évoluer votre application web, car l'ajout d'une propriété CSS à chaque balise HTML prend du temps.

Découvrez quelques-uns des meilleurs cours et livres en ligne pour maîtriser CSS.

Construire des sites web réactifs

Ce cours sur la création de sites Web réactifs vous apprend à créer des sites Web réactifs à l'aide de HTML5 et de CSS3. Vous n'avez pas besoin de connaissances préalables en développement web pour apprendre ce cours qui explore des concepts tels que le modèle de boîte, la résolution des conflits de sélecteurs, les schémas de positionnement et l'héritage.

Créer des sites web réactifs avec HTML et CSS

C'est également le cours idéal si vous souhaitez apprendre à réfléchir, planifier, dessiner, coder, tester et optimiser un site web professionnel.

CSS et Sass avancés

Le cours CSS avancé et Sass vous présente la manière dont CSS fonctionne en coulisses en explorant des sujets tels que la cascade, la spécificité et l'héritage.

CSS et Sass avancés

Le cours présente de nombreuses techniques CSS modernes pour créer des pages web puissantes et réactives. Le cours présente Saas et la manière de l'utiliser dans des projets tout en architecturant les CSS, les variables globales et en gérant les media queries.

C'est également le cours idéal si vous souhaitez apprendre l'animation CSS, car il aborde les @keyframes, l'animation et la transition.

Apprendre le CSS

Apprendre-CSS-1

Apprendre le CSS de Codecademy enseigne comment utiliser CSS pour transformer HTML en sites web visuellement attrayants. Le cours est divisé en 8 leçons et comporte 6 projets pour tester votre compréhension.

Les principales choses que vous apprendrez dans ce cours sont comment ajouter un style aux éléments HTML, connecter les fichiers HTML et CSS, et créer des mises en page uniques pour les pages Web.

Créez votre première page Web

YouTube vidéo

Le cours "Construisez votre première page web "Vous apprendrez à utiliser HTML5 et CSS3 pour créer des sites web réactifs. Ce cours gratuit est présenté en 4 modules et nécessite environ 10 heures de travail. Vous n'avez pas besoin de connaissances préalables en programmation pour apprendre ce cours.

Notions de base sur les CSS

CSS-Basics

Les bases du CSS est créé par le W3Cx. Vous apprendrez notamment dans ce cours les meilleures pratiques en matière de conception Web, les sélecteurs CSS fondamentaux et la manière de sélectionner les propriétés CSS. Le cours est divisé en 5 modules ; vous aurez besoin d'environ 5 semaines pour le terminer en étudiant 5 à 7 heures par semaine.

Introduction à CSS3

Introduction au langage CSS

Ce cours sur le CSS3 présente les feuilles de style en cascade. Le cours est préparé par l'Université du Michigan et enseigne comment écrire des règles CSS, établir de bonnes habitudes de programmation et tester le code. Vous avez besoin d'environ 12 heures pour terminer ce cours qui est accompagné d'un certificat partageable.

Introduction à HTML et CSS

Introduction à HTML et CSS

Ce cours d'introduction à HTML et CSS enseigne comment créer des sites web stylisés et bien structurés à l'aide de HTML et CSS. Le cours enseigne aux apprenants comment créer des sites Web en utilisant une structure arborescente et ensuite les styliser à l'aide de CSS.

Ce cours gratuit est adapté aux débutants et utilise un modèle d'apprentissage à son rythme. Il vous faudra environ 3 semaines pour terminer ce cours enseigné par des experts du secteur.

Tutoriel CSS

Tutoriel CSS est un cours gratuit sur W3schools. Le cours est divisé en chapitres pour faciliter la compréhension. Chaque chapitre donne des exemples et des exercices. La plateforme dispose d'un espace en ligne où vous pouvez expérimenter différents concepts grâce au bouton"Essayez vous-même“.

CSS : Le guide définitif

Le livre CSS : Le livre CSS : The Definitive Guide est utile si vous voulez apprendre les bases de CSS, des sélecteurs à la spécificité, en passant par la cascade. Le livre aborde également en détail les astuces de flexbox, de positionnement et de flottement.

C'est aussi le livre à commander si vous voulez apprendre à utiliser CSS pour produire des transformations, des transitions et des animations en 2D et en 3D. Le guide définitif est disponible en version Kindle et en livre de poche.

Conception Web réactive avec CSS

Ce livre sur le Responsive Web Design with HTML5 and CSS enseigne comment créer des sites web réactifs à l'épreuve du temps à l'aide de HTML5 et de CSS.

Après avoir appris les astuces de ce livre, les sites Web que vous créez fonctionneront parfaitement sur les ordinateurs de bureau, les tablettes et les téléphones mobiles. Le livre est écrit dans un format facile à suivre et est disponible en format broché et Kindle.

HTML et CSS

Ce livre sur HTML et CSS est idéal pour tous, que vous soyez un amateur, un étudiant ou un professionnel.

L'auteur présente le contenu de ce livre à l'aide de graphiques d'information et de photographies de style de vie afin de faciliter la compréhension des différents concepts. La ressource est présentée dans une structure unique, ce qui permet de parcourir facilement tous les chapitres.

CSS moderne

Ce livre sur les CSS modernes : Maîtriser les concepts clés du CSS pour le développement Web moderne enseigne le CSS à l'aide d'exemples de code, de diagrammes et de captures d'écran.

Le livre présente les couleurs, les sélecteurs, les modèles de boîtes, les combinateurs et la spécificité dans ses premiers chapitres. Il présente ensuite le style du texte, le positionnement, les dégradés, les bordures, l'indice Z et les contextes d'empilement. Vous apprendrez également des sujets avancés tels que les transitions, les animations, les transformations, la flexbox et les grilles CSS.

Le mot de la fin

On ne soulignera jamais assez le rôle des feuilles de style CSS dans les sites web modernes. En plus de rendre les pages web visuellement attrayantes, les CSS facilitent la navigation sur les différentes pages web.

Apprendre les feuilles de style CSS peut être facile si vous utilisez les ressources énumérées ci-dessus. Certains de ces cours sont gratuits, d'autres payants.

Ensuite, vous pouvez consulter les feuilles de calcul CSS pour les développeurs et les concepteurs.

  • Titus Kamunya
    Auteur
Merci à nos sponsors
D'autres lectures intéressantes sur le développement
Alimentez votre entreprise
Quelques outils et services pour aider votre entreprise à se développer.
  • Invicti utilise le Proof-Based Scanning™ pour vérifier automatiquement les vulnérabilités identifiées et générer des résultats exploitables en quelques heures seulement.
    Essayez Invicti
  • Web scraping, proxy résidentiel, proxy manager, web unlocker, search engine crawler, et tout ce dont vous avez besoin pour collecter des données web.
    Essayez Brightdata
  • Monday.com est un système d'exploitation tout-en-un qui vous aide à gérer vos projets, vos tâches, votre travail, vos ventes, votre CRM, vos opérations, vos flux de travail et bien plus encore.
    Essayez le lundi
  • Intruder est un scanner de vulnérabilité en ligne qui détecte les faiblesses de votre infrastructure en matière de cybersécurité, afin d'éviter des violations de données coûteuses.
    Essayer l'intrus