Cours CSS basique

1. Qu'est-ce que le CSS ?

Le CSS, permet de contrôler l'apparence des éléments présents sur une page web : couleurs, polices, tailles, positions et bien plus encore. En utilisant le CSS, on peut créer des designs uniques et améliorer l'expérience des visiteurs sur un site en rendant son apparence plus esthétique et fonctionnelle.

Exemple simple :

<p>Ce paragraphe va devenir orange !</p>


/* CSS */
p {
  color: orange;
}

👁 Résultat avec CSS :

Ce paragraphe va devenir orange !


⚠ Attention : ce code CSS rendra tous les paragraphes de couleurs orange ! Si nous voulons juste un ou plusieurs mots en orange, nous devons utiliser la balise span et lui ajouter une class !

Exemple :

<p>Le dernier mot va devenir<span class="orange">orange</span> !</p>


/* CSS */
.orange {
  color: orange;
}

👁 HTML avec CSS :

Le dernier mot va devenir orange !

2. Sélecteurs CSS de type :

Les sélecteurs de type permettent de cibler tous les éléments d'un type donné dans une page HTML.

Par exemple:
le sélecteur h1 cible tous les éléments de titre <h1>,
le sélecteur p cible tous les éléments de paragraphe <p>,
le sélecteur a cible tous les éléments de liens <a>.

Exemple :

<h1> Titres en jaune !
<p> Paragraphes en orange !
<a> Liens en jaune-vert ! 


<h1>Titre 1</h1>
<h1>Titre 2</h1>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<a href="https://">Mon lien 1</a>
<a href="https://">Mon lien 2</a>
        


/* CSS */
h1 {
  color: yellow;
}
p {
  color: orange;
}
a {
  color: yellowgreen;
}

👁 Résultat avec CSS :

Titre 1

Titre 2

Paragraphe 1

Paragraphe 2

Mon lien 1

Mon lien 2

3. Sélecteurs CSS de class :

Les sélecteurs de class permettent de cibler des éléments spécifiques en fonction de leur attribut class=" ". Cela permet d'appliquer des styles spécifiques à des éléments précis, même s'ils sont du même type.

Exemple :

Nous utilisons le même type <p> pour créer deux titres, deux paragraphes et deux liens de couleurs différentes avec l'attribut class ! 


<h1 class="cyan">Titre 1</h1>
<h1 class="bleu">Titre 2</h1>
<p class="jaune">Paragraphe 1</p>
<p class="jaune-vert">Paragraphe 2</p>
<a class="orange" href="https://">Mon lien 1</a>
<a class="rose" href="https://">Mon lien 2</a>


/* CSS */
.cyan {
  color: cyan;
}
.bleu {
  color: blue;
}
.jaune {
  color: yellow;
}
.jaune-vert {
  color: yellowgreen;
}
.orange {
  color: orange;
}
.rose {
  color: pink;
}

👁 Résultat avec CSS :

Titre 1

Titre 2

Paragraphe 1

Paragraphe 2

Mon lien 1

Mon lien 2

4. Sélecteurs CSS d'ID :

Les sélecteurs d'ID permettent de cibler un élément HTML unique et spécifique en utilisant son attribut id=" ". Un ID doit être unique sur une page, contrairement aux classes qui peuvent être utilisées sur plusieurs éléments.

Exemple :

<p id="paragraphe-special">Ce paragraphe a un style unique.</p>


/* CSS */
#paragraphe-special {
  color: pink;
  font-weight: bold;
  text-transform: capitalize;
  font-size: 20px;
}

👁 Résultat avec CSS :

Ce paragraphe utilise un style unique.

5. Le Modèle de Boîte (Box Model) :

Le modèle de boîte est un concept fondamental en CSS. Chaque élément HTML est considéré comme une boîte rectangulaire, et le Box Model décrit comment les marges, les bordures, le remplissage (padding) et le contenu de cette boîte sont gérés.

Exemple :

<div class="ma-boite">Contenu de ma boîte</div>


/* CSS */
.ma-boite {
  width: 200px;
  height: 100px;
  padding: 20px; /* Espace intérieur */
  border: 2px solid blue; /* Bordure */
  margin: 30px; /* Espace extérieur */
  background-color: lightblue;
}

👁 Résultat avec CSS :

Contenu de ma boîte

6. Flexbox pour l'Agencement :

