Demo 6

Balises: On utilise les selecteurs de balise html (div, body, p, etc.) quand on est vraiment sûr.e qu'on veut absolument appliquer le style correct à toutes les balises de ce genre. C'est applicable dans beaucoup de cas, mais la plupart du cas il est préférable d'utiliser une classe à la place. Par exemple, on fait appel à une balise div simplement avec la syntaxe css


xxxxxxxxxx
        
        
        
        
            
                
                
                div {
            
              /* vos proprietes ici */
            }

et le HTML


xxxxxxxxxx
    
    
    
    
        
            
            
            <div>
        
          blabla
        </div>

Classes: On les utilise beaucoup mais de manière cohérente. C'est ici que vous allez généralement grouper vos éléments en sous-groupes. Par exemple, peut-être que les images qui ont la même taille et le meme ombrage pourraient faire partie de la classe mes-images-stylees, que j'appelerais sur mon CSS avec:


xxxxxxxxxx
        
        
        
        
            
                
                
                .mes-images-stylees {
            
              /* vos proprietes ici*/ 
            }

et le HTML


x
        
        
        
        
            
                
                
                <div>
            
              <img src="photoA.jpg" class="mes-images-stylees">
              <img src="photoB.jpg" class="mes-images-stylees">
            
                </div>
            
            <div>
              <img src="photoC.jpg" class="mes-images-stylees">
            </div>

Même si mes images sont dans des différents divs, la classe .mes-images-stylees va les selectionner.

IDs (ATTENTION): sont à utiliser avec prudence car ils sont là pour des cas très précis. Ils servent à sélectionner !!!!UN SEUL!!!!!! (UN) (VRAIMENT UN SEUL) élément. Il peut être util quand on est vraiment sûr.e que ce qu'on veut faire ne s'applique qu'à une seule place, mais il est souvent abusé pour "règler" des problèmes qu'on a parce qu'on est trop paresseux.se pour changer nos autres règles CSS. /rant

CSS:


x
    
    
    
    
        
            
            
            #mon-id-pour-un-seul-element {
        
        
              /* vos proprietes ici */
        
        }

HTML:


xxxxxxxxxx
    
    
    
    
        
            
            
            <div>
        
        
              <img src="photoA.jpg" class="mes-images-stylees" id="mon-id-pour-un-seul-element">
        
          <img src="photoB.jpg" class="mes-images-stylees">
        
            </div>

Ce qui s'appliquera seulement sur le img qui contient la photo photoA.jpg.

Notez que techniquement si vous utilisez un #id pour plusieurs elements... ca pourrait marcher MAIS ca va briser bien de choses a long terme. Faites attention hihi

Les propriétés d'éléments

color, fontSize, background-color, etc.

Encore une fois, parce que ça doit vous rentrer:

Allez sur W3Schools: Le CSS et apprenez sur les différentes propriétés possibles que vous pouvez ajouter à vos éléments.

Les margin et padding

