Les bases de CSS

CSS (Cascade Style Sheet) est le langage permettant de mettre en forme les pages web

 

Propriétés CSS et définition des styles

 

Propriétés CSS

Les propriétés CSS sont définies ainsi : propriete: valeur;

Exemple : color: #68F0B2;

 

Définition des styles dans les balises HTML

Il est possible de définir la mise en forme CSS d'un élément de la page web directement dans le code HTML avec l'attribut style.

Exemple : <p style="text-align:center; color: #99AB54;>Bonjour !</p>

 

Définition des styles dans l'entête de la page web

Il est possible de définir les mises en forme dans l'entête de la page web avec la balise <style type="text/css"></style>, à placer dans l'entête de la page (entre les balises <head> et </head>). Ainsi, ces mises en formes s'appliqueront à l'ensemble de la page web.

Exemple :

<style type="text/css">
  p {
    text-align: center;
    color: #B728A5;
  }
</style>

 

Définition dans un fichier séparé

Il est possible de définir une même présentation pour plusieurs pages web en définissant les styles CSS dans un fichier CSS liés à toutes les pages web. Le lien entre une page web et un fichier CSS avec la balise <link rel="stylesheet" type="text/css" href="/..." />, à placer dans l'entête de la page web (entre les balises <head> et </head>).

Exemple : <link rel="stylesheet" type="text/css" href="/fichier.css" />

 

Formats et classes

 

Formats globaux

Mise en forme pour toutes les occurences d'une balise HTML.

balise {
  propriété: valeur;
  ...
}

Exemple : titres de niveau 2 avec un texte centré, bleu, souligné, avec une magre de 5 pixels en bas

h2 {
  text-align: center;
  color: #0000ff;
  text-decoration: underline;
  margin-bottom: 5px;
}

 

Formats globaux imbriqués

Mise en forme de balises HTML (ou format CSS) se trouvant à l'intérieur d'autres balises HTML (ou formats CSS).

contenant contenu {
  propriété: valeur;
  ...
}

Exemple : les images se trouvant dans un bloc auront une bordure rouge

div img {
  border-style: solid;
  border-color: #ff0000;
}

 

Mise en forme commune

Mise en forme commun pour plusieurs balises et/ou formats.

format1, format2 {
  proprieté: valeur;
  ...
}

Exemple : tableaux et images feront 500 px de large et auront une bordure blanche de 1 px de type solid

table, img {
  border: 1px solid #ffffff;
  width: 500px;
}

 

Classes
Définition

Une classe permet de définir un format pouvant être appliqué à plusieurs éléments HTML (ou plusieurs occurences d'une balise HTML) d'une page web.

.nomclasse {
 
propriété: valeur;
  ...

}

Possibilité d'ajouter une balise devant le point afin de définir une classe spécifique à une balise :

balise.nomclasse {
 
propriété: valeur;
  ...

}

Exemple : création d'une classe nommée cri définissant un texte rouge, en gras et centré.

.cri {
  color: red;
  font-weight: bold;
  text-align: center;
}

Attribution d'une classe à un élément HTML

<balisehtml class="nomclasse">...</balisehtml>

Exemple : attribution de la classe cri à un paragraphe

<p class="cri">Arrêtez de parler en classe !</p>

 

Formats indépendants
Définition

Un format indépendant permet de définir un format pouvant être appliqué à un seul élément HTML d'une page web.

#nomformat {
 
propriété: valeur;
  ...

}

Possibilité d'ajouter une balise devant le dièse afin de définir un format indépendant spécifique à une balise :

balise#nomformat {
 
propriété: valeur;
  ...

}

Exemple : création d'un format indépendant nommé monbloc définissant des dimensions de 400 px par 300 px pour un élément HTML

#monbloc {
  width:400px;
  height:300px;
}

Attribution d'un format indépendant à un élément HTML

<balisehtml id="nomclasse">...</balisehtml>

Exemple : attribution du format indépendant monbloc à un bloc

<div id="monbloc">Bonjour !</div>

 

Sélecteur

Un sélecteur permet de formater un élément HTML en fonction d'une situation particulière (survol, premier caractère, lien actif, etc).

:selecteur {
 
propriété: valeur;
  ...

}

Les sélecteurs sont des valeurs définies : https://www.w3.org/TR/css-2020/#selectors

Possibilité d'ajouter une balise, une classe ou un format indépendant devant le deux-points afin de définir un sélecteur spécifique à un de ces éléments :

balise:selecteur {
 
propriété: valeur;
  ...

}

Exemple : soulignement et texte en jaune lors du survol des liens

a:hover {
  color: yellow;
  text-decoration: underline;
}

 

Remarques

  • La balise span permet de formater une partie d'un paragraphe de texte.
  • Il est possible de cumuler classe et format indépendant pour une même balise, en lui mettant les deux attributs class et id.
  • Les commentaires en CSS s'écrivent entre /* et */.