Qu'est-ce que le CSS ?
Le CSS (Cascading Style Sheets) est un langage de style utilisé pour décrire la présentation d'un document écrit en HTML. Il te permet de définir la couleur, la police, la taille et l'espacement du texte, les couleurs de fond, les bordures, les marges, le positionnement des éléments, les effets visuels, et bien plus encore. En gros, c'est la touche magique qui transforme un document HTML en quelque chose de visuellement attrayant ! ✨
Comment ajouter du CSS à une page HTML ?
Il existe trois façons d'ajouter du CSS à une page HTML :
- CSS interne : Le CSS est écrit dans la balise <style> du document HTML.
Exemple :
2. CSS externe : Le CSS est écrit dans un fichier séparé avec l'extension .css et est lié au document HTML via la balise <link>. Exemple :
Le fichier styles.css contient le CSS :
3. CSS en ligne : Le CSS peut être écrit directement dans l'attribut style des balises HTML. Exemple :
Pour notre projet, nous allons utiliser la méthode CSS externe. 💪 Comme nous l'avons vu dans le premier chapitre, nous allons suivre la structure suivante :
Nous allons donc créer un fichier style.css dans le dossier css et y ajouter notre CSS. Puis dans notre fichier index.html, nous allons ajouter le lien vers notre fichier CSS en ajoutant la balise <link> dans la balise <head>.
Eh ! mais c'est quoi cette balise <link> ? 🤨 La balise <link> est utilisée pour lier un document externe à la page HTML actuelle. Elle est généralement utilisée pour lier des fichiers CSS, des fichiers de police, des fichiers de favicon, etc. Elle contient :
- rel : Décrit la relation entre le document actuel et le document externe, ici stylesheet pour un fichier CSS.
- type : Décrit le type de document externe, ici text/css pour un fichier CSS.
- href : Définit l'URL du document externe, c'est ici que l'on indique le chemin vers notre fichier CSS.
Les sélecteurs CSS
Les sélecteurs CSS sont utilisés pour cibler les éléments HTML auxquels tu souhaites appliquer des styles. Voici quelques exemples de sélecteurs CSS couramment utilisés :
- Sélecteur d'élément : Cible tous les éléments HTML du type spécifié.
Exemple :
2. Sélecteur de classe : Cible tous les éléments HTML ayant la classe spécifiée. Exemple :
Tu peux aussi combiner plusieurs classes :
3. Sélecteur d'identifiant : Cible l'élément HTML ayant l'identifiant spécifié. Exemple :
4. Sélecteur de descendant : Cible les éléments HTML qui sont des descendants directs d'un autre élément HTML. Exemple :
5. Sélecteur d'attribut : Cible les éléments HTML ayant un attribut spécifié. Exemple :
6. Sélecteur de pseudo-classe : Cible un état spécifique d'un élément HTML. Exemple :
Quelques pseudo-classes populaires : - :hover : Lorsque l'utilisateur survole l'élément. - :active : Lorsque l'utilisateur clique sur l'élément. - :focus : Lorsque l'élément a le focus (par exemple, un champ de saisie de texte). - :first-child : Lorsque l'élément est le premier enfant de son parent. Pour plus d'infos, explore la documentation CSS. 📚
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer
Styliser notre page web
Améliorons la page que tu as créée en ajoutant du CSS pour la rendre encore plus jolie (on va essayer du moins ! 😄). Voici les étapes à suivre :
- Quel genre de couleur je veux pour mon site ? (couleur de fond, couleur de texte, couleur des liens...)
- Quelle mise en page je veux pour mon site ? (centré, à gauche, à droite...)
- Quelle taille de police je veux pour mon site ? Pour notre exemple, je propose un style inspiré de Discord (c'est juste un exemple, tu peux ajouter les couleurs que tu préfères). Personnellement, j'aimerais que les informations de mon profil soient centrées et que le fond de ma page soit gris foncé. Pour cela, nous allons ajouter le CSS suivant à notre fichier style.css :
Maintenant, notre page est en gris foncé avec du texte blanc. C'est un bon début ! Maintenant, centrons les informations de notre profil. Pour cela, nous allons ajouter une classe container :
Pourquoi ne pas ajouter une touche finale ?
Pour donner encore plus de peps, ajoutons un peu de padding sur la page :
C'est quoi la différence entre margin et padding ? 🤔
- margin : Crée de l'espace entre les éléments HTML et les éléments voisins. Utilisé pour espacer les éléments les uns des autres.
- padding : Crée de l'espace à l'intérieur des éléments HTML. Utilisé pour espacer le texte de la bordure de l'élément.
Styliser les différentes sections
Maintenant que nous avons défini le style de base de la page, nous pouvons commencer à styliser les différentes sections de notre profil. Commençons par le titre :
Ici, nous centrons le titre, lui donnons une taille de police de 32 pixels et ajoutons un peu d'espace en dessous. Passons ensuite à l'image :
Nous centrons l'image avec display: block et margin: 0 auto, lui donnons une largeur maximale de 200 pixels et une hauteur automatique pour conserver les proportions, et appliquons un arrondi de 50% pour obtenir une forme ronde. Maintenant, les paragraphes :
Nous augmentons un peu l'espacement entre les lignes avec line-height: 1.5 et ajoutons un peu d'espace en dessous de chaque paragraphe. Enfin, la liste à puces :
Ici, nous supprimons les puces par défaut avec list-style-type: none et retirons le padding par défaut à gauche. Nous ajoutons également un peu d'espace en dessous de la liste et entre chaque élément de la liste.
Styliser les liens
Maintenant, occupons-nous des liens :
Nous définissons la couleur des liens en bleu (#7289da) et supprimons le soulignement par défaut. Puis, nous ajoutons un soulignement lorsque l'utilisateur survole le lien avec le pseudo-élément :hover. Voilà ! Ta page web est stylée. 🎨 N'hésite pas à jouer avec les différentes propriétés CSS pour la personnaliser davantage. Dans les prochains chapitre on va voir les Flexbox avec display: flex; 👍
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer
Passer au chapitre suivant :