Aperçu des sections

  • Généralités

    Tout replier Tout déplier

    Afin de bien maîtriser le CSS, il faut bien avoir compris le fonctionnement de HTML.


    Sites utiles :

  • Présentation

    Le CSS (pour Cascading Style Sheets, feuilles de style en cascade en français) permet de gérer le rendu visuel de votre page web. Vous allez pouvoir définir différentes règles de style pour toutes les balises HTML présentent dans votre page. Le moteur de rendu graphique du navigateur va interpréter votre HTML, puis appliquer les différents styles que vous aurez créés via les règles CSS.

    Au même titre que le HTML, CSS n'est pas un langage de programmation. on dit que s'est un langage de présentation. La dernière version standard du CSS et la 3, on parle alors de CSS3. Le couple HTML5 et CSS3 sont les deux grands standards du web pour tout ce qui concerne la structuration et la mise en page de documents dédiés au web.

    Le principe de base du CSS est simple : on va cibler des éléments dans notre page HTML, et on va modifier leurs propriétés liées au style (couleur du texte, largeur, taille des polices, etc...)



    Anatomie d'une règle CSS

    Le CSS peux se décomposer en trois grands concepts, qui s'appliqueront partout :

    1. le sélecteur : permet de cibler une ou plusieurs balises dans votre page HTML (ex : tous les <h1>)
    2. la propriété : permet de définir quel est l'aspect de notre balise que l'on souhaite modifier (ex : la couleur du texte)
    3. la valeur : permet de donner une valeur à la propriété que l'on souhaite modifier (ex : rouge)


    On peux donc écrire en CSS : "Je veux que tous mes titres H1 aient un texte de couleur rouge". Et on pourra appliquer ce principe à tous les éléments de la page, et à toutes leurs propriétés.

    Syntaxe du CSS
    Sans coloration syntaxique Avec coloration syntaxique



    Ou peux t on écrire du CSS ?

    Le CSS n'étant pas du HTML, vous devez écrire vos règles CSS dans des endroits particuliers, qui permettront à votre navigateur de faire la séparation entre le HTML et le CSS (la structure en HTML, et le style en CSS). Si vous écrivez du CSS directement dans un fichier HTML, il sera afficher comme un simple texte, sans être interprété par le navigateur.


    Dans un fichier externe
    C'est la meilleure solution car vous avez deux fichiers distincts (un pour le HTML et un pour le CSS). Vous écrirez alors votre CSS dans un fichier que vous nommerai par exemple style.css, puis vous appellerez votre fichier style.css depuis votre page HTML.

    Exemple :

    style.css

    h1{
       color:red;
    }

    page.html

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

    Dans ce cas la, tous les titres <h1> de la page HTML auront du texte rouge.


    Dans le header de votre page HTML
    Entre les balises <head>, et dans une balise <style>. Cela permet de gagner du temps de chargement car le CSS est directement incorporé dans le même fichier que votre code HTML. Cette solution a un inconvénient : c'est que vous aller mélanger du CSS et du HTML dans le même fichier et cela peut être limitant par suite. Par exemple, contrairement au fichier extérieur, les règles CSS écrites dans un fichier HTML ne sont utilisables que dans celui-ci.

    page.html

    <head>
        <style>
            h1 {
                color: red;
            }
        </style>
    </head>


    Dans un attribut style en ligne (inline)
    Le style sera alors incorporé directement à une balise HTML, grâce à l'attribut style. Cette technique est à utiliser en dernier recours, et avec modération. L'inconvénient, c'est que vous allez fortement mélanger le HTML et le CSS, et en plus vos règles ne s'appliqueront que sur la balise qui à l'attribut style. Pour certains cas, c'est la meilleure (voir la seule) technique, mais pour l'instant, on essaye de s'en passer au maximum.
    <h1 style="color:red;">Salut !</h1>


    La cascade

    Comme nous l'avons vu, CSS veux dire Cascading Style Sheets, ce qui se traduit par "feuille de style en cascade". Cela veux dire que l'ordre dans lequel vous allez écrire vos règles sera très important, et c'est toujours la règle exécutée en dernier qui primera sur les autres. L'avantage c'est que vous allez pouvoir écrire des règles qui seront héritées automatiquement dans d'autres règles.

    La cascade prends en compte les niveaux d'exécution du CSS que nous venons de voir (fichier externe, head, inline), mais aussi l'ordre dans lesquelles vos fichiers sont appelé ou vos règles sont écrites.

    On va pouvoir édicter des "grandes règles" dans les "hauts niveaux" de la cascade, puis des règles plus fines dans les "bas niveaux". Les grandes règles seront alors appliquées partout dans votre page HTML, tandis que les "petites" règles" seront appliqués au cas par cas.




    Valeurs par défaut

    Le navigateur dispose de règles CSS par défaut pour chaque éléments. Il va par exemple appliquer des marges automatiquement à un titre. Ou une couleur violette aux liens déjà consultés. Il faut donc souvent redéfinir ces valeurs par défaut, afin qu'elles respectent votre charte graphique.





  • Sélecteurs

    Pour changer les propriétés graphique de votre contenu, vous allez devoir cibler les éléments un à un pour leur attribuer des règles CSS. Il y a de nombreuses façons de sélectionner un élément de votre pages web.


    Sélectionner par un type de balise

    Vous pouvez cibler directement un type de balise HTML. Si vous écrivez par exemple :

    h1 { 
    color:red;
}

    Cela veux dire que toutes les balises <h1> présentent dans votre page web auront un texte rouge. Cela marche pour tous les types de balises qui ont un style. Par exemple : ça ne rime à rien de modifier la couleur du texte d'une image. Par définition, une image n'est pas du texte. Donc ça ne sers à rien de modifier la couleur du texte d'une image. Toutes les balises n'ont donc pas les mêmes propriétés disponibles, mais toutes les balises sont sélectionnables.



    Sélectionner des éléments par classe

    Les classes sont extrêmement utilisées en CSS. Elles vous permettent de déterminer des "familles" de style, et de les cibler plus finement. 

    Les classes CSS doivent correspondre aux valeurs de l'attribut class dans les balises de votre code HTML, et l'opérateur pour les classes en CSS est le point ".". 


    Exemples avec une classe

    HTML

    <ul class="todo">
    <li>faire les courses</li>
    <li>réparer la voiture</li>
    <li>emmener le chat chez le vétérinaire</li>