Quand utiliser l'un vs. l'autre?
- Margin: espace extérieur (l'élément a besoin d'espace des choses en dehors de lui même) -> Dans le dessin, plus de marge veut dire plus d'espace rouge
- Padding: espace intérieur (l'élément a besoin d'espace des choses à l'intérieur de lui même) -> Dans le dessin, plus de padding veut dire plus d'espace bleu

(demo)

Les importations externes

Les url('...')

Exemple: background-image:


img {
    
      background-image: url("ton-lien-dimage-ici");
    }

le lien d'image peut etre un lien web ou bien un lien pour un fichier, par exemple monimage.jpg

On peut utiliser `url()` pour importer un font dans css!

Astuce: Google font

https://fonts.google.com/


@import url('url-de-ton-font-avec-ses-propriétés');
    
    

    /*plus bas dans ton css*/
    .taclasseaveclefontimporte {
      font-family: 'Nom de ton font importe', type-de-ton-font;
    }

Tutoriel W3Schools sur l'importation de fonts

Google icons

https://fonts.google.com/icons

Utiliser google icons: sur votre HTML, importer ceci dans le head


<head>
    
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
      <!-- autres choses de votre head -->
    </head>

Plus tard dans votre html


<i class="material-icons">nom-de-votre-icône </i>

(Par exemple, pour faire un icône de nuage, vous pouvez écrire cloud dans nom-de-votre-icône!)

Autres sources cool de fonts: Dafont.com (attention aux droits d'auteur!)

L'ordre de vos propriétés

Last in first out? :) Dernier arrivé, premier servi. (demo)

Le html suivant:


<p>Allo</p>

Couplé avec le CSS suivant:


p {
    
      color: red;
    }
    

    p {
      color: green;
    }

Affiche:

Allo

Parce qu'on redéfinit plus bas dans le css que p doit être de couleur verte, même si originalement son contenu était rouge.

Plus d'info sur l'ordre de "précedence " sur ce lien

Le mot `!important`: donner priorité

Le keyword !important peut faire qu'une propriété prenne toujours le dessus, peu importe son ordre. Si l'on reprend l'exemple ci-dessus, mais l'on change légèrement le CSS:


p {
    
      color: red !important;
    }
    

    p {
      color: green;
    }

Cela affiche maintenant:

Allo

Car color: red !important dit au CSS de prioriser la couleur rouge, peu importe son positionnement. Par contre, si vous avez deux !important (pas recommandé), le dernier !important prend le dessus.

Certains sélecteurs, comme des #id, ne sont pas affectés par les !important, car ils sont plus spécifiques et ont de la priorité plus grande.

Essayez d'utiliser !important le moins possible et priorisez la bonne structure de votre CSS lorsque possible.

Importations d'autres stylesheets

L'affectation de celles-ci sur l'ordre
Conflits possibles
Quand faire ceci?

Les inline styles, les spans

C'est important de comprendre: les inline style prennent le dessus sur les CSS "externes"

Le HTML:


<p>
    
      Je suis un texte plate sauf pour <span style="color: red;">cette partie-ci!</span> et la je suis plate encore :-(
    </p>

Affiche

Je suis un texte plate sauf pour cette partie-ci! et la je suis plate encore :-(

Les flexbox

Comment aligner vos éléments sur la même ligne? Comment handle les changements de fenêtre?

Flexbox simple:

HTML:


<div class="parent">
    
        <div class="enfant">
          <p>Un</p>
        </div>
        <div class="enfant">
          <p>Deux</p>
        </div>
      </div>

CSS:


.parent {
    
      display: flex;
      background-color: lightcoral;
      padding: 20px;
    }
    .enfant { 
      margin: 20px;
      background-color: lightgreen;
    }

(Notez que je rajoute du padding et margin pour donner de l'espace entre les divs enfants et parent)

Ce qui fait:

Changer l'ordre de nos elements:

Avec le même exemple, l'on peut rajouter les attributs order: 1, order: 2, etc à un élément spécifique (par exemple, à travers un id qui va sélectionner un élément précis), ce qui permet de changer l'ordre dans lequel les éléments viennent de gauche à droite (si le flex est horizontal, ce qui est le cas par défaut) ou du haut vers le bas (si le flex est vertical)

HTML:


x
    
    
    
    
        
            
            
            <div class="parent">
        
            <div class="enfant" id="deux">Un</div>
            <div class="enfant" id="un">Deux</div>
        
            </div>

CSS:


x
    
    
    
    
        
            
            
            .parent {
        
          display: flex;
          background-color: lightcoral;
          padding: 20px;
        }
        .enfant { 
          margin: 20px;
          background-color: lightgreen;
        }
        #un { 
           order: 1;
        }
         #deux {
        
               order: 2;
        
        
            }

Ce qui change l'ordre des mots:

Indiquer la proportion à prendre

En reprennant l'exemple ci-dessus, on peut rajouter les attributs flex-grow: 1 et flex-grow: 2, qui vont donner des proportions de taille que les éléments enfants peuvent prendre dans l'espace qui leur est alloué par leur parent.

HTML


<div class="parent">
    
        <div class="enfant" id="deux">Un</div>
    
            <div class="enfant" id="un">Deux</div>
    
    </div>

CSS:


x
    
    
    
    
        
            
            
            .parent {
        
          display: flex;
          background-color: lightcoral;
          padding: 20px;
        }
        .enfant { 
        
              margin: 20px;
        
          background-color: lightgreen;
        }
        #un { 
        
              flex-grow: 1;
        
        
              order: 1;
        
        }
         #deux {
        
              flex-grow: 2;
        
        
              order: 2;
        
        
            }

Ce qui change la proportion (remarquez que l'attribut #deux est donné à l'élément qui contient le mot "un"):

Autres lectures: W3Schools sur le flexbox

(Particulièrement, je vous recommande la lecture sur comment faire un flexbox vertical et un flexbox responsive)

Demo 6

Exercice de la semaine

À propos des éditeurs de texte: encore

Aides mémoires + ressources de la semaine

Validateur CSS

W3Schools: Le CSS (excellente source, à utiliser BEAUCOUP, tout le temps, tout le long de votre carrière :))

Le CSS: pourquoi?

Les selecteurs: la base du CSS

Important à savoir (j'avais oublié durant la démo): classes vs. id vs. nom de balise

Les propriétés d'éléments

Encore une fois, parce que ça doit vous rentrer:

Les margin et padding

Les importations externes

Les url('...')

On peut utiliser url() pour importer un font dans css!

Astuce: Google font

Google icons

L'ordre de vos propriétés

Le mot !important: donner priorité

Importations d'autres stylesheets

Les inline styles, les spans

Les flexbox

Flexbox simple:

Changer l'ordre de nos elements:

Indiquer la proportion à prendre

Autres lectures: W3Schools sur le flexbox

On peut utiliser `url()` pour importer un font dans css!

Le mot `!important`: donner priorité