5. Les styles

Les options d'un élément s'écrivent après avec, reliées par et.

page "accueil" :
    titre "Bienvenue" avec couleur bleu et taille grande
    titre "Centré" avec position centree
    bouton "Valider" avec fond vert et texte blanc
    bouton "Annuler" avec fond gris et bordure arrondie

Les couleurs : bleu, vert, rouge, orange, jaune, violet, rose, gris, noir, blanc. Les tailles : petite, moyenne, grande. Les couleurs de ton thème marchent aussi (voir le thème).

Donner un nom à un élément

nom "…" donne un nom à un élément, pour le viser dans une action :

page "connexion" :
    titre "Connexion"
    texte "Connexion en cours…" avec nom "attente"
    bouton "Se connecter" avec fond vert et nom "connexion"
    quand la page se charge :
        cacher "attente"
    quand l'utilisateur clique sur "connexion" :
        montrer "attente"

Ton propre CSS

Un bloc style : en haut du fichier contient du CSS ordinaire. On l'applique avec avec style "…" :

style :
    .grand { font-size: 3rem; }
    .principal { border: 2px solid navy; }

page "accueil" :
    titre "Bienvenue" avec style "grand"
    bouton "Valider" avec fond vert et style "principal"

Le CSS peut aussi venir d'un fichier : utiliser style "./theme.css" en haut du fichier. Le CSS s'applique au web, au statique et au desktop ; le mobile ne traduit que les styles nommés (couleur, fond, taille, position, bordure).

humalis verifier avertit si une classe donnée par avec style est absente du CSS du projet et propose un nom proche. Il avertit aussi si une règle !important cible une classe .humalis-… : retirez !important ou utilisez votre propre classe.