Aller au contenu

CSS

I. Le fichier CSS : principe général⚓︎

Info

Un document html est presque toujours accompagné d'au moins un fichier CSS qui décrit la mise en page, les formats (polices, couleurs, styles des éléments...). Un même fichier CSS peut être utilisé dans plusieurs pages d'un même site, ce qui permet, en le modifiant, de changer la présentation de toutes les pages (sinon il faudrait les modifier une à une). Mais ceci n'est qu'un aspect de l'intérêt des feuilles de styles.

👉 Essentiellement, elles ont pour rôle de permettre de séparer le contenu (qui est dans le html) de la forme (qui est dans le css)

Sélecteur / Propriété / Valeur⚓︎

Le CSS permet d'appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner tous les éléments d'une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce code CSS :

Exemple

HTML
p {
    color: red;
}

Info

Il y a 3 éléments dans la syntaxe :

  • p est le sélecteur : indique à quels éléments doit on applique le style. Ici, ce seront tout les éléments p, donc tous les paragraphes.
  • colorest la propriété : indique (pour les éléments sélectionnés), quelle propriété on veut modifier.
  • red est la valeur qu'on attribue à la propriété pour les éléments sélectionnés.

Où mettre le code CSS ?⚓︎

En bref

Il est possible de l'inclure dans la page html mais il est recommandé de mettre le code CSS dans un autre fichier, ou même parfois dans plusieurs fichiers, chacun contenant des instructions de formatage spécifiques.

Comment inclure le CSS dans la page ?⚓︎

<link>

Etant donné qu'on place les instructions de style dans un fichier annexe, il est nécessaire de l'indiquer dans la page html.
On utilise pour cela l'instruction <link> entre <head> et <\head>

Un exemple

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="mon_styles.css" type="text/css">
    <title>Titre de l'onglet</title>
</head>

<body>

</body>
</html>
Précisions
  • rel= définit le type de relation, ici stylesheet indique un lien vers une feuille de style.
  • href= donne le nom du fichier, qui peut être un chemin absolu, relatif, ou une adresse web.
  • type= définit le type de contenu, pour les feuilles de styles, c'est text/css.

II. Quelques propriétés fréquentes⚓︎

Nous allons donner ici quelques syntaxes usuelles. Il en existe beaucoup d'autres.
Vous pourrez approfondir plus tard en suivant ce lien (on peut choisir comme langue le français) : w3 schools

1. Pour les textes⚓︎

color : couleur du texte

Pour mettre les titres de niveau 1 en rouge

titre rouge

font-family : pour utiliser différentes polices

Pour mettre les paragraphes en police Monotype Corsiva .

police

font-size : pour modifier la taille du texte

La taille en 1em est la taille normale utilisée sur le client. 2em sera 2 fois plus grand.

taille caractères

font-style : pour mettre par exemple en italique

La valeur peut être : normal, italic ou oblique

font style

text-align : pour centrer/justifier à gauche ou droite

La valeur peut être : center, left ou right

alignement

2. Pour la la page⚓︎

background : couleur du fond

Pour mettre un fond gris :

fond

3. Pour une image⚓︎

width : largeur de l'image (en % ou en px)

Dans l'exemple suvant l'image occupe 10 % de la largeur de la page. Elle est donc très petite !

taille image

4. Pour un lien ou un menu⚓︎

Un exemple

Considérons le code html suivant :

HTML
<nav>
  <ul>
  <li><a href="accueil.html">Accueil<a></li>
  <li><a href="Projets.html">Projets<a></li>
  <li><a href="quisommesnous.html">qui sommes nous</a></li>
  </ul>
</nav>

L'apparence sans CSS est la suivante :

menu sans css

Ajoutons ceci dans notre fichier css :

HTML
nav {
  width: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  background: #c00 ;
  color: #fff ;
  border: 1px solid #600 ;
  margin-bottom: 1px ;
}
nav li a {
  display: block ;
  background: #c00 ;
  color: #fff ;
  font: 1em "Trebuchet MS",Arial,sans-serif ;
  line-height: 1em ;
  text-align: center ;
  text-decoration: none ;
  padding: 4px 0 ;
}

L'apparence avec CSS est la suivante :

menu avec css

III. Exercice⚓︎

Ouvrir un fichier

Vous pouvez ouvrir un fichier depuis votre éditeur (Notepad++, ou Sublime Text, ou autre)

Modifier le style

Enregistrer le fichier suivant : Le rougail de saucisess : "Clic droit", puis "Enregistrer la cible du lien sous"

  1. Créer une feuille de style dans un fichier séparé, modifier l'apparence de cette page web de sorte que:

    • Le fond de la page soit de couleur bleu ciel (lightblue).
    • Les caractères de la page en bleu
    • Les titres de niveau 1 soient en vert.
    • Les titres de niveau 2 soient en violet.
    Le fichier mon_style.css
    HTML
    body {
    background : lightblue;
    color : blue;
}

h1 {
    color : green;
}

h2 {
    color : purple;
}

  2. Créer le lien dans le fichier html vers la feuille de style.

    Le lien

    Début du fichier :

    HTML
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="mon_style.css" type="text/css">
    <title>A la gloire du rougail saucisses</title>
</head>

  3. Vérifiez le rendu avec votre navigateur.