Les sites Web auraient l'air 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 CSS ?
Les feuilles de style en cascade, abrégées en CSS, sont un langage qui décrit comment les éléments HTML doivent être affichés sur un écran ou un papier. CSS a été créé par World Wide Web Consortium (W3C) en 1996.
Les éléments HTML n'ont pas été conçus pour avoir des balises qui pourraient aider à formater une page Web, et les développeurs n'étaient tenus d'écrire qu'un balisage pour la page. L'introduction de balises comme lors du lancement de HTML 3.2 a introduit de nouveaux problèmes pour les développeurs.
Comme les pages Web ont des arrière-plans colorés, des polices différentes et de multiples styles, 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é d'évoluer au fil des ans.
Pourquoi CSS ?
# 1. CSS est efficace
CSS nous évite d'avoir à ajouter des balises telles que la police, les alignements d'éléments, la bordure, la couleur, le style d'arrière-plan et la taille sur chaque page Web.
# 2. Gagnez du temps
Vous pouvez facilement modifier l'apparence de l'ensemble du site Web en modifiant le fichier CSS externe.
# 3. Compatibilité de plusieurs appareils
Les internautes modernes accèdent aux sites sur des gadgets avec différentes tailles d'écran, tels que des PC, des tablettes et des smartphones. CSS facilite la création de pages Web adaptées aux tailles d'écran.
# 4. Applications faciles à maintenir
Les applications Web modernes évoluent constamment. CSS facilite la modification de composants individuels ou même de l'ensemble du site Web sans modifier la base de code.
Comment CSS est-il utilisé avec HTML pour créer des sites Web ?
HTML est un langage de balisage standard utilisé pour la création de pages Web. D'autre part, CSS décrit comment les pages Web (créées à l'aide de HTML) sont affichées. Une page Web créée à l'aide de HTML et CSS aura idéalement un fichier HTML de texte, des liens d'image et 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 avoir un titre tel que et un paragraphe noté par . Vous pouvez utiliser 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 1 pixels et de couleur verte.
Nous montrerons comment HTML et CSS fonctionnent dans la section suivante.
Types de CSS
# 1. CSS externe
Pour que le CSS soit classé comme externe, il doit y avoir un fichier HTML et un fichier CSS séparé avec une 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">
Your favourite tech portal
</div>
</div>
</body>
</html>La solution lien balise lie la feuille de style externe au document HTML, tandis que la href L'attribut spécifie l'emplacement de la feuille de style externe.
La page Web finale apparaîtra comme suit :
Le CSS externe est l'approche la plus recommandée car il facilite la création de composants réutilisables et apporte 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. L'ensemble de règles de style est écrit sur le document HTML dans la section d'en-tête.
Voici un exemple de CSS interne :
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</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">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>La page Web rendue apparaîtra comme suit :
Le CSS interne n'est pas idéal dans la plupart des cas car il rend le code d'un document HTML si volumineux, ce qui affecte la vitesse de chargement.
# 3. CSS en ligne
Le CSS en ligne contient le style CSS dans le corps. Par exemple, vous pouvez styliser un paragraphe, un titre ou même un div en utilisant le CSS en ligne.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:red; font-size:50px;
font-style:bold; text-align:center;">
Inline CSS Demonstration
</p>
</body>
</html>Le document rendu apparaîtra comme suit :
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.
Explorez certains des meilleurs cours et livres en ligne pour maîtriser le CSS.
Build Responsive Websites
Ce cours de création de sites Web réactifs du monde réel enseigne comment créer des sites Web réactifs à l'aide de HTML5 et CSS3. Vous n'avez besoin d'aucune connaissance préalable 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électeur, les schémas de positionnement et l'héritage.
C'est également le cours idéal si vous souhaitez apprendre à réfléchir, planifier, esquisser, coder, tester et optimiser un site Web professionnel.
Advanced CSS and Sass
Le cours avancé CSS et Sass vous présente le fonctionnement du CSS dans les coulisses en explorant des sujets tels que la cascade, la spécificité et l'héritage.
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 comment l'utiliser dans des projets tout en créant une architecture CSS, des variables globales et en gérant les requêtes multimédias.
C'est également le cours idéal si vous souhaitez apprendre l'animation CSS, car il touche aux @keyframes, à l'animation et à la transition.
Learn CSS
Apprendre le CSS par Codecademy enseigne comment utiliser CSS pour transformer visuellement HTML en sites Web accrocheurs. Le cours est divisé en 8 leçons et comporte 6 projets pour tester votre compréhension.
Les principales choses que vous apprendrez de ce cours sont comment ajouter un style aux éléments HTML, connecter des fichiers HTML et CSS et créer des mises en page uniques pour les pages Web.
Build Your First Web Page
La solution construire votre première page web Le cours enseigne comment 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 à compléter. Vous n'avez besoin d'aucune connaissance préalable en programmation pour apprendre ce cours.
CSS Basics
Bases CSS est créé par W3Cx. Certaines des choses que vous apprendrez dans ce cours sont; les meilleures pratiques en matière de conception Web, les sélecteurs CSS fondamentaux et la sélection des propriétés CSS. Le cours est divisé en 5 modules; vous avez besoin d'environ 5 semaines pour le terminer lorsque vous étudiez 5 à 7 heures par semaine.
Introduction to CSS3
Cette cours sur 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 à la fin.
Intro to HTML and CSS
Cette cours d'introduction à HTML et CSS enseigne comment créer des sites Web stylisés et bien structurés en utilisant HTML et CSS. Le cours enseigne aux apprenants comment créer des sites Web à l'aide d'une structure arborescente, puis les styliser à l'aide de CSS.
Ce cours gratuit convient aux débutants et utilise un modèle d'apprentissage à votre rythme. Vous avez besoin d'environ 3 semaines pour suivre ce cours enseigné par des experts de l'industrie.
CSS Tutorial
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 plate-forme dispose d'un espace en ligne où vous pouvez expérimenter différents concepts à travers le "Essayez vous-même"Bouton.
CSS: The Definitive Guide
Le livre CSS: The Definitive Guide est utile si vous souhaitez apprendre les bases du CSS, des sélecteurs et de la spécificité à la cascade. Le livre contient également des astuces de flexbox, de positionnement et de flotteur en détail.
| Aperçu | Produit | Rating | Prix | |
|---|---|---|---|---|
|
CSS : Le guide définitif : présentation visuelle pour le Web | $61.34 | Acheter sur Amazon |
C'est aussi le livre à commander si vous voulez apprendre à utiliser CSS pour produire des transformations, transitions et animations 2D et 3D. Le Guide définitif est disponible en versions Kindle et broché.
Responsive Web Design with CSS
Ce livre sur la conception Web réactive avec HTML5 et CSS enseigne comment créer des sites Web réactifs à l'épreuve du temps en utilisant HTML5 et CSS.
| Aperçu | Produit | Rating | Prix | |
|---|---|---|---|---|
|
Conception Web réactive avec HTML5 et CSS : créez des sites Web réactifs évolutifs en utilisant les dernières… | $40.49 | Acheter sur Amazon |
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 and CSS
Ce livre sur HTML et CSS est idéal pour tous, que vous soyez amateur, étudiant ou professionnel.
| Aperçu | Produit | Rating | Prix | |
|---|---|---|---|---|
|
HTML et CSS: conception et création de sites Web | $16.49 | Acheter sur Amazon |
L'écrivain livre le contenu de ce livre à travers des informations graphiques et un mode de vie photographie pour faciliter la compréhension de divers concepts. La ressource est présentée dans une structure unique, ce qui facilite la navigation dans tous les chapitres.
Modern CSS
Ce livre sur le CSS moderne : maîtriser les concepts clés du CSS pour le développement Web moderne enseigne le CSS à travers des exemples de code, des diagrammes et des captures d'écran.
| Aperçu | Produit | Rating | Prix | |
|---|---|---|---|---|
|
CSS moderne : maîtrisez les concepts clés du CSS pour le développement Web moderne | $37.99 | Acheter sur Amazon |
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. Le livre présente ensuite le style du texte, le positionnement, les dégradés, les bordures, l'index Z et les contextes d'empilement. Vous apprenez également des sujets avancés tels que les transitions, les animations, les transformations, les flexbox et les grilles CSS.
Mot de la fin
Le rôle du CSS dans les sites Web modernes ne peut pas être assez souligné. En plus de rendre les pages Web visuellement attrayantes, CSS facilite la navigation sur différentes pages Web.
Apprendre CSS peut être facile si vous utilisez les ressources répertoriées ci-dessus. Certains de ces cours sont gratuits, tandis que d'autres sont payants.
Ensuite, vous pouvez consulter Aide-mémoire CSS pour les développeurs et les concepteurs.
