Gestion d'une CSS

Cet aide-mémoire n'est volontairement pas exhaustif. Il est principalement destiné aux étudiants de la HELHa qui apprennent les bases du développement web. Il se limite donc aux éléments les plus fréquemment utilisés en CSS.

HTML et CSS

Il existe plusieurs méthodes pour associer des styles à du code HTML

<link href="styles.css" rel="stylesheet"> Lier la feuille de styles externe style.css (dans <head>) 
<style type="text/css">
   sélecteur {propriété:valeur;propriété2:valeur;}
</style>
 Styles intégrés à la page html (dans <head>) 
<div style="propriété:valeur;propriété2:valeur;">
 Styles en ligne (dans n'importe quelle balise html)

Reset

Commencer une feuille de style CSS par un "reset", ou en charger un avant notre propre feuille de style, permet de mettre à zéro les différences entre les navigateurs (taille des textes, marges...).

Privilégier un reset professionnel

Fonts

Il existe deux méthodes principales pour charger une ou plusieurs polices de caractères

1) Utilisation d'une webfont

Les polices en ligne sont simples à gérer et l'offre est de plus en plus grande. Cet exemple utilise Google Fonts. Les différents services fournissent toujours les lignes de code nécessaires pour intégrer la police.

<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
 A copier dans le <head> de la page html, avant les autres CSS. 
body {font-family: 'Open Sans', sans-serif;}
 A copier dans la CSS pour appliquer la police à un ou plusieurs éléments (dans cet exemple, à <body> donc à toute la page)

2) Utilisation d'une police embarquée sur le serveur

Veiller à plusieurs points :

Font Squirrel propose un convertisseur qui fonctionne plutôt bien

@font-face {
   font-family: "Open Sans";
   src: url("fonts/OpenSans.woff2") format("woff2"),
      url("fonts/OpenSans.woff") format("woff");
      url("fonts/OpenSans.ttf") format("truetype");
}
 Au début de la CSS. Charge ici la font "Open Sans" qui se trouve dans un dossier "fonts" 
h1,h2,h3 {font-family: 'Open Sans', sans-serif;}
 A copier dans la CSS pour appliquer la police à un ou plusieurs éléments (dans cet exemple, à <h1>, <h2> et <h3>)

Variables

:root {
   --couleur1 : #F90;
   --couleur2 : #999;
   --degrade : linear-gradient(var(--couleur1), var(--couleur2));
   --marge : 10px ;
}
Définition de variables en début de feuille de style 
h2 {color:var(--couleur1);}
p {color:var(--couleur2);margin-bottom:var(--marge1);}
ul {background: var(--degrade);}
li {padding:var(--marge);}
Application des variables, partout dans les styles (après leur définition)

Media Queries

Les media-queries permettent d'adapter l'affichage selon le contexte dans lequel la page web est affichée.

@media screen and ( min-width: 768px ) {
  p {margin:2rem;}
}
 Sur les écrans (screen) de plus de 768px, la marge des <p> est de 2rem 
@media screen and (max-width: 900px)
 Cible les écrans de maximum 900px 
@media screen and (min-width: 600px) and (max-width: 900px)
 Cible les écrans entre 600px et 900px 
@media screen and (min-width: 600px) and (max-width: 900px), (min-width: 1100px)
 Cible les écrans entre 600px et 900px ou au-delà de 1100px 
@media screen and (orientation:portrait)
 Cible les écrans verticaux 
@media print
 Cible uniquement la version imprimée de la page web 
<link rel="stylesheet" media="print" href="print.css" type="text/css">
 L'attribut media peut aussi être utilisé dans le code HTML pour conditionner l'appel à une feuille de style par exemple

D'autres critères sont possibles : hauteur, prise en charge de la couleur, ratio, résolution...

Plus d'informations sur les media queries dans cet article

Autres possibilités d'une CSS

@import url("autrecss.css");
 Importation d'une autre feuille de style 
/* commentaire dans un fichier CSS */
 Commentaires