CSS : Définition

Nous allons nous découvrir le langage CSS de l'anglais Cascading Style Sheets pour aboutir à la création de pages web mises en forme.

Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML pour gérer leur mise en forme.

Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

Le langage HTML comme nous l'avons vu sert à implémenter le contenu de façon structurée.
Le CSS lui va permettre de rendre tout cela agréable à lire et à consulter, ce langage va nous permettre de gérer la mise en forme. Les possibilités sont infinies.
Les pièges sont nombreux (trop chargés , illisible en changeant de support, etc.).
Depuis la possibilité de consulter des pages Web depuis des smartphones, il est essentiel que la mise en page d'un site s'adapte à la taille de l'écran : on parle de responsive design.
Des Frameworks CSS tout fait comme Bootstrap permettent l'obtention de sites de bonne qualité relativement facilement.

L'objectif de ce cours est de vous montrer comment les choses s'articulent pour vous permettre de réaliser votre propre site web.

Environnement de travail

Un premier exemple avec un outil en ligne

Dans un premier temps nous allons travailler avec un outils en ligne : le site jsfiddle.net. Lien ici .

L'objectif de cet exercice est de comprendre les rudiments du CSS.

Pour observer vos modifications, il faudra cliquer sur le bouton run de jsfiddle.

Commencer par collé ce code dans le cadre HTML de jsfiddle.

<!DOCTYPE html>
<html>
    <head>
        <title> Première page HTML</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>Un titre de niveau 2</h2>
        <h3>Un titre de niveau 3</h3>
        <p> Et voilà un premier paragraphe ;)</p>
        <p> Et encore 1</p>
        <h2> Vive la N.S.I.</h2>
        <h3>Les Maths aussi !3</h3>
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem impedit dignissimos dolore qui pariatur nemo quam in, laudantium nulla saepe suscipit voluptas! Excepturi, perferendis dolorum! Ad modi atque eius perspiciatis.</p>
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint odit dolor adipisci id ipsam doloremque non, nesciunt fuga accusantium error itaque? Voluptatibus nam laboriosam, esse ex eum cum porro illo.
        Nesciunt aut, inventore aliquam praesentium natus itaque? Mollitia, nisi magni a dicta unde vel eaque laudantium officia enim explicabo ipsam, quod adipisci blanditiis eius, ratione reprehenderit id asperiores. Nisi, ea.</p>
    </body>
</html>

Coller ce dans le cadre CSS :

h2 { 
    text-align: center;
    background-color: red;
    }
h3 {
    font-family: Verdana;
    font-style: italic;
    color: green; 
    }

Vous pouvez retrouver directement le contenu précédent sur Capytale avec le code d157-935590.

Modifier le CSS pour que les titres h2 soient soulignés avec une couleur de fond rose, centrés, et un cadre noir en pointillé.

Vous pouvez vous aidez de ce site de référence pour y effectuer une recherche. Par exemple, le mot "cadre" peut être lié au mot "border" en anglais.
Modifier le CSS pour que les titres h3 soient écrits en gras, bleus avec un cadre gris et double.
Modifier le CSS pour les paragraphes p soient écrits avec un font family de votre choix et une couleur du texte de votre choix.

L'environnement de travail sur votre machine

Dans un premier temps, vous allez créer dans un répertoire de votre ordinateur une arborescence de ce type :
Dans le fichier index.html, collez le contenu HTML de l'exercice 1.
Dans le fichier style.css, collez le contenu CSS de l'exercice 1 ..
Faire un double clique sur le fichier index.html. Qu'observez vous ?
Dans le <head> de votre index.html écrire la ligne de code suivante :
```
<link rel="stylesheet" href="css/style.css" >
```
Faire un double clique sur le fichier index.html. Qu'observez vous?

Tout est prêt pour commencer à styliser votre site et à le compléter.

Sélecteurs et héritage en CSS

Les sélecteurs "simples"

Le CSS va appliquer des attributs de style à du contenu écrit en HTML grâce à des sélecteurs qui vont cibler un contenu particulier pour leur appliquer une propriété particulière de mise en forme.