</ul>

    CSS

    .todo{
    color:blue;
}

    Ici, le texte de ma liste sera bleu :



    Exemples avec plusieurs classes

    Pour cet exemple, on imagine que l'on a plusieurs type de listes de choses à faire : 

    • des liste "normales"
    • des liste urgentes
    • des listes qui concerne le travail


    HTML :

    <ul class="todo urgent travail">   <!--Chaque classe est séparé par un espace-->
    <li>faire le cours sur CSS</li>
    <li>préparer des exercices très difficiles</li>
    <li>arrêter d'utiliser des images farfelues pour illustrer mes travaux</li>
</ul>

    CSS :

    .todo.urgent.travail{  /*Les classes sont collées les unes aux autres*/
    color:red;
    font-weight:bold;
}
    Rendu, texte rouge en gras :



    Sélectionner un élément par son ID

    Vous pouvez sélectionner un élément via son ID grâce à l’attribut HTML id et l'opérateur CSS #. Le principe d'un ID est qu'il est unique dans votre page web. Vous pouvez avoir plusieurs pages web dans votre site qui ont des éléments avec le même ID, mais vous ne pouvez avoir qu'un seul élément représenté par un ID particulier dans une page web. Si vous avez mal codé votre page web, et qu'il y a plusieurs balises avec la même id, le navigateur en sélectionnera une (la première ou la dernière en général), et ignorera les autres.


    HTML :

    <ul>
    <li id="toulouse">Toulouse</li>
    <li id="bordeaux">Bordeaux</li>
    <li id="marseille">Marseille</li>
    <li id="paris">Paris</li>
</ul>

    CSS :

    #toulouse{
    color:rgb(255, 149, 97)
}
#bordeaux{
    color:rgb(130, 0, 35)
}
#marseille{
     color:rgb(255, 199, 0)
}
#paris{
     color:rgb(38, 92, 255)
}

    Rendu :


    Mixer des règles de sélections

    Une fois que l'on a bien compris les sélecteurs par balise, par classes, et par id, on va pouvoir les mixer pour avoir des règles de sélections plus fines.

    CSS :

    .todo{
        color:blue;
    }
    .todo .urgent{
        color:orange;
    }
    .todo .urgent#vital{
        color:red;
        font-size:larger;
        text-transform: uppercase;
    }

    HTML :

    <ul class="todo">
       <li>faire les courses</li>
       <li class="urgent">réparer la voiture</li>
       <li>arroser le jardin</li>
       <li class="urgent" id="vital">emmener le chat chez le vétérinaire</li>
       <li>changer le frigo</li>
    </ul>

    Rendu :


    Attention : dans cet exemple, l'utilisation de "espace" entre les différents sélecteurs est très important (à discuter).


    Autres attributs HTML

    Vous pouvez aussi cibler un ou plusieurs élément en utilisant tout type d'attributs en plus de class="" et id="". La syntaxe est juste différente. Si par exemple vous souhaitez modifier le style de tous vos champs textes, vous écrirez avec ce genre de syntaxe.

    HTML :
    <input type="text" value="Salut !" />
    <input type="tel" value="0675484521" />

    CSS :
    input[type="text"] {
    padding:20px;
}
    Rendu :


    Règles de sélection

    Voici quelques exemples de sélecteurs, avec l'utilisation de "espace", et de "virgule" :

    Sélectionner une balise via plusieurs sélecteurs

    Vous pouvez mélanger les types de sélecteur pour faire un sélecteur plus précis. L'espace permet de cibler une autre balises enfant de la balise précédente.

    Ici, je souhaite que les pâtes des listes de courses soient affichées en vert :

    HTML :

    <ul class="todo" id="courses">
 <li>Tomates</li>
 <li class="pates">Macaroni</li> 
 <li>Pain</li>
 <li class="pates">Spaghetti</li>
