Multimédia

CSS (Cascading Style Sheets)

Le CSS est un langage utilisé pour décrire la présentation d'un document écrit dans un langage de balisage comme le HTML. Le CSS est une technologie de base du web.

On l'utilise pour créer la mise en page, les couleurs et la typographie souhaitées pour un site web. On peut également l'utiliser pour adapter le design à des formats differents (impression et mobile par exemple).

Sélecteur

Pour utiliser le CSS, nous devons définir l'élément ou la balise que on veut styliser. C'est ce qu'on appelle un sélecteur.

Le sélecteur peut être un nom de balise, un nom de id ou un nom de class

h1 { } 
#logo { }
.news { }

COPY

Chaque sélecteur est suivit par des accolades. C'est entre les deux accolades qu'on met les styles on veut appliquer à l'élément.

Déclarations

Pour appliquer un style à un élément, on doit l'appliquer avec une déclaration. Une déclaration consiste d'un nom et sa valeur. On l'écrit comme ça:

color: red;

COPY

Le nom de la déclaration est toujours suivi de : et la valeuer doit être terminée avec ;

Les valeurs peuvent être des:
mots-clefs: red
chiffres et unités: 200px
code de couleurs: rgb(255,0,0)

Application

Ensemble ça donne ça.

h1 { 
  color: red; 
}

COPY

On peut mettre autant de déclarations dans un sélecteur.

h1 { 
  font-size: 3rem;
  line-height: 1.1;
  color: red; 
}

COPY

On peut aussi spécifier qu'un sélecteur doit être emballé par un autre (parent/enfant) en utilisant le > .

section > h1 { 
  color: red;
}

COPY

Une manière efficace d'utiliser CSS et de faire de classe pour des visuels différentes et les combiner dans le HTML

.rouge { color: red; }
.text-large { font-size: 3rem; }
.fond-blue { background-color: blue; }

COPY

Ensuite dans le html on peut l'utiliser comme suivant:

<h1 class="rouge text-large fond-blue">
  Grand Titre
</h1>

COPY

Connecter un fichier CSS

Un fichier CSS est terminé par .css et consiste seulement de sélecteurs et déclarations. C'est bien de faire un fichier qui s'appelle style.css et le mettre dans le même dossier du index.html

Pour faire un lien vers le CSS dans une page HTML. Il faut mettre cette balise dans le <head>

<link rel="stylesheet" href="/style.css">

COPY

References

Voici une liste de bon ressources pour plus d'informations sur le CSS:

CSS Tricks

MDN CSS

cssreference.io

https://adam-marsden.co.uk/css-cheat-sheet