Une ligne complète liant une propriété avec sa valeur est appelée une déclaration.
L'ensemble formé d'un sélecteur et de toutes ses déclarations est appelé une règle.

Nous n’avons vu pour l'instant que des sélecteurs CSS de type élément, c’est-à-dire des sélecteurs qui ciblent un élément en se basant sur le nom de l’élément dans le language HTML.

Le sélecteur CSS p va cibler tous les éléments p (c’est-à-dire tous les paragraphes) d’une page HTML.
Le sélecteur CSS h1 va nous permettre d’appliquer des styles aux titres h1 de la page HTML.
Le sélecteur CSS a va nous permettre de mettre en forme les liens de la page web.

Les sélecteurs id et class

Dans le langage HTML, les attributs id et class permettent de cibler un élément en particulier plutôt qu’un type d’élément.

Il faut "taguer" ("cibler" en bon français) un élément avec l'un des attributs id ou class à l’intérieur de la balise ouvrante de cet élément HTML en lui donnant une valeur.

L'attribut id permet d'identifier de manière unique un élément particulier d'une page HTML.
L'attribut class permet d'identifier un ensemble d'éléments dont on veut une même mise en forme dans une page HTML.

Une balise ouvrante p d'un paragraphe identifié de manière unique dans la page Web à l'aide d'un identifiant :
```

```
Une balise ouvrante div d'une division (= bloc d'une partie de la page Web) identifiée de manière à la considérer comme un représentant (parmi d'autres sûrement) de la classe exo :
```
<div class="exo">
```

Il faut ensuite définir cet élément en CSS en réutilisant cette même valeur. On utilisera :

Le sélecteur #nom_id permet de mettre en forme un attribut id de valeur nom_id.
Le sélecteur .nom_classe permet de mettre en forme un attribut class de valeur nom_classe.

/*Commentaire en CSS*/

/*mise en forme du seul élément identifié par l'id p1 :*/
#p1 {                    
    font-style: bold;
    color: blue; 
    border-width: 2px;
    border-style: double;
    border-color: grey;
}

/*mise en forme de tous les éléments de la classe exo :*/
.exo {
    color: purple;
    font-family: "Lucida Handwriting";}

Les valeurs indiquées pour les attributs id et class ne doivent contenir ni caractères spéciaux ni espaces ni commencer par une lettre.

Écrire ce code dans un fichier html.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Voici mon site</title>
    </head>
    <body>
        <h1>Un titre de niveau 1</h1>
        <p id="p1"> Un paragraphe ne contenant pas grand chose.</p>
        <p class="p1"> encore moins.</p>
        <p> Un troisième aussi vide.</p>
        <p class="p1"> pas mieux.</p>
    </body>
</html>

Écrire ce code dans un fichier css.

/* L'élément portant l'id "p1" sera en bleu et en gras */
#p1{
    color: blue;
    font-weight: bold;
}
/* Les éléments portant la classe "p1" seront en rouge et encadrés */
.p1{
    color: red;
    border-style: solid;
    border-width: 2px;
}

Observer l'effet du CSS sur chacun des paragraphes.

Comme vous pouvez le voir ci-dessus, on a rajouté un attribut id au premier paragraphe et un attribut class au deuxième et quatrième paragraphe.

En effet, pour cibler un élément possédant un attribut id, en CSS, il faudra préciser la valeur de l’attribut précédée d’un croisillon #.

Pour cibler un élément possédant un attribut class, en revanche, il faudra en CSS préciser la valeur de l’attribut précédée d’un point ..

Ainsi, on peut tout à fait donner la même valeur (ici p1) à un attribut class et id : il n’y a aucun risque de confusion en CSS si vous faites bien attention à bien faire précéder la valeur par le croisillon ou le point.

Il existe une différence notable entre les deux attributs class et id : chaque id doit avoir une valeur unique tandis que plusieurs attributs class peuvent posséder la même valeur.

En effet, rappelez vous de nos liens de type ancre. Il s’agit bel et bien du même attribut id qu’on utilise aujourd’hui, avec des finalités différentes.

