Les Bases

Les Cascading Style Sheets, CSS ou feuilles de style en cascade servent à décrire la présentation d’un document.
Une feuille de styles CSS existe déjà dans votre navigateur, elle permet de définir des règles de départ plus ou moins différentes selon les navigateurs.
exemple : La plupart des navigateurs fixent le corps de texte à 16px.
Pour modifier cette valeur vous avez 3 possibilités :

  1. modifier les préférences de votre navigateur (c’est une possibilité) ;
  2. ajouter un style sur l’élément ;
  3. lier ou ajouter une feuille de styles à votre page.

La première possibilité ne nous concerne pas en tant que web designer mais est à prendre en compte.

préférences de Firefox
préférences de Firefox

Cascades

Pour intervenir sur un élément vous allez devoir écraser (redéfinir) ce qui est déjà défini par différentes sources. Je vous invite à lire cet article : https://developer.mozilla.org/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_h%C3%A9ritage après avoir pratiqué le CSS.

Grammaire

Pour définir une règle CSS, il faut un ou plusieurs sélecteurs, une ou plusieurs propriétés et une ou plusieurs valeurs.

sélecteur{
  propriété : valeur ;
  propriété : valeur ;
  propriété : valeur ;
}

Le sélecteur permet de cibler un ou plusieurs éléments.

/* tous les h1 de la page (le nom de la balise) */
 
h1{ } 
 
/* tous les titres (on sépare avec une virgule les éléments) */
 
h1,h2,h3,h4,h5,h6{ } 
 
/* tous les éléments avec la class header (un point devant le nom de la class)*/
 
.header{ } 
 
/* l'élément avec content en id <div id="content"> */
 
#content{ } 
 
/* les h1 qui ont pour ancêtre un élément avec la class header  
<div class="header"><div><h1>…</h1</div></div> (espace entre les sélecteurs) */
 
.header h1{ } 
 
/* <h1 class="header">…</h1> (on colle les sélecteurs) */
 
h1.header{ }
 
/* sélectionner tous les éléments */
 
* {}
 
/* sélectionner les enfants directs */
 
h1>span { }

Vocabulaire

On sait à présent écrire une règle CSS mais nous ne connaissons pas de vocabulaire pour aller plus loin.
Voici un exemple avec une dizaine de propriétés :

See the Pen CSS 01 by Benoît Wimart (@benoitwimart) on CodePen.dark

Remarques :

  • les unités sont collées aux valeurs 20px et pas 20 px ;
  • les propriétés sont en un mot ou séparées par des tirets font-size ;
  • certaines valeurs sont multiples et séparés par une espace margin: 0 auto;
  • les couleurs sont exprimées en hexadécimale #ffffff, avec un raccourci possible comme #aabbcc = #abc ;
  • les couleurs sont possibles en nom de couleur (blue, red…).

HTML

Il existe trois méthodes pour ajouter du CSS à vos éléments :

  • en ajoutant une balise <style> dans le <head> ;
  • en liant une feuille de style externe avec la balise <link> ;
  • ou directement sur l’élément avec l’attribut style (on parle de style d’inline)

Avec du <style>

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   body{
     background:#eee;
   }
  </style>
</head>
<body>
</body>
</html>

Cette méthode est pratique, elle permet d’avoir un seul fichier, c’est l’idéal pour un test rapide, une petite démonstration ou une optimisation de vitesse de chargement.

Créer du lien, <link>

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Ici on attache le fichier style.css, fichier à créer avec Brackets pour y mettre votre CSS.

Attention, le fichier doit être dans le même dossier que votre html ou avoir le bon chemin sur l’attribut href='le-css-est-dans-ce-dossier/css/moncss.css'.
Pour avoir un résultat visible, il faut aussi sauvegarder le HTML et le CSS avant de retourner sur le navigateur.

Astuce : Avec Emmet link:css tab !
L’avantage de cette technique est d’avoir une seule feuille de styles pour plusieurs pages. C’est la méthode la plus courante.

Inline

Parfois, vous n’aurez pas le choix, le code css est à ajouter sur l’élément. le code est peu lisible et écrase toutes les autres styles en concurrence sauf les !important.

<div style="background:#000;color:#fff">Black and White</div>

Notions à connaitre

Conflit !

Chaque sélecteur peut rentrer en conflit avec un autre, le id est plus fort que la class plus forte que la balise

See the Pen poids by Benoît Wimart (@benoitwimart) on CodePen.dark


Le conflit se calcule : MDN : le poids des sélecteurs, mais on contourne ce problème.
Pour éviter les migraines, on utilisera des class sur presque tous les éléments et on ciblera en rendant les sélecteurs plus spécifiques (plus longs).
Sur cet exemple, je cible les paragraphes dans les articles .post p.

See the Pen Class by Benoît Wimart (@benoitwimart) on CodePen.dark

Le !important

!important permet de casser la cascade, prendre la main. Séduisant dans certains cas, cette astuce son usage est déconseillé !

See the Pen !important by Benoît Wimart (@benoitwimart) on CodePen.dark

Less is more

La tentation du débutant est de mettre le plus propriétés possibles dans sa feuille de styles.
Certaines propriétés ne marchent pas sans d’autres :

  • margin:auto; et width:valeur;
  • display:inline et width:valeur;
  • left,right,top,bottom et position:absolute | relative;
En cas de problème(s), regarder dans l’inspecteur, repartir à zéro sur un exemple plus simple, isoler le problème, demander à Google, poser une question dans la classe ou sur un forum, try something in english, google translate is your friend, envoyer un mail à un expert.

bonus : http://wtfhtmlcss.com/