Introduction à css

Auteurs :

François Brucker
Yi Mei Jiang
Théophile Bonneau

Utilisation de css pour modifier le style de sa page.

Si le html permet de structurer votre page, c'est le css qui contrôle son style.

Si vous inspectez les éléments de notre fichier html précédent, vous voyiez qu'il y a du css, même si on ne l'a pas défini. Chaque navigateur va avoir un style (des propriétés css) par défaut pour chaque balise.

Le css est un langage qui permet de gérer la mise en forme de votre site. c'est à dire qu'avec le css vous allez pouvoir mettre de la couleur, changer les styles d'écriture, la mise en page...

Qu'est ce que le css

Créez un fichier exemple.html contenant le code suivant :

<!doctype html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Maison page</title>
      <style>
        p {
              color: red;
              background-color: olive;
        }
      </style>
  </head>
  <body>
      <h1>Bonjour Monde</h1>
      <p>Bienvenue sur ma page web.</p>
      <p>Comment allez vous ?</p>
  </body>
</html>

Sauvez le fichier et rechargez votre page dans le navigateur.

Vous pouvez voir que le texte dans le paragraphe est devenu rouge.

Le css est une succession de spécification de propriétés css pour un (ou plusieurs éléments) décrits par un sélecteur :

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

Un sélecteur peut être beaucoup de choses, le plus simple étant le nom d'une balise. Dans l'exemple précédent :

le sélecteur est l'élément (<p></p>) : il suffit de noter le nom des balises que l'on veut modifier. On aurait pu utiliser h1,emou n'importe quelle autre balise.
on modifie deux propriétés pour ce sélecteur :
- la propriété color qui correspond à la couleur du texte
- la propriété background-color qui change la couleur du fond de l'élément.

Propriétés css

Il existe de nombreuses propriétés, vous pouvez retrouver les principales :

ici
ou encore là.

Propriété simple

Un attribut et une valeur.

Peut être du texte, comme pour la justification d'un texte :

p {
  text-align: center;
}

Ou un nombre avec son unité, comme pour la taille de la police de caractère :

p {
  font-size: 25px;
}

propriétés combinée

Beaucoup de commandes peuvent se combiner. Par exemple les fontes ont de nombreuses sous-propriétés qui peuvent se combiner en une seule directive css :

p {
  font: 20px Arial, sans-serif;
}

Où placer le style ?

Documentation

https://www.w3schools.com/css/css_howto.asp

Il y a trois grandes façons d'inclure du css dans une structure html

Balise style

Une 1ère technique consiste à écrire directement dans le fichier html, grâce à la balise <style></style>.

Par convention, on place souvent la balise de style dans le <head></head> de la page.

On peut :

avoir plusieurs balises styles
les mettre ou on veut ça ne change rien. Donc autant respecter la convention et toutes les mettre au même endroit : dans head

Si plusieurs modifient la même propriété, c'est la dernière qui est lue qui est prise en compte. Lorsque l'on a des bibliothèques, ont commencent par elles et on fini pas nos propres propriété css qui peuvent modifier celles établies précédemment.

Inclure du style avec la balise style est recommandée lorsque l'on ajoute peu de style.

Fichier séparé

On utilise la balise auto-fermante link :

<link rel="stylesheet" href="[nom de fichier]">

Lorsque vous incluez vos propres fichiers, utilisez toujours un chemin relatif. On a de plus coutume de placer le css dans un dossier spécifique de notre site

Attribut de la balise

Enfin, on peut utiliser l'attribut style présent dans n'importe quelle balise html.

Par exemple :

<p style="margin: 15px; line-height: 1.5; text-align: center;">
Romani ite domum !
</p>

On Utilise souvent cette façon de faire en javascript ou on modifie les propriétés css d'un élément avec du code. C'est aussi pratique lorsque l'on veut changer un petit truc dans une balise particulière.