Flux en CSS
“There is a problem with design on the web. It's problematic to design in a way that is going to be device agnostic. [...] To design for a multitude of unknown canvas [...] Design not longuer control but suggest.”
Miriam suzanne, CSS is weird
Composition de texte
Changer l'alignement à gauche, à droite au milieu d'un texte avec text-align.
Le caractère peut être customizer avec
font-sizefont-weightfont-stylefont-familly
La composition typo peut être réaliser avec
line-heightletter-spacingwords-spacing
De nombreux examples sont accessible sur le site de Felix Wasler, web typography sketches.
Superposition
position: absolute, permet de placer des éléments relatifs à la page, en les sortant du flut.position: fixed, permet de placer des éléments relatifs à l'écran, en les sortant du flut.position: sticky, permet de placer des éléments qui reste dans le flut de la page, mais qui se fixe à partir d'une position définie.
Marges, colones, et centrer
La proprieter columns: 2 auto; permet de deviser son texte en 2 ou plusieurs colones.
En l'utilisant en combinaisont avec column-span: all; sur les titres par example (h2) on reset le flux de colones à chacunes de leur apparition.
On peut centrer des éléments en leur donnant une margin: 1em auto; et un taille plus petite de la largeur de la page avec max-width: 320px;.
Il est également possible de donner des marges négatives pour faire déborder certains éléments.
En utilisant p:nth-of-type(odd) ou p:nth-of-type(even) il est possible de styliser un paragraphe sur deux, par example en leur donnant des marges différentes pour créer des décalages.
On peut aussi être plus précis avec p:nth-of-type(5) pour donner un style au 5ieme paragraphe exclusivement.
Display alternatifs
Les éléments HTML sont par defaut soit en display: block, soit en display: inline, le premier représente un rectangle solide qui prend toute la largeur de la page et la hauteur qui lui est nécéssaire, le second représente du texte qui passe d'une ligne à l'autre dès qu'il n'y a plus de place pour continuer.
Il existe d'autre display, tel que
flexpour rendre la taille éléments fléxible, les laissantgrowoushrinken fonction de la place et des comportement définis.gridpour définir une grille à taille fixe ou flexible, sur la laquelle les éléments se place, soit manuellement, soit automatiquement.tablepour les éléments<table>en HTML.