Le langage CSS - fiche thématique

Le CSS en deux mots

Fiche signalétique

Un bouclier bleu profond avec le chiffre 3 dépeint en blanc dessus. Au dessus, les trois lettres "CSS" en noir.

Acronyme :: Cascading Style Sheets (CSS)
Utilité :: Maximale, permet de styliser toutes les pages de tous les sites web du monde
Où peut-on en voir :: Sur n’importe quelle page web, faire le raccourci « Ctrl+U » (« Cmd+U » sur macOS) puis chercher la balise <style> ou les liens vers des fichiers .css
Langage algorithmique :: Non
Langage Orienté Objet :: Pas du tout
Difficulté ressentie :: Très simple (le langage vu par les étudiants en informatique après HTML)

Exemple CSS

Retour ligne auto Coloration du code

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}
html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

Ce que les gens ratent souvent avec CSS

La difficulté :: en réalité, c’est difficile de faire une belle mise en page
Le responsive :: rendre un site adaptatif quel que soit l’écran et le navigateur n’est vraiment pas toujours simple, selon la complexité du site
La compatibilité inter-navigateur :: oui, les navigateurs réagissent différemment pour une même page

Exceptions

CSS est également utilisé pour faire le style des fenêtres avec Electron (NodeJS)
CSS est également (rarement) utilisé pour styliser du XML, pour afficher directement et de manière agréable ce langage de structure

Découvrir d'autres thématiques

Si nous avons réussi à piquer votre curiosité et que vous souhaitez découvrir d'autres fiches thématiques :