Il est donc strictement interdit de donner la même valeur à deux id différents dans une même page HTML.
En revanche, on peut tout à fait attribuer la même valeur à plusieurs attributs class appartenant à différents éléments HTML.

Cette particularité de l'attribut class permet notamment d'appliquer le même style à différents éléments ou même types d'éléments HTML d'un coup.

Ajouter au fichier html de l'exercice précédent un titre de niveau h4 avec une classe p1.
Observer.

L’héritage en CSS

L’héritage est une notion centrale et fondamentale en CSS.

La notion d'héritage signifie que tout élément HTML enfant va hériter, «en cascades», des styles de ses parents.

C’est par ailleurs de là que vient le nom du CSS : Cascading StyleSheets, ou Feuilles de Style en Cascades.

Tous les éléments à l’intérieur de l’élément body sont des enfants de cet élément.
Si l’on applique un style à l’élément body, ses enfants en hériteront automatiquement.

On reprend les fichier HTMLet le CSS de l'exercice précédent :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Voici mon site</title>
        <link rel="stylesheet" href="ihm2_exo4.css"> 
        <!--fichier CSS enregistré en parallèle du fichier HTML sous le nom ihm2_exo4.css ici-->
    </head>
    <body>
        <h1>Un titre de niveau 1</h1>
        <p id="p1"> Un paragraphe ne contenant pas grand chose.</p>
        <p class="p1"> encore moins.</p>
        <p> Un troisième aussi vide.</p>
        <p class="p1"> pas mieux.</p>
        <h4 class="p1">Sous-titre : four or fort ?</h4>
    </body>
</html>

/* L'élément portant l'id "p1" sera en bleu et en gras */
#p1{
    color: blue;
    font-weight: bold;
}
/* Les éléments portant la classe "p1" seront en rouge et encadrés */
.p1{
    color: red;
    border-style: solid;
    border-width: 2px;
}

Rajouter dans le CSS précédent, le sélecteur body avec les propriétés ci-dessous :
```
/* À rajouter de préférence en début de CSS */
body{
    color: #009900;  /* couleur verte particulière écrite en hexadécimal */
    font-style: italic;
}
```
Pourquoi certains titres et paragraphes sont en vert alors que d'autres non ? Justifier la couleur de chaque titre et paragraphe.
Rajouter dans le CSS :
```
p{
    color: black;
    font-size: 6px;
    font-style: normal;
}
```
1. Pourquoi le paragraphe avant vert n'hérite-t-il plus de la couleur verte ?
2. Pourquoi la taille de caractères s'applique à chaque paragraphe, même ceux de la classe p1 ?
3. Faire en sorte que les éléments de la classe p1 aient une taille de caractères de 12 px.
Rajouter cette ligne dans le HTML (forcément entre deux certaines balises !) :
```
Voici un mot très important en CSS : héritage !
```
Remarquer que le mot "héritage" est en gras, même sans rien imposer en CSS car par défaut les éléments à l'intérieur d'une balise strong sont mis en gras pour rendre visuel qu'ils sont jugés importants.
Rajouter cette ligne dans le CSS (forcément entre deux certaines balises !) :
```
strong{
    text-decoration: underline;
    font-size: 2em;
}
```
Modifier plusieurs fois la taille des caractères au niveau du sélecteur p et vérifier à chaque fois le rapport de taille entre le texte inclus dans la balise p avec celle du mot "héritage".
Que signifie à votre avis 2em ?
Faire en sorte que les éléments inclus dans une balise strong ne soit plus en gras mais d'épaisseur normale (on parle de "niveau de graisse" en typographie).

Si besoin, aidez-vous du site de référence https://developer.mozilla.org/.
Faire en sorte que le mot CSS soit mis sur fond jaune, écrit en violet, de taille une fois et demie celle du parent p et entouré de pointillés.

L'objectif du programme n'est pas faire de vous des spécialistes, si vous souhaitez approfondir, on vous renvoie à la sitographie.
Vous pouvez aussi utiliser l'inspecteur de page Web pour observer le CSS permettant la mise en forme d'un élément visuel que vous appréciez dans une page Web quelconque afin de découvrir de nouvelles propriétés ou valeurs de propriété.

