La propriété Joli effet de bordure d'un seul côté

La propriété CSS box-sizing sur w3schools permet d'intégrer le padding et le border dans les dimensions totales (width et height) d'un élément. Elle simplifie la gestion de l'espace en fixant largeur et hauteur : si les marges changent, la largeur et la hauteur resteront les mêmes.

Voir le modèle box sur w3schools

Un élément en display block démarre sur une nouvelle ligne et prend toute la largeur possible.

Un élément en display inline prend seulement l'espace nécessaire et ne provoque pas de saut de ligne.

Entre les deux : display inline-block. Contrairement à inline, inline-block permet de modifier height et width, ainsi que margin et padding, en top et bottom. Un saut de ligne n'est pas ajouté après un élément en inline-block.

Un élément en display none est masqué.

CSS display sur w3schools

Un moyen de régler la taille de la police sur les différents écrans est d'utiliser une combinaison de pourcentage et em.

On place un pourcentage par défaut sur body, puis on utilise em pour les autres éléments.

Démonstration

On peut également styler font-size avec l'unite vw (= viewport width).

CSS font-size sur w3schools

Voici trois sources d'icônes possibles : Font Awesome, Bootstrap et Google

Taille : bootstrap.min.css, 120 Ko, font awesome.js, 4 Ko

Exemples avec Font Awesome :

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

CSS icons w3schools

a:hover doit venir APRÈS a:link et a:visited dans la définition CSS pour être effectif.

a:active doit venir APRÈS a:hover.

a { color: black; text-decoration: none; } enlève tout style d'un lien.

CSS links sur w3schools

Les marges haute et basse des éléments sont parfois fusionnées en une marge unique, égale à la plus grande marge.

Cela ne concerne pas les marges droite et gauche.

CSS margin collapse sur w3schools

Nombreuses polices : Google Fonts
Essayer la fonte populaire : open sans

Les blocs peuvent être positionnés à l'écran de différentes façons, grâce à la propriété position.

La position static, par défaut, place l'élément dans la suite du flux normal.

La position relative place l'élément dans la suite du flux normal, en le décalant grâce aux propriétés top, right, left et bottom.

La position fixed place l'élément par rapport au viewport, càd toujours au même endroit de l'écran, même si on scrolle.

Un élément en position absolute est positionné par rapport au parent le plus proche positionné (càd pas en static).

La position sticky fait basculer la position entre relative et fixed selon le déroulement (scroll) de la page.

Un cas pratique : sticky permet de garder une barre de menu toujours visible, si le contenu dépasse la hauteur de l'écran.

float permet de ranger des éléments hors du flux, à gauche ou à droite

clear interrompt le positionnement float.

Comprendre float et clear avec Pierre Giraud (video)

CSS positioning sur w3schools

IMPORTANT : un autre moyen de placer les blocs consiste à utiliser la propriété display: flex.

Vous pouvez/devez styler une table avec CSS pour la rendre plus conviviale, par exemple en alternant les couleurs sur les lignes, et en mettant en évidence une ligne survolée (tr:hover).

CSS table sur w3schools

Ajouter un élément conteneur (div par exemple) avec la propriété overflow-x:auto autour de l'élément table pour le rendre responsive. Une barre de déroulement s'affichera si la table dépasse de l'écran.

CSS table responsive sur w3schools

text-align:

text-transform: uppercase, lowercase, capitalize

text-decoration: none, underline, line-through, overline

text-indent:

text-shadow: 0px 0px 3px teal;

text-shadow: 2px 2px 3px grey;

Pour voir la différence entre cover et contain, pour intégrer une image dans une div, pour créer une "image héros", cliquer ci-dessous

CSS backgrounds sur sur w3schools

Cliquez sur exemple pour voir une boîte de texte ombrée grise.

<style>
.shadows_box {
  color: black;
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: lightgrey;
  box-shadow: 10px 10px 5px grey;
  margin: 15px;
}
</style>

<div class="shadows_box">
    Ecouter les autres,
    c'est encore la meilleure façon d'entendre ce qu'ils disent.
    Pierre Dac
</div>

CSS shadows box sur sur w3schools

Pour créer rapidement de jolies couleurs pastel, cliquer ci-dessous

Truc : opacity permet de faire varier la même couleur, dans des tons plus ou moins clairs.

aqua, black, blue, fuschia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

opacité

color: RGBa(255, 000, 000, 0.7);

équivaut à

color: RGBa(255, 000, 000); opacity: 0.7;

CSS colors sur sur w3schools

Essayez vous-même >>

Styler une image avec lien et ombre

CSS images sur sur w3schools

white-space: nowrap; permet de mettre tout un paragraphe sur une seule ligne.

En complément, text-overflow (clip ou ellipsis) contrôle l'affichage du texte qui dépasse.

overflow: hidden permet de masquer/afficher le texte qui sort de l'élément.

word-break: keep-all; empêche la coupure de tous les mots.

CSS text effects sur sur w3schools

Principe : une div visible contient un span caché ( visibility: hidden)

Un hover sur la div affiche le span caché.

Améliore le traditionnel title="..."

CSS tooltip sur sur w3schools

Image et contenu dans un tooltip

Pour créer des effets esthétiques en quelques lignes, penser à transition.
L'exemple ci-dessous transforme un cercle en carré en une seconde.

<style>
.cercle_carre {
  width: 100px;
  height: 100px;
  background: red;

  /* border-radius de départ */
  border-radius: 50px;

  /* opération concernée et durée d'animation */
  transition: border-radius 1s;
}
.cercle_carre:hover {
  /* border-radius final */
  border-radius: 0px;
}
</style>
<p>Survolez le cercle.</p>
<div class="cercle_carre"></div>

Exemple de transition sur w3schools

tympanus.net