Styliser avec css
Comprendre le CSS.
« En mode Design.«
Le CSS et HTML, les inséparables
Le CSS (Cascading Style Sheets) est le langage de style utilisé pour décrire la présentation d’un document HTML.
Il permet de contrôler la mise en forme et la disposition des éléments HTML sans changer le contenu lui-même.
Sans CSS, les pages web seraient largement textuelles et dépourvues de couleurs, et de mises en page complexes.
Cascading : Le terme « cascading » fait référence à la manière dont les règles de style sont appliquées.
Les styles sont appliqués selon une hiérarchie ou une « cascade », permettant ainsi aux styles définis par l’utilisateur de remplacer ceux par défaut du navigateur.
La syntaxe CSS
Avant de plonger dans les méthodes d’intégration du CSS dans notre page HTML, comprenons sa syntaxe de base.
Le CSS est composé de « sélecteurs » et de « déclarations de style » qui définissent comment les éléments HTML doivent être affichés.
- Sélecteurs : Spécifient à quel élément HTML le style doit être appliqué. Il peut s’agir du nom de la balise, d’une classe, d’un identifiant (id).
- Déclarations de Style : Ensemble de propriétés et de valeurs qui définissent le style de l’élément sélectionné.
La syntaxe générale est la suivante :
selecteur { propriété: valeur; propriété2: valeur2; }
p { color: red; font-size: 16px; }Dans cet exemple, tous les paragraphes (p) seront colorés en rouge (color: red;) et auront une taille de police de 16 pixels (font-size: 16px;).
- Pour un nom de balise : selecteur
- Pour une classe : .selecteur
- Pour un id : #selecteur
Trois Méthodes pour Intégrer le CSS
Le CSS peut être appliqué de trois manières principales :
1.Inline CSS : Directement dans les éléments (balises) HTML via l’attribut « style »
<p style="color: blue;">Ceci est un paragraphe bleu.</p>2.Internal CSS : Dans la section <head> du document HTML, en utilisant une balise <style>.
<style>
body {
background-color: #f0f0f0;
}
</style>3.External CSS : En reliant une feuille de style CSS externe à votre document HTML avec une balise <link> (dans le head).
<link rel="stylesheet" href="styles.css">
Exemple concret
/* Réinitialisation de certains styles par défaut pour écraser toutes perturbations avec les réglages navigateur par défault */
body, h1, h2, p, ul, li, nav {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #eee;
}
header {
background: #333;
color: #fff;
padding-top: 2rem;
padding-bottom: 1rem;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
main {
padding: 20px;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem;
position: absolute;
bottom: 0;
width: 100%;
}
Cet ensemble de styles appliqué à notre document HTML fournit une base solide pour la mise en forme visuelle de la page.
La suite ?
Maintenant que vous avez compris comment fonctionne les styles, vous êtes prêt à passer à la prochaine étape.