Flexbox est un module CSS puissant qui permet de concevoir des mises en page unidimensionnelles complexes, de distribuer l'espace et d'aligner les éléments dans un conteneur. C'est un outil essentiel pour le responsive design, et Bootstrap l'utilise énormément.

Pour activer Flexbox, on utilise display: flex; sur le conteneur parent.

Exemple simple d'alignement horizontal :


<div class="conteneur-flex">
  <div>Élément 1</div>
  <div>Élément 2</div>
  <div>Élément 3</div>
</div>



/* CSS */
.conteneur-flex {
  display: flex; /* Active Flexbox */
  justify-content: space-around; /* Distribue l'espace */
  border: 1px solid gray;
  padding: 10px;
}
.conteneur-flex div {
  background-color: lightgray;
  margin: 5px;
  padding: 10px;}

👁 Résultat avec CSS :

Élément 1
Élément 2
Élément 3

7. CSS Responsif et Media Queries :

Le design responsif permet à votre site web de s'adapter à la taille de l'écran de l'utilisateur (ordinateur, tablette, mobile). Les Media Queries sont la clé pour y parvenir en CSS. Elles vous permettent d'appliquer des styles spécifiques en fonction de la largeur de la fenêtre du navigateur.

Exemple : changer la couleur du texte sur mobile

<p class="texte-responsive">Ce texte changera de couleur sur les petits écrans.</p>


/* CSS */
.texte-responsive {
color: yellow;
 }
@media (max-width: 767px) {
.texte-responsive {
color: yellowgreen;
 }
}

👁 Résultat avec CSS
(Redimensionner la fenêtre du navigateur) :

Ce texte changera de couleur sur les petits écrans.

8. Propriétés de Typographie :

Au-delà des couleurs, le CSS vous permet de contrôler l'apparence du texte de manière très précise.

Exemple :

<p class="texte-stylise">Ce paragraphe a une police et une taille spécifiques.</p>


/* CSS */
.texte-stylise {
  font-family: 'Verdana', sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-decoration: underline;
  color: #336699;
}

👁 Résultat avec CSS :

Ce paragraphe a une police et une taille spécifiques.

9. Positionnement CSS :

Comprendre comment positionner les éléments est crucial pour la mise en page.

Exemple de `fixed` :

<div class="element-fixed">Je suis fixe !</div>


/* CSS */
.element-fixed {
  position: fixed;
  bottom: 50px;
  right: 50px;
  background-color: #ffcc00;
  padding: 10px;
  border: 1px solid #c09000;
  z-index: 1000;
}

👁 Résultat avec CSS :

Je suis fixe !

10. Les Transitions CSS :

Les transitions CSS permettent de créer des animations douces entre deux états d'une propriété CSS. Elles rendent l'interface plus dynamique et agréable.

Exemple :

<button class="bouton-anime" type="button">Survolez-moi !</button>


/* CSS */
.bouton-anime {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition:
  background-color 0.5s ease-in-out, transform 0.5s;
}
.bouton-anime:hover {
  background-color: darkblue;
  transform: scale(1.1);
}

👁 Résultat avec CSS :

11. Intégration avancée de Bootstrap 5 :

Puisque vous utilisez Bootstrap 5, il est pertinent de montrer comment tirer parti de ses fonctionnalités avancées ou le personnaliser.

Exemple de surcharge de variable CSS Bootstrap :


/* CSS (à placer dans votre fichier CSS principal)
*/:root {
  --bs-primary: black; /* Nouvelle couleur primaire */
  --bs-body-bg: yellow; /* Nouvelle couleur de fond */
}
/* Utilisation d'une classe utilitaire */
.my-custom-text {
  font-style: italic;}


<p class="text-primary mt-3 my-custom-text">  Ce texte utilise la nouvelle couleur primaire de Bootstrap et mon style personnalisé.</p>

👁 Résultat :

Ce texte utilise la nouvelle couleur primaire de Bootstrap et mon style personnalisé.

Allez plus loin que ces simples démonstrations CSS !

↪ Les exemples ici ne sont que des aperçus de ce que le CSS peut offrir !
✔ Pour approfondir et maîtriser chaque aspect du CSS, plongez dans les tutos vidéos gratuits ou contactez l'agence web pour des cours privés (payants).
✔ Fini les solutions impersonnelles comme WordPress ou les documents fades sous Word : place à des sites vitrines professionnels et des mises en page HTML/CSS bien plus élégantes !