Positionnement avec du CSS

Par défaut les éléments sont placés le plus à gauche possible sur une page Web et tous les blocs les en dessous des autres.
Un outil pour pouvoir positionner à guise des éléments par rapport à d'autres est la flexbox.

Pour utiliser des flexbox, en français "boîtes flexibles" (en terme de positionnement sur la page), il faut avoir :

Une structure hiérarchique au niveau du html (les enfants se positionneront entre eux à l'intérieur du parent)
Utiliser la déclaration suivante au niveau du sélecteur de l'élément parent : display: flex;

Télécharger ce dossier compressé puis, après décompression, ouvrir le CSS et le HTML sur Visual Studio Code ainsi que le HTML sur un navigateur.

Remarquez que les éléments sont disposés comme blocs les uns en dessous des autres toujours collés sur la marge gauche ainsi que les images initiales n'ayant pas la même taille sont affichées différemment.
Il est possible de positionner un texte avec la propriété CSS text-align.
Copier-coller dans le CSS cette règle puis visualiser l'effet sur le titre principal :
```
h1{
    text-align: center;       /* centrer horizontalement le texte */
    color:brown;
    font-size: 100px;
}
```
Il est possible de positionner chaque contenu de chaque paragraphe en utilisant les propriétés display, justify-content et align-items.
Copier-coller dans le CSS la règle suivantes puis visualiser l'effet sur les paragraphes :
```
p{
    display: flex;            /* Les éléments internes (=ses enfants) seront flexibles */
    justify-content: center;  /* centrer horizontalement le contenu */
    align-items: center;      /* centrer verticalement le contenu */
}
```
Il est possible d'imposer une mise en forme pour les seules images contenues dans un paragraphe p avec le sélecteur p img.
Copier-coller dans le CSS la règle suivante puis visualiser l'effet sur les trois premières images par rapport à la dernière :
```
p img {
    max-width: 150px;          /* largeur maximale autorisée : 150 pixels dans son conteneur */
}
```

Il est possible de positionner plusieurs parties horizontalement en précisant au conteneur parent la déclaration display: flex;.
Copier-coller dans le CSS les deux règles suivantes puis visualiser l'effet sur les divisions contenant les paragraphes :

.parent{
    display: flex;             /* Les éléments internes seront flexibles */
    flex-wrap: wrap;           /* enfants disposés sur une seule ligne si place suffisante, sinon retour automatique */
}
.enfant{
    font-size: 50px;
    margin: 2%;                /* 2% de marge externe sur chacun des côtés */
    flex: 25%;                 /* chaque enfant occupe au moins 25% du parent */
}

Dans le parent, la déclaration display: flex; permet de faire en sorte que le contenu soit affiché sur une même ligne et que si la place manque pour tout afficher, la suite apparaisse en dessous.
Dans les enfants la déclaration flex: 25%; permet de faire en sorte que le contenu de chaque enfant occupe au moins 25% de la largeur du parent.
Modifier le pourcentage 25% puis visualiser l'effet sur les divisions contenant les paragraphes.
Il est possible de mettre en forme de manière singulière une image identifiée par un id.
Copier-coller dans le CSS les deux règles suivantes puis visualiser l'effet sur les divisions contenant les paragraphes :
```
#imgjs{
    border: 0.5em solid red;  /* image encadrée d'une ligne rouge épaisse comme la moitié de la taille en hauteur d'un caractère du parent */
}
```

Si vous voulez aller plus loin, n'hésitez pas à consulter des pages du site de référence developer.mozilla.org, en particulier celle-ci sur les flexbox.

Projet suite

Il est temps de poursuivre votre site Web.

Il devra contenir des images, des vidéos, un fichier css commenté avec des classes et des id.
L'esthétique sera prise en compte.

Sitographie

https://www.pierre-giraud.com/home-old.php.
Site developper.mozilla pour connaître quelles propriétés existent et comment les utiliser.

Les différents auteurs mettent l'ensemble du site à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

▲