</ul>
    CSS :

    ul.todo#courses li.pates{
        color:green;
    }


    Appliquer différents sélecteurs à la même règle


    Vous pouvez appliquer la même règle à différents sélecteurs en les séparant par une virgule.

    HTML :
    <h1>Changement de la couleur du texte</h1>
<p>Lorem ipsum dolor sit in culpa qui officia deserunt mollit anim id est laborum.</p>

    CSS :
    h1, p{
     color:blue;
}
    Rendu :




    Sélectionner toutes les balises

    Avec le sélecteur joker : *
    Utilisé dans certains cas très particuliers.

  • Propriétés

    Une fois que vous avez sélectionner votre élément, vous pourrez modifier certaines propriétés CSS qui le constitue. Il y a de très nombreuses propriétés disponibles, vous les rencontrerez à l'usage.



    Les propriétés standards

    Exemples de propriétés standards :

    • color : couleur du texte
    • text-align : alignement du texte
    • display : type d'affichage

    Tous les éléments n'ont pas forcément accès à toutes les propriétés CSS. Votre règle sera tout simplement ignorée dans ce cas. 

    Il y a plusieurs grandes familles de propriétés :

    • dimensionnement
    • positionnement
    • espacement
    • couleurs
    • police de caractères
    • effets visuels
    • etc...


    Certaines propriétés correspondent à des besoins très standards (ex : couleur du texte), certaines sont plus liées aux problématique du web (ex : effet quand vous passer votre souris sur un élément).

    Exemple sur le Moodle : le header est fixe en haut de la page quand vous scrollez, c'est la propriété "position : fixed". Vous pouvez vérifier dans votre debugger.


    Les propriétés composées

    Vous pouvez "factoriser" certaines propriétés en une seule. C'est le navigateur qui va interpréter votre valeur pour la répercuter correctement sur les différentes "sous-propriétés". Exemple :

    .my_margin {
  margin: 20px;
}

    Equivaut à :

    .my_margin {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

    C'est deux règles veulent dire exactement la même chose. Laquelle préférez vous écrire ? Vous pouvez aussi appeler chaque sous-propriétés séparément si vous le souhaitez : 

    .my_margin {
  margin: 20px;
  margin-bottom:40px;
}

    Vous pouvez aussi l'écrire d'une différentes manière pour modifier les valeurs :

    .my_margin {
  margin: 20px 40px;
}
    Ceci équivaut à avoir des margin top et bottom à 20px, et right et left à 40px.


    .my_margin {
  margin: 20px 30px 40px 50px;
}
    Et ça à avoir une valeur différente pour top right bottom et right (sens des aiguilles d'une montre, en partant de top).

    Vous pouvez le tester dans votre débugger, afin de faire apparaître ceci :



    Beaucoup de propriétés se divisent en sous-propriétés, et chaque sous-propriétés correspond à un des aspects sur lequel vous allez pouvoir influer. Par exemple la propriété border-style, qui est une sous-propriétés de border, peut contenir toutes ces valeurs :

    • dotted - ligne en pointillés
    • dashed - ligne en tirets
    • solid - ligne "pleine"
    • double - Defines a double border
    • groove - Defines a 3D grooved border. The effect depends on the border-color value
    • ridge - Defines a 3D ridged border. The effect depends on the border-color value
    • inset - Defines a 3D inset border. The effect depends on the border-color value
    • outset - Defines a 3D outset border. The effect depends on the border-color value
    • none - Defines no border
    • hidden - Defines a hidden border

    Les préfixes

    Certaines propriétés ne sont pas implémentées exactement de la même manière selon les navigateurs. Et elles n'ont pas forcément le même nom. Vous allez donc pallier à ce problème via les préfixes "vendor" afin que votre CSS soit correctement exécuté sur tous les navigateurs. Cette pratique est de moins en moins courante, car les navigateurs sont plus normalisés qu'avant, et tous les framework CSS (comme Bootstrap) résolvent ce problème nativement.

    Exemple avec la propriété transition qui permet de faire des effets d'animations et de fondus :

    .my_transition_class{
        -webkit-    transition: all 4s ease;
        -moz-transition: all 4s ease;
        -ms-transition: all 4s ease;
        -o-transition: all 4s ease;
        transition: all 4s ease;
    }

    Et voici à quoi correspondent ces préfixes :

    • -webkit- : pour Webkit (Chrome, Safari,...)
    • -moz- : pour Firefox
    • -ms- : pour IE
    • -o- : pour Opera


    La règle qui n'a pas de préfixe est alors la règle "par défaut". Les identifiants des préfixes représentent les différents moteurs de rendu graphique intégrés dans chaque navigateurs.

  • Valeurs

    Toutes les propriétés acceptent différentes valeurs, mais elles ne sont pas toutes de la même nature.


    Valeurs variables

    Les espaces, distances, et longueurs :

    • pixels
    • em
    • %
    • cm
    • etc...

    Les couleurs :

    • #FF0000
    • rgb(255,0,0)
    • etc...

    Les URL :

    body {
    background-image: url(images/image_de_fond.png);
}


    On pourra donc écrire des choses comme ça :

    body {
    font-size: 25px;
    color: #FF0000;
    background-image: url('/chemin/vers/mon/image/de/fond/image.jpg');
}

    Valeurs fixes

    Il y a des valeurs qui correspondent à des mots clés imposés. Par exemple la propriété "position" n'accepte que cette liste de valeurs :

    • static
    • relative
    • absolute
    • fixed
    • sticky
    • inherit
    • initial
    • unset

    Autres types de valeurs

    Vous allez découvrir qu'il y a d'autres types de valeurs en CSS. Certaines sont bien implémentées dans les différents navigateurs,  et vous pourrez les utiliser l'esprit tranquille. D'autres sont un peu plus expérimentales, et donc ne fonctionneront pas sur tous les navigateurs. A vous de choisir et de vérifier.

    calc()

    Par exemple, l'opérateur calc() en CSS permet de calculer une distance (en pixels, pourcentage, em,...) dans le contexte du navigateur. Voici une page complète ici https://www.alsacreations.com/article/lire/1630-la-fonction-calc-en-css.html.

    div {
    width: calc(100% - 20px);
    padding: 10px;
}

    Ici, la propriété "width" aura bien une valeur en pixels quand le CSS va être interprété par le navigateur. Mais le 100% n'aura pas la même valeurs selon votre navigateur (ex : smartphone vs. desktop). Cela peut s'avérer très utile.

  • Liens de parenté

    Le HTML et le CSS fonctionnent avec une idée de fond, c'est l'imbrication de balises dans d'autres balises. C'est à dire que vous allez avoir des balises qui contiennent d'autres balises. 

    Exemple :

    <div class="mes_listes">
    <ul id="courses"> <!-- ul est dans div -->
        <li class="nourriture">Tomates</li> <!-- li est dans ul -->
        <li class="nourriture">Pâtes</li>
        <li class="produits_menagers">Sopalin</li>
    </ul>
    <ul id="travail"> <!-- ul est dans div -->
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
</div>

    On parle alors de liens de parenté. Dans notre exemple, la balise "div" est parente de la balise "ul", et la balise "ul" est enfant de la balise "div". Au même titre, les balises "li" sont enfant de "ul", et "petits-enfants" de "div". Ce principe va vous permettre de cibler vos éléments plus précisément. Si par exemple vous souhaitez faire un style qui ne s'applique qu'aux éléments de la liste "travail", vous écrirez une règle avec cette forme :

    div.mes_listes ul#travail li{
    color:orange;
}

    Dans ce cas la, seules les balises "li" de la liste ayant l'id "travail", contenue dans les div qui ont une classe "mes_listes" seront impactées.


    Note importante : En CSS, on peux cibler un élément en "descendant" dans la filiation (ex : frère, enfant, petits enfant, arrière arrière arrière petits enfants, etc....). En revanche, on ne peux quasiment pas écrire une règle qui cible le "grand-parent" d'un élément. Donc n'essayer pas trop de forcer dans cette direction, et re-voyez plutôt votre approche du problème.


    Cibler un élément enfant direct ou indirect

    Comme nous venons de le voir, l'opérateur "espace" permet d'accéder à un descendant du premier sélecteur, mais sans aucune notion d'éloignement de la descendance. Le sélecteur qui suit "espace" peut être un enfant direct ou un enfant éloigné du sélecteur principal, ça ne change rien. 

    Exemple :

    HTML :

    <nav>
    <ul>
        <li>Accueil</li>
        <li>Produits</li>
        <li>Contact</li>
    </ul>
</nav>
<div class="mes_listes">
    <ul id="courses">
        <li class="nourriture">Tomates</li>
        <li class="nourriture">Pâtes</li>
        <li class="produits_menagers">Sopalin</li>
    </ul>
    <ul id="travail">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
</div>

    CSS :

    nav li{ <!-- Cette règle ne sélectionne que les li enfants de nav -->
    color:green;
    font-size:30px;
}

    Rendu :


    Ici, tous les <li> enfants de <nav> seront en vert et avec une grande taille de police. Les autres <li> ne sont pas impactés, car ils ne sont pas enfant de <nav>.

    Note : vous commencer à comprendre pourquoi l'indentation est absolument nécessaire ? Si une balise comporte de nombreux enfants, cela peux très vite devenir illisible.


    Cibler un élément enfant direct

    Si vous souhaiter ne viser QUE les descendants direct d'un premier sélecteur, vous utiliserai l'opérateur ">". Cela peux s'avérer utile dans le cas ou l'élément existe sous différentes formes dans les enfants de votre sélecteur, mais que vous ne souhaitez cibler que la balise directement descendante. Exemple :

    HTML

    <div>
    <span>Premier span du div. (enfant direct)
        <span>Deuxième span, dans un span dans un div (enfant indirect).</span>
    </span>
    <span>Deuxième enfant direct</span>
</div>
<span>Troisième span, en dehors de tout div.</span>

    CSS :

    span {
    background-color: yellow;
}

div > span { /* Cible les span enfants direct de div */
    background-color: blue;
}

    Dans cet exemple, seuls les <span> directement enfants du <div> seront en bleu. Tous les autres <span> seront en jaune.




    Les deux opérateurs que nous allons voir maintenant sont beaucoup moins utilisés, mais ils peuvent s'avérer utiles dans certains cas.

    Cibler un élément frère direct ou indirect

    Se fait avec l'opérateur "~" (tilde : AltGr + 2)

    Permet de cibler un élément frère de votre sélecteur principal. Exemple :

    HTML

    <h1>Titre H1</h1>
<div>
    <h3>Titre H3 dans une div</h3>
</div>
<h2>Titre H2</h2>
<p>paragraphe paragraphe paragraphe</p>
<h3>Titre H3 frère de H1</h3>

    CSS

    h1~h3 {
        color: orange;
    }

    Dans ce cas, le dernier <h3> sera orange car il est au même niveau de descendance que le <h1>. Le <h3> est un élément frère vis à vis du <h1>, mais il n'est pas le frère direct contrairement à <h2>. Le <h3> contenu dans la <div> n'est pas au même niveau que le <h1>, donc il n'est pas frère, et ne sera pas impacté par la règle CSS.



    Cibler un élément frère direct

    Se fait avec l'opérateur "+".

    Cela permet de cibler l'élément frère le plus proche de votre sélecteur. Exemple :

    HTML

    <h1>Salut !</h1>
<h2>Frère direct</h2>
<p>test paragraphe</p>
<h3>Test titre 3</h3>
<h2>Frère indirect</h2>

    CSS

    h1+h2 { /* Cible uniquement les h2 frère direct de h1 */
        color: blue;
    }
    Dans ce cas, le premier <h2> sera bleu car il est l'élément frère direct du <h1>. En revanche le dernier <h2> ne sera pas impacté par cette règle, car il n'est pas le frère direct du <h1>.



    Notes

    Le mot "siblings" : "siblings" en anglais, peut se traduire par "lien de parenté". Nous n'avons pas de mots en français pour exprimer la même idée. Donc ne soyez pas étonné si vous rencontrez ce terme. Et si vous faites des recherches Google pour trouver une info, n'hésitez pas à l'employer. Pour vous consoler, les anglophones n'ont pas de mot pour dire "le regard".

    Alsacréation : pour ceux qui débutent en CSS, le site alsacreations.com est une bonne référence française.


  • Pseudo-sélecteurs

    Les pseudo-sélécteurs sont des sélecteurs un peu particulier. Ils vous permettent de modifier le style sur différentes choses concernant votre sélecteur, mais pas vraiment sur le sélecteur lui-même. Un des exemples les plus simple pour imager les pseudo-sélecteurs, c'est le "a:visited", qui correspond à un lien qui a déjà été cliqué par l'utilisateur. Par défaut, cette valeur est un bleu violet un peu moche, et très rétro. Et bien si vous voulez changer ça, il vous faudra utiliser le pseudo-sélecteur "visited" sur le sélecteur "a".

    Il y a deux grandes familles de pseudo-sélecteurs :


    Les pseudos-éléments

    Les pseudo-éléments vont vous permettre de sélectionner certaines parties de l'élément sélectionné, mais que vous n'avez pas codé "en dur" dans votre HTML. Par exemple les pseudo-éléments "after" et "before", vont vous permettre de gérer le style de ce qui se passe juste avant votre balise, ou juste après. L'opérateur des pseudo-éléments est "::" (deux fois deux points).

    Exemple avec ::before :

    p::before {
    content: "Lisez-ceci :";
    background-color: yellow;
    color: red;
    font-weight: bold;
}

    Rendu :


    Dans ce cas, tous vos paragraphes auront un petit bloc de texte rouge et gras sur fond jaune, contenant "Lisez-ceci :", sans que vous n'ayez à le mettre dans la page HTML, ou de prévoir une balise HTML pour ça. Pratique.

    Voici quelques pseudos éléments :
    • after
    • before
    • first-line
    • first-letter
    • etc...



    Pour voir un exemple concret d'utilisation, vous pouvez inspecter la petite flèche qui se trouve à droite de votre photo de profil dans le header de cette page.

    Et voici un lien avec des informations plus exhaustives concernant les pseudo-éléments CSS sur le MDN : https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments

    Les pseudo-classes

    Comme nous venons de le voir avec la balise a:visited, les pseudo-classes correspondent à un "état". Pour a:visited, les balises à sélectionner sont bien les "<a>", mais seulement celles qui ont déjà été visités (d'ou le "visited"). C'est le navigateur qui gère cet état, vous n'avez pas à le coder vous même. C'est le navigateur qui va définir qu'un lien a déjà été visité, ou pas. Et pour faire ça, il va simuler une classe (comme si vous aviez écris vous même <a class="visited">), sauf que vous ne le verrez pas dans le code HTML. C'est pour cela qu'on parle de pseudo-classes.

    L'opérateur des pseudo-classes est ":" (deux points), c'est de cette manière que vous ciblez une pseudo-classe dans votre sélecteur.

    Une pseudo-classe largement utilisée est la pseudo-classe ":hover". Hover correspond à l'état d'un élément lorsque la souris survole l'élément en question. Par exemple si vous positionnez votre souris sur un lien, la pseudo-classe :hover va être active. Si vous bougez votre souris en dehors du lien, la pseudo-classe :hover sera inactive. 

    Exemple :

    a:hover {
    color:red;
}

    Dans cet exemple, les liens s'affichent en rouge lorsque vous les survolez avec la souris.

     

     

    Exemple sur ce site :  les liens qui composent les breadcrumbs (le fil d’Ariane). Vous pouvez modifier à la volée la couleur des liens en hover dans votre debugger, c'est très simple.

    Il existe de nombreuses pseudo-classes qui ont toutes un comportement particulier. Certaines sont orienté sur l'état (comme :hover ou :selected), d'autres sur l'accès à des éléments parents par exemple (comme :first-child).

    Voici quelques exemple de pseudo-classes fréquemment utilisées : 

    • hover
    • first-child
    • last-child
    • nth-child(x) (x/odd/even)
    • selected
    • checked
    • not
    • etc...


    Vous trouverez une liste plus exhaustive sur le MDN dédié aux pseudo-classes CSS : https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes

  • Espacements

    Les propriétés margin, padding, et border.

    Les marges et les padding sont extrêmement utilisés pour aérer et positionner vos éléments. On utilisera les propriétés margin et padding.

    Comme on peut le voir dans l'image ci-dessous, les bordures entre aussi dans "l'enrobage" d'un élément.

    Dans cet exemple, l'élément de "démonstration" est le cadre bleu, cela pourrait être un paragraphe par exemple. Les marges sont à l'extérieur, les bordures sont le cadre en lui-même, et le padding est à l'intérieur. Puis en dernier, viens le contenu.



    Ces propriétés s'expriment souvent en pixels, en pourcentage, ou en em. Au choix.


    Attention mauvaise pratique : on peut mettre des marges négatives, mais c'est clairement quelque chose à éviter si possible.

  • Background

    La propriété background

    La propriété background est une des propriétés les plus répandues en CSS. Elle est composée de nombreuses sous-propriétés qui vont impacter le rendu de votre style :

    • background-color : change la couleur de fond
    • background-image : permet de mettre une image de fond au lieu d'une simple couleur
    • background-position : permet de déterminer la position du background (top, right, 35%, etc...)
    • background-repeat : détermine la répétition (si nécessaire) d'une image de fond
    • background-size : permet "d'étirer", de différentes manières, l'image à son conteneur
    • etc...


    Par exemple, les valeurs cover ou contains de la propriété background-size peuvent vous permettre de gagner beaucoup de temps et d'avoir un rendu adapté à tout type de résolutions.

    Même si l'usage le plus répandu de ces propriétés concerne le "fond" de votre site (balise <body>), on peut les appliquer à tous types d’éléments (div, section, etc...).. Pour l'instant, nous nous en tiendrons à un usage basique.

  • Polices de caractères

    Comme beaucoup d'autres concepts en CSS, les polices de caractères nous viennent de l'imprimerie. Si certaines polices génériques sont adaptées aux paragraphes de textes, il peut vous arriver d'installer des polices personnalisées dans votre site.

    Sites intéressants :


    Les propriétés des polices

    Font family :

    La propriété font-family vous permet de gérer les polices de caractères. Elle prends plusieurs valeur possibles par défaut, mais ce sont des polices génériques qui peuvent manquer d'élégance ou de lisibilité dans certains cas. Voici quelques options possible :

    font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
    Aussi, certaines polices sont installées sur tous les OS comme Arial. Donc vous pouvez utiliser Arial par défaut par exemple, car vous savez que le navigateur aura accès à cette police. Exemple avec Arial et Helvetica : 

    body {
    font-family: Arial, Helvetica, sans-serif;
}
    Ici, le navigateur essaiera en premier de charger l'Arial, puis le Helvetica, puis le sans-serif.

    Font-style :
    Permet de gérer l'inclinaison (italique, oblique,...) :
    font-style:italic;

    Font-weight : 
    Prmet de gérer le gras. Il y a plusieurs nuances possibles
    font-weight : 500;
    ou bien via un mot-clé :
    font-weight : bold;

    Font-size:
    Permet de gérer la taille de la police.
    font-size:18px;
    font-size:50px;
    Attention : il y a plusieurs unités qui sont adaptées aux tailles de polices, tel que les em, qui prennent en compte des réglages de l'utilisateur (taille de police de l'OS, malvoyants, résolution d'écran, etc...).


    Polices personnalisées via l'utilisation d'un CDN


    Pour utiliser une nouvelle police dans votre site, vous pouvez utiliser une font provenant d'un fichier hébergé par un autre serveur, via un CDN. Exemple :

    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

    On charge une feuille de style externe, c'est ce fichier qui contient la nouvelle police de caractères (ici : Raleway).

    Ensuite, vous importez le fichier CSS du CDN dans le fichiers CSS de votre site (pas obligatoire) :

    @import url(https://fonts.googleapis.com/css?family=Raleway);


    Ensuite, vous pouvez utiliser la nouvelle font dans votre propriété font-family :

    * {
    font-family: 'Raleway', sans-serif;
}


    Polices personnalisées via une installation en local

    Si vous souhaitez fournir le fichier qui décrit votre nouvelle police dans votre site (comme une image par exemple), vous pouvez installer une police dans votre arborresscence, la charger dans vos fichiers CSS, et l'appliquer à votre HTML.

    Donc, vous aurez des fichiers représentant la font dans un de vos dossier :

    • mafont.ttf
    • mafont.woff
    • mafont.eot
    • mafont.etf

    Attention, tous les fichiers sont utiles car ils sont fait pour les différents navigateurs.

    Ensuite vous importez vos fichiers de font dans votre CSS grâce à la propriété @font-face :

    @font-face {
    font-family: 'mafont'; /* on lui donne un nom */
    src: url('mafont.eot'); /* On charge les différents fichiers source */
    src: url('mafont.otf') format('truetype'), url('mafont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

    Et vous pourrez utiliser votre nouvelle police dans votre page web via la propriété font-family :

    h1{
        font-family: mafont, sans-serif;
    }

    On n'oublie pas de placer les polices génériques derrière, au cas ou le navigateur n'arrive pas à charger celle que vous avez fourni en local.


  • Habillage

    Les propriétés float et clear.

    Grâce à la propriété float, on va pouvoir habiller des éléments par la gauche ou par la droite. Cela veux dire que le texte va s'écrire en "suivant" les contours d'une image par exemple.



    Voici comment on pourrai écrire une règle avec float :

     
    img{
        float:left;
    }
    Ici, l'image "flottera" à gauche, et transmettra cette propriété aux éléments suivants, comme sur l'image.

    Attention :     quand on définit un élément en float, la propriété se transmet automatiquement à toutes les balises suivant cet élément. Il va donc falloir "stopper" le flottement pour retrouver un flux normal grâce à la propriété clear.

    Exemple si on avait mis en place un float:left :

    clear:left;   /*On peux écrire right ou both aussi*/
    Ceci aura pour effet de stopper le flottement à gauche. Ces deux propriétés (float et clear) sont utilisées ensemble en général.

  • Mode d'affichage

    La propriété display

    Cette propriété va vous permettre de définir le "mode d'affichage" de vos éléments, et donc va grandement influencer le positionnement et l'agencement de vos balises.

    Voici un exemple pour faire disparaître un élément de la page :

    div{
    display:none;
}


    Et voici les principales valeurs que l'on pourra utiliser :


    Voici une illustration de quelques modes d'affichages standards :



  • Positionnement

    Le flux

    Pour bien comprendre le fonctionnement de base du positionnement il faut aborder un sujet un peu complexe : le flux. Quand votre navigateur "lit" le document HTML, puis y associer un style CSS, il va "dessiner" votre page web via un moteur de rendu. Cette étape va permettre de passer d'un aspect "code", à un rendu visuel (couleurs, taille des fonts, etc...). En ce qui concerne le positionnement, le navigateur va suivre un "flux" par défaut (du haut vers le bas, de la gauche vers la droite). C'est à dire qu'il va obéir à des règles simples, lui permettant d'agencer le rendu visuel d'une page suivant le code qu'elle contient. Heureusement, on peux modifier ce "flux" via des règles CSS, et donc changer le comportement standard d'affichage afin de pouvoir agencer ses éléments de manière personnalisée.


    La propriété position

    Par défaut, le mode de positionnement d'un élément est statique (static en anglais). Cela veux dire que le positionnement de l'élément suit le flux normal, en fonction de son conteneur parent. On peux changer le mode de positionnement en influant sur cette propriété, et donc "sortir" du flux normal. 

    Par exemple :

    nav{
        position:fixed;
        top:0px;
    }

    Cette règle CSS permet de fixer son menu de navigation en haut du navigateur. Cela veux dire que si l'utilisateur scroll dans la page, le menu restera toujours visibles en haut de l'écran, car il va suivre le scroll de l'utilisateur. On aura donc l'impression que le menu de navigation est "fixe" par rapport au navigateur.




  • Flexbox

    Les flexbox sont très utilisées pour faire du positionnement plus facilement de nos jours. C'est LA solution a privilégier si vous devez coder un site "from scratch". Elles sont assez récentes dans l'histoire de CSS (supportées par les navigateurs vers 2013 environ), et permettent de faire de l'agencement de blocs de manière plus souples et moins contraignante qu'avec les "anciennes" méthodes. 

    Un des grands avantages des flexbox, c'est qu'elles vous permettent de déterminer un "type" d'agencement, puis le moteur de rendu graphique du navigateur se chargera des détails techniques (largeur des blocs, espacements entre les blocs, étirements, etc...). Elles vous permettent donc d'avoir un résultat acceptable en écrivant seulement quelques règles, la ou il fallait tout une tartine de code auparavant.

    Pour mieux visualiser les effets des flexbox, ouvrez ce guide qui est une référence : https://css-tricks.com/snippets/css/a-guide-to-flexbox/


    Exemples de rendu des flexbox





    Pour mettre en place un système de flexbox "complet", on va devoir jouer sur deux blocs distincts :
    • le conteneur : en violet sur les illustrations
    • les éléments : en orange sur l'illustrations


    Propriétés liées au conteneur

    Le conteneur devra obligatoirement avoir la propriété display:flex pour passer en mode flexbox. On pourra alors jouer sur d'autres propriétés du conteneur pour changer certaines options d’affichage.

    Par exemple :

    • flex-direction:row : c'est la valeur par défaut. Elle va exprimer le fait que les blocs à l'intérieur du conteneur devront s'agencer en ligne
    • flex-direction:column : Les blocs s'agenceront en colonnes

    On retrouve aussi :

    • flex-wrap
    • justify-content
    • align-items
    • etc...


    Propriétés liées aux éléments

    Après avoir fixé les grandes lignes d'agencement de vos blocs via l'utilisation des propriétés liées au conteneur, vous allez pouvoir "peaufiner" l'agencement de chaque élément. Ces propriétés vont surtout influer sur la taille d'un bloc par rapport aux autres, et son positionnement à l'intérieur du conteneur.

    • flex-grow : autorise un bloc à s'étirer par rapport aux blocs voisins et à sa taille nominale
    • flex-shrink : autorise un bloc à se rétrécir par rapport aux blocs voisins et à sa taille nominale
    • flex : raccourci pour écrire flex-grow et flex-shrink dans une seule propriété
    • align-items : permet de surcharger - pour un élément - la propriété align-items définit dans le conteneur

  • Divers

    Variables et propriétés personnalisées :

    https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties

    https://developer.mozilla.org/fr/docs/Web/CSS/--*

    https://blogs.infinitesquare.com/posts/web/css-vars-le-guide-complet

  • Travaux pratiques